Flutter - 如何更改 AppBar 高度并对齐标题垂直中心？答案

【问题标题】：Flutter - How change AppBar height and align title vertical center?Flutter - 如何更改 AppBar 高度并对齐标题垂直中心？
【发布时间】：2020-05-16 23:22:24
【问题描述】：

我需要在我的颤振应用中更改应用栏高度。我使用此代码：

 Widget build(BuildContext context) {
 return Scaffold(
    appBar: PreferredSize(
      preferredSize: Size.fromHeight(100.0),
      child: AppBar(
        automaticallyImplyLeading: false, 
        flexibleSpace: Container(),
        centerTitle: true,
        title: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Icon(Icons.search),
            Icon(Icons.home),
            PopupMenuButton<String>(
              icon: Icon(Icons.menu),
                itemBuilder: (BuildContext context) => <PopupMenuEntry<String>>[
                  PopupMenuItem<String>(
                    value: "1",
                    child: Text('Hello'),
                  ),
                  PopupMenuItem<String>(
                    value: "2",
                    child: Text('World'),
                  ),
                ]
            )
          ],
        ),
      ),
    ),
    body: Container());
}

这是我的结果：

高度已更改，但我需要将内容垂直居中对齐。我尝试了这个选项，但它不起作用：

        automaticallyImplyLeading: false, 
        flexibleSpace: Container(),
        centerTitle: true,

有什么建议吗？

【问题讨论】：

并且还使用 safeArea 以获得更清晰的输出
将crossAxisAlignment:center 添加到您的标题行

标签： flutter dart flutter-layout

【解决方案1】：

试试这个

Widget build(BuildContext context) {
return Scaffold(
    appBar: PreferredSize(
      preferredSize: Size.fromHeight(100.0),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          AppBar(
            elevation: 0.0,
            automaticallyImplyLeading: false,
            flexibleSpace: Container(),
            centerTitle: true,
            title: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Icon(Icons.search),
                Icon(Icons.home),
                PopupMenuButton<String>(
                    icon: Icon(Icons.menu),
                    itemBuilder: (BuildContext context) => <PopupMenuEntry<String>>[
                      PopupMenuItem<String>(
                        value: "1",
                        child: Text('Hello'),
                      ),
                      PopupMenuItem<String>(
                        value: "2",
                        child: Text('World'),
                      ),
                    ]
                )
              ],
            ),
          ),
        ],
      ),
    ),
    body: Container());
 }

【讨论】：

所以基本上将 appbar 放在一个带有 mainAxisAlignment 到 MainAxisAlignment.center 的列中就可以了。

【解决方案2】：

https://dartpad.dartlang.org/115b02f36456fe9579cb8daf092bd906

class MyAppBar extends StatelessWidget with PreferredSizeWidget {
  final double appBarHeight = 120.0;
  @override
  get preferredSize => Size.fromHeight(appBarHeight);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          AppBar(
            automaticallyImplyLeading: false, 
            elevation: 0,
            title: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Icon(Icons.search),
                Icon(Icons.home),
                PopupMenuButton<String>(
                  icon: Icon(Icons.menu),
                  itemBuilder: (BuildContext context) =>
                      <PopupMenuEntry<String>>[
                    PopupMenuItem<String>(
                      value: "1",
                      child: Text('Hello'),
                    ),
                    PopupMenuItem<String>(
                      value: "2",
                      child: Text('World'),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ],
      ),
      decoration: BoxDecoration(
        boxShadow: <BoxShadow>[
          BoxShadow(
              color: Colors.black54,
              blurRadius: 15.0,
              offset: Offset(0.0, 0.75))
        ],
        color:
            ThemeData.dark().appBarTheme.color ?? ThemeData.dark().primaryColor,
      ),
    );
  }
}

【讨论】：

【解决方案3】：

试试这个

 @override
  Widget build(BuildContext context) {
    return  SafeArea(
      child: Scaffold(
          appBar: PreferredSize(
          preferredSize: Size.fromHeight(100.0),
      child: AppBar(
           automaticallyImplyLeading: false,
           flexibleSpace: Container(),
           centerTitle: true,
      title: Padding(
            padding: const EdgeInsets.only(top:25.0),
        child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
             Icon(Icons.search),
             Icon(Icons.home),
        PopupMenuButton<String>(
        icon: Icon(Icons.menu),
        itemBuilder: (BuildContext context) => <PopupMenuEntry<String>>[
        PopupMenuItem<String>(
        value: "1",
        child: Text('Hello'),
        ),
        PopupMenuItem<String>(
        value: "2",
        child: Text('World'),
          ),
         ]
        )
       ],
      ),
     ),
    ),
   )
  ),
 );
}

【讨论】：