研究flutter-PreferredSize用法

写flutter的AppBar 写好一个标题。下面这里也想弄个bottom黑色的一片。查到PreferredSize 组件#PreferredSize此控件不对其子控件施加任何约束，并且不以任何方式影响孩子的布局。此控件对自定义AppBar.bottom和AppBar非常有用。自定义AppBar，也可以直接设置AppBar的高度（PreferredSize子控件为AppBar）贴上学习代码app

娶老婆

7411人浏览 · 2021-02-03 21:48:20

娶老婆 · 2021-02-03 21:48:20 发布

写flutter的AppBar 写好一个标题。
下面这里也想弄个bottom黑色的一片。查到PreferredSize 组件
在这里插入图片描述
#PreferredSize
此控件不对其子控件施加任何约束，并且不以任何方式影响孩子的布局。

此控件对自定义AppBar.bottom和AppBar非常有用。

自定义AppBar，也可以直接设置AppBar的高度（PreferredSize子控件为AppBar）
在这里插入图片描述
贴上学习代码

      appBar: AppBar(
        leading: IconButton(icon: Icon(Icons.anchor_sharp), onPressed: () {}),
        centerTitle:true,
        backgroundColor:Colors.black,
        title:Text('生存日记'),
        bottom: PreferredSize(
          child: Container(
            color: Colors.white,
            child: Text('非常好'),
          ),
        ),
      ),

最终结果
在这里插入图片描述
贴上代码

class HomeHeade extends StatelessWidget implements PreferredSizeWidget {

  @override
  Size get preferredSize => const Size.fromHeight(200);
  Widget build(BuildContext context) {
    return AppBar(
      centerTitle:true,
      title:Text('生存日记',style: TextStyle(color: Color(0xFF02020D))),
      flexibleSpace: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(colors: [
            Color(0xFFFAD956),
            Colors.white,
          ], begin: Alignment.topCenter, end: Alignment.bottomCenter),
        ),
      ),
      bottom: PreferredSize(
        preferredSize: Size.fromHeight(140),
        child: Container(
          child: MyCollect(),
        ),
      ),
    );
  }
}

class MyCollect extends StatefulWidget {
  @override
  _MyCollectState createState() => _MyCollectState();
}

class _MyCollectState extends State<MyCollect> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            crossAxisAlignment: CrossAxisAlignment.end,
            children: <Widget>[
              Container(

                child: Column(
                  children: <Widget>[
                    Container(
                      child: Text('2021年',style: TextStyle(color: Color(0xFF808080),fontSize: 12),),
                    ),
                    Padding(
                      padding: const EdgeInsets.fromLTRB(0,8,0,0),
                      child: Container(
                        child: Text('02月',style: TextStyle(color: Colors.black,fontSize: 16),),
                      ),
                    )
                  ],
                ),
              ),
              Container(

                child: Column(
                  children: <Widget>[
                    Container(
                      child: Text('负债金额',style: TextStyle(color: Color(0xFF808080),fontSize: 12),),
                    ),
                    Padding(
                      padding: const EdgeInsets.fromLTRB(0,8,0,0),
                      child: Container(
                        child: Text('78000元',style: TextStyle(color: Colors.black,fontSize: 16),),
                      ),
                    )
                  ],
                ),
              ),
              Container(

                child: Column(
                  children: <Widget>[
                    Container(
                      child: Text('本月还款',style: TextStyle(color: Color(0xFF808080),fontSize: 12),),
                    ),
                    Padding(
                      padding: const EdgeInsets.fromLTRB(0,8,0,0),
                      child: Center(
                        child: Container(
                          child: Text('7000元',style: TextStyle(color: Colors.black,fontSize: 16),),
                        ),
                      ),
                    )
                  ],
                ),
              ),
            ],
          ),
          Item_Type()
        ],
      ),
    );
  }
}


class Item_Type extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return     Container(
      margin: EdgeInsets.all(5),
      padding: EdgeInsets.all(5),
      child: DecoratedBox(
          decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.all(Radius.circular(10)),
              boxShadow: [
                //阴影
                BoxShadow(offset: Offset(2.0, 2.0), blurRadius: 10)
              ]),
          child: Padding(
            padding: EdgeInsets.all(10),
            child: Flex(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              direction: Axis.horizontal,
              children: <Widget>[
                Expanded(
                    flex: 1,
                    child: Column(
                      children: <Widget>[
                        Icon(IconData(0xe63e,fontFamily: 'iconfont')),
                        Text('负债记录',style: TextStyle(color: Colors.black,fontSize: 12))
                      ],
                    )),
                Expanded(
                  flex: 1,
                  child: Column(
                    children: <Widget>[
                      Icon(IconData(0xe688,fontFamily: 'iconfont')),
                      Text('生存日记',style: TextStyle(color: Colors.black,fontSize: 12))
                    ],
                  ),
                ),
                Expanded(
                  flex: 1,
                  child: Column(
                    children: <Widget>[
                      Icon(IconData(0xe6a0,fontFamily: 'iconfont')),
                      Text('脚踏实地',style: TextStyle(color: Colors.black,fontSize: 12))
                    ],
                  ),
                ),
                Expanded(
                  flex: 1,
                  child: Column(
                    children: <Widget>[
                      Icon(IconData(0xe6e8,fontFamily: 'iconfont')),
                      Text('不软动脑',style: TextStyle(color: Colors.black,fontSize: 12))
                    ],
                  ),
                ),
                Expanded(
                  flex: 1,
                  child: Column(
                    children: <Widget>[
                      Icon(IconData(0xe62f,fontFamily: 'iconfont')),
                      Text('点打点赢',style: TextStyle(color: Colors.black,fontSize: 12))
                    ],
                  ),
                ),
              ],
            ),
          )),
    );
  }

}```