Flutter 更改自定义 AppBar 高度答案

【问题标题】：Flutter change custom AppBar heightFlutter 更改自定义 AppBar 高度
【发布时间】：2020-01-02 11:36:53
【问题描述】：

我尝试了this link，但没有成功。

在这段代码中，当我尝试更改AppBar 的高度时，它没有任何变化。

Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.transparent,
    body: Container(
      height: double.infinity,
        child: Column(
          children: <Widget>[
            PreferredSize(
              preferredSize: Size.fromHeight(150.0),
              child: AppBar(
                backgroundColor: Colors.white.withOpacity(0.9),
                title: Container(height: 150.0,),
              ),
            )
          ],
        )),
  );
}

注意：appBar: 中没有使用我的AppBar(...)

【问题讨论】：

标签： flutter dart

【解决方案1】：

   class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return new MaterialApp(
        title: 'Flutter Demo',
        theme: new ThemeData(
            primarySwatch: Colors.blue,
        ),
        home: new Scaffold(
            body: Stack(
            children: <Widget>[
            Container(
                color: Colors.blue,
            ),
            new Positioned(
                top: 0.0,
                left: 0.0,
                right: 0.0,
                child: AppBar(
                title: Text('App Bar'),
                backgroundColor: Colors.green,
                ),
            ),
            ],
        )),
        );
    }
    }

【讨论】：

我的appBar 不在Scaffold 小部件中
你能再仔细阅读我的帖子吗？我的appbar 不在Scaffold 小部件中
将appbar添加到Scaffold有什么问题，为什么要添加到body中？
因为我想在另一个小部件中使用AppBar

【解决方案2】：

只需使用toolbarHeight:

appBar: AppBar(
  toolbarHeight: 150, // This is your height!
  title: Text('AppBar'),
)

但是，如果您不想使用appBar 属性

Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.transparent,
    body: Container(
      height: double.infinity,
      child: Column(
        children: <Widget>[
          Container(
            height: 150, // height of AppBar
            child: AppBar(
              backgroundColor: Colors.blue.withOpacity(0.9),
              title: Text("AppBar"),
            ),
          )
        ],
      ),
    ),
  );
}

【讨论】：

【解决方案3】：

更多控件，请使用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 小部件

输出：

【讨论】：