自定义 AppBar Flutter答案

【问题标题】：Custom AppBar Flutter自定义 AppBar Flutter
【发布时间】：2019-05-08 13:14:29
【问题描述】：

我正在尝试实现以下目标，

我对颤振很陌生，所以我无法弄清楚。我需要一个带有抽屉和操作的自定义 AppBar，但像图像一样排列。

我在标题小部件中尝试了 StackView

appBar: AppBar(
    title: Stack(
      children: <Widget>[
        Container(
          width: double.infinity,
          color: CustomColors.accentColor,
        ),
        Text(
          'Title',
          style: TextStyle(fontSize: 22.0, color: CustomColors.primaryDark),
        ),
      ],
    ),
  ),

但是我得到了这样的东西

有人可以帮帮我吗？谢谢。

【问题讨论】：

这不是一个自定义的 AppBar ，它只是一个自定义的小部件
创建您的自定义应用栏小部件：stackoverflow.com/a/63885062/10563627

标签： dart flutter flutter-layout

【解决方案1】：

正如我在评论中提到的，您可以创建一个自定义小部件，就像您附加的图片一样，有很多方法可以做到，这只是一个示例：

    class CustomBarWidget extends StatelessWidget {

      GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey();

      @override
      Widget build(BuildContext context) {
        return Scaffold(
          key: _scaffoldKey,
          body: Container(
            height: 160.0,
            child: Stack(
              children: <Widget>[
                Container(
                  color: Colors.red,
                  width: MediaQuery.of(context).size.width,
                  height: 100.0,
                  child: Center(
                    child: Text(
                      "Home",
                      style: TextStyle(color: Colors.white, fontSize: 18.0),
                    ),
                  ),
                ),
                Positioned(
                  top: 80.0,
                  left: 0.0,
                  right: 0.0,
                  child: Container(
                    padding: EdgeInsets.symmetric(horizontal: 20.0),
                    child: DecoratedBox(
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(1.0),
                          border: Border.all(
                              color: Colors.grey.withOpacity(0.5), width: 1.0),
                          color: Colors.white),
                      child: Row(
                        children: [
                          IconButton(
                            icon: Icon(
                              Icons.menu,
                              color: Colors.red,
                            ),
                            onPressed: () {
                              print("your menu action here");
                              _scaffoldKey.currentState.openDrawer();
                            },
                          ),
                          Expanded(
                            child: TextField(
                              decoration: InputDecoration(
                                hintText: "Search",
                              ),
                            ),
                          ),
                          IconButton(
                            icon: Icon(
                              Icons.search,
                              color: Colors.red,
                            ),
                            onPressed: () {
                              print("your menu action here");
                            },
                          ),
                          IconButton(
                            icon: Icon(
                              Icons.notifications,
                              color: Colors.red,
                            ),
                            onPressed: () {
                              print("your menu action here");
                            },
                          ),
                        ],
                      ),
                    ),
                  ),
                )
              ],
            ),
          ),
        );
      }
    }

关于更多信息，我写了一篇关于我们如何自定义 AppBar 的文章： https://medium.com/flutter-community/flutter-increase-the-power-of-your-appbar-sliverappbar-c4f67c4e076f

【讨论】：

嗨，谢谢你的代码。我能够创建具有类似设计的自定义小部件。我特别说 AppBar 的原因是因为我需要保留 AppBar 的功能，例如在导航上更改为后退图标，控制抽屉。我可以重新创建所有功能，但由于 AppBar 是一个小部件，我们可以自定义它吗？
感谢代码，它帮助我开始替换 AppBar，因为我无法让 AppBar 完成我需要的工作。我需要 AppBar 工具栏高度大于 56，目前无法做到。 AppBar 的整体高度可以更改，但通过增加它不允许 AppBar 工具栏的高度增加到超过 56。这部分由 Flutter 问题 #7330 和 #23373 引用。
@BrianOh 我写了一篇关于这个的文章：medium.com/flutter-community/…

【解决方案2】：

截图：

代码：

使用flexibleSpace

Scaffold(
  appBar: AppBar(
    toolbarHeight: 120, // Set this height
    flexibleSpace: Container(
      color: Colors.orange,
      child: Column(
        children: [
          Text('One'),
          Text('Two'),
          Text('Three'),
          Text('Four'),
        ],
      ),
    ),
  ),
)

使用PreferredSize

Scaffold(
  appBar: PreferredSize(
    preferredSize: Size.fromHeight(120), // Set this height
    child: Container(
      color: Colors.orange,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text('One'),
          Text('Two'),
          Text('Three'),
          Text('Four'),
        ],
      ),
    ),
  ),
)

【讨论】：

【解决方案3】：

只需将整个内容包装在 Stack 中即可。然后将 AppBar 作为最后一个小部件定位在某个小部件（例如容器）之间，以便 AppBar 可以浮动在它们上方。

 Widget setPage() {
    Color red800 = Colors.red[800];

    return Stack(
      children: <Widget>[
        Container(     // Background
          child: Center(
             child: Text("Home", style: TextStyle(fontSize: 25.0,
              fontWeight: FontWeight.w600,
              color: Colors.white),),),
          color: red800,
          height: MediaQuery.of(context).size.height * 0.2,
          width: MediaQuery.of(context).size.width,
        ),

        Container(),   // Required some widget in between to float AppBar

        Positioned(    // To take AppBar Size only
          top: 100.0,
          left: 20.0,
          right: 20.0,
          child: AppBar(
            backgroundColor: Colors.white,
            leading: Icon(Icons.menu, color: red800,),
            primary: false,
            title: TextField(
                decoration: InputDecoration(
                    hintText: "Search",
                    border: InputBorder.none,
                    hintStyle: TextStyle(color: Colors.grey))),
            actions: <Widget>[
              IconButton(
                icon: Icon(Icons.search, color: red800), onPressed: () {},),
              IconButton(icon: Icon(Icons.notifications, color: red800),
                onPressed: () {},)
            ],
          ),
        )

      ],
    );
  }

【讨论】：

【解决方案4】：

以下是我使用 Stack 和 PreferredSize for AppBar 创建它的方法。使用它允许我们重用默认的 AppBar 属性，例如当我们在正文中有 ListView 时，将 AppBar 粘在屏幕顶部。

_appBar(height) => PreferredSize(
    preferredSize:  Size(MediaQuery.of(context).size.width, height+80 ),
    child: Stack(
      children: <Widget>[
        Container(     // Background
          child: Center(
            child: Text("Home", style: TextStyle(fontSize: 25.0,
                fontWeight: FontWeight.w600,
                color: Colors.white),),),
          color:Theme.of(context).primaryColor,
          height: height+75,
          width: MediaQuery.of(context).size.width,
        ),

        Container(),   // Required some widget in between to float AppBar

        Positioned(    // To take AppBar Size only
          top: 100.0,
          left: 20.0,
          right: 20.0,
          child: AppBar(
            backgroundColor: Colors.white,
            leading: Icon(Icons.menu, color: Theme.of(context).primaryColor,),
            primary: false,
            title: TextField(
                decoration: InputDecoration(
                    hintText: "Search",
                    border: InputBorder.none,
                    hintStyle: TextStyle(color: Colors.grey))),
            actions: <Widget>[
              IconButton(
                icon: Icon(Icons.search, color: Theme.of(context).primaryColor), onPressed: () {},),
              IconButton(icon: Icon(Icons.notifications, color: Theme.of(context).primaryColor),
                onPressed: () {},)
            ],
          ),
        )

      ],
    ),
  );

在脚手架内部，我们只是调用上面的appbar。我们希望传入 AppBar().preferredSize.height，因为不同设备（例如：iPhone 8 Plus 和 iPhone 11 Pro Max）的默认 appBar 高度不同。

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: _appBar(AppBar().preferredSize.height),
      body: ListView(),
    );
})

【讨论】：

【解决方案5】：

截图：

代码（Null Safe）：

为简单起见，我没有创建所需的 UI，我只是想向您展示如何使用 PreferredSize 创建自定义应用栏

创建这个类：

class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
  final Widget child;
  final double height;

  CustomAppBar({
    required this.child,
    this.height = kToolbarHeight,
  });

  @override
  Size get preferredSize => Size.fromHeight(height);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: preferredSize.height,
      color: Colors.orange,
      alignment: Alignment.center,
      child: child,
    );
  }
}

用法：

像任何其他AppBar 一样使用它，但这次你可以设置height 属性：

Scaffold(
  appBar: CustomAppBar(
    height: 120,
    child: Column(
      children: [
        Text('One'),
        Text('Two'),
        Text('Three'),
        Text('Four'),
      ],
    ),
  ),
)

【讨论】：