【问题标题】: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 小部件

      输出:

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2019-05-08
        • 2021-02-23
        • 1970-01-01
        • 2018-12-07
        • 1970-01-01
        • 2020-05-29
        • 2020-08-08
        相关资源
        最近更新 更多