颤动:设置AppBar的高度

Question

我怎样才能简单地设置AppBarFlutter 的高度？

酒吧的标题应该垂直居中(在那里AppBar).

Answer 1

您可以使用PreferredSize:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Example',
      home: Scaffold(
        appBar: PreferredSize(
          preferredSize: Size.fromHeight(50.0), // here the desired height
          child: AppBar(
            // ...
          )
        ),
        body: // ...
      )
    );
  }
}

Answer 2

使用toolbarHeight：

不再需要使用PreferredSize. toolbarHeight与 一起使用flexibleSpace。

AppBar(
  toolbarHeight: 120, // Set this height
  flexibleSpace: Container(
    color: Colors.orange,
    child: Column(
      children: [
        Text('1'),
        Text('2'),
        Text('3'),
        Text('4'),
      ],
    ),
  ),
)

Answer 3

您可以使用PreferredSize和flexibleSpace：

appBar: PreferredSize(
  preferredSize: Size.fromHeight(100.0),
  child: AppBar(
    automaticallyImplyLeading: false, // hides leading widget
    flexibleSpace: SomeWidget(),
  )
),

通过这种方式，您可以保持elevationof AppBar的可见，并具有自定义的高度，这正是我想要的。不过，您必须在中设置间距SomeWidget。

Answer 4

除了@Cinn 的回答，你还可以定义一个这样的类

class MyAppBar extends AppBar with PreferredSizeWidget {
  @override
  get preferredSize => Size.fromHeight(50);

  MyAppBar({Key key, Widget title}) : super(
    key: key,
    title: title,
    // maybe other AppBar properties
  );
}

或者这样

class MyAppBar extends PreferredSize {
  MyAppBar({Key key, Widget title}) : super(
    key: key,
    preferredSize: Size.fromHeight(50),
    child: AppBar(
      title: title,
      // maybe other AppBar properties
    ),
  );
}

然后用它代替标准的

Answer 5

您可以简单地使用toolbarHeight，如下所示：

        appBar: AppBar(
        toolbarHeight: 70.0, // add this line
        centerTitle: true,   // add this line
        title: Text('your title'),
        ),

但如果您有任何操作，上面的代码不能按您想要的方式工作，您可以使用此代码

AppBar(
    centerTitle: true,
    title: Padding(
      padding: const EdgeInsets.all(16.0),
      child: Stack(
        alignment: Alignment.center,
        children: [
          Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('Chats', style: TextStyle(color:Colors.black),),
              Icon(Icons.add, color: Colors.black,),
            ],
          ),
          Align(
            alignment: Alignment.centerRight,
            child: Icon(Icons.add, color: Colors.black,),
          ),
        ],
      ),
    ),
  )

Answer 6

在撰写本文时，我尚未意识到PreferredSize。Cinn的答案更好地实现了这一目标。

您可以创建一个具有自定义高度的自定义小部件：

import "package:flutter/material.dart";

class Page extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Column(children : <Widget>[new CustomAppBar("Custom App Bar"), new Container()],);
  }
}


class CustomAppBar extends StatelessWidget {

  final String title;
  final double barHeight = 50.0; // change this for different heights 

  CustomAppBar(this.title);

  @override
  Widget build(BuildContext context) {
    final double statusbarHeight = MediaQuery
        .of(context)
        .padding
        .top;

    return new Container(
      padding: new EdgeInsets.only(top: statusbarHeight),
      height: statusbarHeight + barHeight,
      child: new Center(
        child: new Text(
          title,
          style: new TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
        ),
      ),
    );
  }
}

Answer 7

最简单的方法是toolbarHeight在 AppBar 中使用属性

例子 ：

AppBar(
   title: Text('Flutter is great'),
   toolbarHeight: 100,
  ),

您可以flexibleSpace在 appBar 中添加属性以获得更大的灵活性

输出：

对于更多的控制，使用PreferedSize 小部件来创建自己的appBar

示例：

appBar: PreferredSize(
     preferredSize: Size(100, 80), //width and height 
          // The size the AppBar would prefer if there were no other constraints.
     child: SafeArea(
       child: Container(
         height: 100,
         color: Colors.red,
         child: Center(child: Text('Fluter is great')),
       ),
     ),
),

SafeArea如果您没有安全区域，请不要忘记使用小部件

输出 ：

Answer 8

Cinn 的回答很好，但它有一个问题。

该PreferredSize控件将在屏幕顶部立即启动，而不考虑状态栏，所以它的一些高度将通过状态栏的高度阴影。这也说明了侧凹口。

解决方案：preferredSize用一个包裹 the的孩子SafeArea

appBar: PreferredSize(
  //Here is the preferred height.
  preferredSize: Size.fromHeight(50.0),
  child: SafeArea(
    child: AppBar(
      flexibleSpace: ...
    ),
  ),
),

如果您不想使用 flexibleSpace 属性，则不需要所有这些，因为AppBarwill的其他属性会自动说明状态栏。

Answer 9

只需使用工具栏高度...

AppBar(
 title: Text("NASHIR'S APP"),
 toolbarHeight: 100,
),