将 AppBar 创建为类 flutter

如何解决将 AppBar 创建为类 flutter

我正在尝试将应用栏作为我的应用页面之一的类（仅在 1 个页面上使用）。

我想要 addStoryAppBar 让我的代码更易于阅读。我该怎么做呢？我尝试创建一个小部件，但它删除了前导后退图标

class StoryAddPage extends StatefulWidget {
  const StoryAddPage({Key key}) : super(key: key);

  @override
  _StoryAddPageState createState() => _StoryAddPageState();
}

class _StoryAddPageState extends State<StoryAddPage> {
  @override
  Widget build(BuildContext context) {
    AppBar addStoryAppBar = AppBar(
      backgroundColor: Colors.white,title: Text(
        AppLocalizations.of(context).add_story,style: TextStyle(
            color: AppColors.Black,fontWeight: FontWeight.w700,fontSize: 16),),leading: SvgPicture.asset(
        "lib/assets/images/back.svg",semanticslabel: 'Back icon',fit: BoxFit.none,height: 10,actions: [
        GestureDetector(
          child: Image.asset('lib/assets/images/select_picture.png'),onTap: () => {},Padding(
          padding: const EdgeInsets.all(10.0),child: ElevatedButton(
            style: kOrangeButton,onpressed: () => {},child: Container(
              child: Text(
                AppLocalizations.of(context).publier,style: TextStyle(color: AppColors.Black),],);

    return SafeArea(
      child: Scaffold(
        appBar: addStoryAppBar,body: Container(
          child: Text('Add story'),);
  }
}

也尝试扩展 AppBar，但如何传递上下文？这是更适合做的事情吗？

class StoryAppBar extends AppBar {
  StoryAppBar()
      : super(
          iconTheme: IconThemeData(
            color: Colors.black,//change your color here
          ),backgroundColor: Colors.white,title: Text(
            AppLocalizations.of(context).add_story,style: TextStyle(
                color: AppColors.Black,elevation: 0.0,automaticallyImplyLeading: false,actions: <Widget>[
            IconButton(
              icon: Icon(Icons.notifications),onpressed: () => null,IconButton(
              icon: Icon(Icons.person),);
}

解决方法

您可以将 AppBar 小部件提取到有状态或无状态小部件。

创建您自己的前导后退图标。只需创建文本按钮，如下所示：

TextButton.icon(
    onPressed: () {
        Navigator.pop(context);
    },icon: Icon(Icons.arrow_back_rounded),label: Text(''),),

创建一个单独的方法，将 AppBar 返回到您的屏幕小部件。在新类中添加以下方法，并从您想要显示的任何位置调用此方法 AppBar

AppBar getApplicationAppBar(BuildContext context) {
  return AppBar(
    backgroundColor: Colors.white,title: Text(
      AppLocalizations
          .of(context)
          .add_story,style: TextStyle(
          color: AppColors.Black,fontWeight: FontWeight.w700,fontSize: 16),leading: SvgPicture.asset(
      "lib/assets/images/back.svg",semanticsLabel: 'Back icon',fit: BoxFit.none,height: 10,actions: [
      GestureDetector(
        child: Image.asset('lib/assets/images/select_picture.png'),onTap: () => {},Padding(
        padding: const EdgeInsets.all(10.0),child: ElevatedButton(
          style: kOrangeButton,onPressed: () => {},child: Container(
            child: Text(
              AppLocalizations
                  .of(context)
                  .publier,style: TextStyle(color: AppColors.Black),],);
}

如果后退按钮功能不起作用，则在后退按钮上使用 GestureDetector

leading: GestureDetector(
      onTap: () {
        Navigator.pop(context); 
      },child: SvgPicture.asset(
        "lib/assets/images/back.svg",