创建 AppBar 作为 flutter 类

Question

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

我希望有 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,
                fontWeight: FontWeight.w700,
                fontSize: 16),
          ),
          elevation: 0.0,
          automaticallyImplyLeading: false,
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.notifications),
              onPressed: () => null,
            ),
            IconButton(
              icon: Icon(Icons.person),
              onPressed: () => null,
            ),
          ],
        );
}

Answer 1

如果您有无状态小部件，您可以轻松实现 PreferredSizeWidget 这个例子向您展示了如何做到这一点：

    class CustomAppbar extends StatelessWidget implements 
       PreferredSizeWidget{
          const CustomAppbar({Key? key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return Container();
      }
    
      @override
      Size get preferredSize => Size(15.h, 100.w);
    }

如果您使用的是 StatefulWidget，您可以复制粘贴此代码

          class CustomAppbar extends StatefulWidget implements PreferredSizeWidget {
          final bool? isBack;
          final TextEditingController? controller;
        
          const CustomAppbar({Key? key, this.isBack, this.controller})
              : super(key: key);
        
          @override
          State<CustomAppbar> createState() => _CustomAppbarState();
        
          @override
          Size get preferredSize => Size(15.h, 100.w);
        }
        
        class _CustomAppbarState extends State<CustomAppbar> {
        
        
          @override
          Widget build(BuildContext context) {
            return Container()
          }
        }

现在你可以在应用栏上使用类了

Scaffold(

  appBar: CustomAppbar(

  );

原因是如果你进入应用栏你会看到

/// 显示在脚手架顶部的应用栏。最终的 首选尺寸小部件？应用栏；

应用栏是 PreferredSizeWidget 和 PreferredSizeWidget 的实现 包含 get 方法的 Widget 类

  Size get preferredSize;

Answer 2

您可以将

AppBar

小部件提取为有状态或无状态小部件。

Answer 3

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

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

Answer 4

创建一个单独的方法，将

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",
        semanticsLabel: 'Back icon',
        fit: BoxFit.none,
        height: 10,
      ),
    ),