Flutter如何更改自定义AppBar的高度

Question

我尝试了这个链接，但效果不理想。

在这段代码中，当我尝试改变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:中使用。

- DolDurma

Answer 1

只需使用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"),
            ),
          )
        ],
      ),
    ),
  );
}

- CopsOnRoad

Answer 2

   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,
                ),
            ),
            ],
        )),
        );
    }
    }

- Amit Prajapati

---

我的 appBar 不在 Scaffold 小部件中。 - DolDurma

你能仔细再读一遍我的帖子吗？我的 appbar 不在 Scaffold widget 里面。 - DolDurma

为什么要将AppBar添加到Scaffold的body中？这会导致什么问题吗？ - Amit Prajapati

因为我想在其他小部件中使用“AppBar”。 - DolDurma

Answer 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 小部件。

- Kab Agouda