创建 AppBar 作为类颤振答案

【问题标题】：Create AppBar as a class flutter创建 AppBar 作为类颤振
【发布时间】：2021-08-01 00:24:12
【问题描述】：

我正在尝试将 appbar 作为我的应用页面之一的类（仅用于 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,
                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,
            ),
          ],
        );
}

【问题讨论】：

我看到的首选方式是使用简单的无状态小部件实现 PrefferedSizeWidget。您可以直接将小部件用作自定义应用栏。

标签： flutter widget appbar

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

创建一个单独的方法，将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,
      ),
    ),

【讨论】：

@lucrece：如果它满足你的需要，你能接受答案吗，