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