Flutter：设置AppBar的高度

如何简单地设置AppBarFlutter中的高度？

条形标题应保持居中垂直（在该位置AppBar）。

您可以使用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: // ...
      )
    );
  }
}

您可以使用PreferredSize和flexibleSpace：

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

这样，您可以保持elevationofAppBar的可见度并自定义高度，这正是我一直在寻找的。不过，您必须在中设置间距SomeWidget。

在撰写本文时，我尚未意识到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),
        ),
      ),
    );
  }
}

除了@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
    ),
  );
}

然后用它代替标准的

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

该PreferredSize小部件将立即在屏幕顶部启动，而无需考虑状态栏，因此其某些高度将被状态栏的高度遮盖。这也说明了侧面缺口。

解决方案：preferredSize用SafeArea

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

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

您可以使用Appbar的toolbarHeight属性，它确实可以满足您的要求。

用途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'),
      ],
    ),
  ),
)

如果您使用的是Visual Code，请按Ctrl +单击AppBar函数。

Widget demoPage() {
  AppBar appBar = AppBar(
    title: Text('Demo'),
  );
  return Scaffold(
    appBar: appBar,
    body: /*
    page body
    */,
  );
}

并编辑此作品。

app_bar.dart will open and you can find 
    preferredSize = new Size.fromHeight(kToolbarHeight + (bottom?.preferredSize?.height ?? 0.0)),

高度差！