版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
AppBar
Widget build(BuildContext context) {
// TODO: implement build
return DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
leading: IconButton(
icon: Icon(Icons.menu),
onPressed: () {},
tooltip: '提示', //提示
),
title: Text('AppBar'),
elevation: 0.0,
//可以设置一组小部件
actions: <Widget>[
IconButton(
icon: Icon(Icons.search),
onPressed: () {},
),
IconButton(
icon: Icon(Icons.map),
onPressed: () {},
),
],
//用标签形式展示内容 需要TabController
bottom: TabBar(
unselectedLabelColor: Colors.black38, //未被选中时
indicatorColor: Colors.pinkAccent, //指示器颜色
indicatorSize: TabBarIndicatorSize.tab, //指示器大小
tabs: <Widget>[
Tab(
icon: Icon(Icons.local_airport),
),
Tab(
icon: Icon(Icons.local_atm),
),
Tab(
icon: Icon(Icons.local_cafe),
),
],
),
),
//TabBar选中时的页面
body: TabBarView(children: <Widget>[
Text('Page1'),
Text('Page2'),
Text('Page3'),
],),
),
);
}
Drawer（抽屉）
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
UserAccountsDrawerHeader(
accountName: Text('Cyz'),
accountEmail: Text('nothing'),
//头像
currentAccountPicture: CircleAvatar(),
),
// DrawerHeader(
// child: Text('header'.toUpperCase()),
// decoration: BoxDecoration(
// color: Colors.grey,
// ),
// ),
ListTile(
title: Text('ListTile'),
),
],
),
),
Container:
例：
Container(
margin: EdgeInsets.all(20.0),
padding: EdgeInsets.all(20.0),
height: 300.0,
width: 300.0,
color: Colors.green,
child: Container(
color: Colors.yellow,
),
),
Container(
margin: EdgeInsets.all(20.0),
padding: EdgeInsets.all(20.0),
height: 300.0,
width: 300.0,
decoration: BoxDecoration(
border: Border.all(
width: 5.0,
color: Colors.red,
),
),
child: Container(
color: Colors.yellow,
),
),
Expanded：
一个用于撑开flex布局子组件空间的widget
一般用于Row、Column、Flex子组件内
会占满所有可用空间
如果存在多个子项，则根据flex属性来划分可用空间
例：
Column(
children: <Widget>[
Container(
margin: EdgeInsets.all(20.0),
padding: EdgeInsets.all(20.0),
height: 300.0,
width: 300.0,
color: Colors.green,
child: Container(
color: Colors.yellow,
),
),
Expanded(
flex: 1,
child: Container(
color: Colors.blue,
),
),
Expanded(
flex: 2,
child: Container(
color: Colors.pinkAccent,
),
),
Container(
margin: EdgeInsets.all(20.0),
padding: EdgeInsets.all(20.0),
height: 300.0,
width: 300.0,
decoration: BoxDecoration(
border: Border.all(
width: 5.0,
color: Colors.red,
),
),
child: Container(
color: Colors.yellow,
),
),
],
),
Align（对齐组件）：
根据自己需求对组件对齐
Align(
alignment: Alignment.topLeft, //左上角对齐，不设置默认居中对齐
child: Container(
height: 100.0,
width: 100.0,
color: Colors.yellow,),
),
Padding：
可以设置填充的组件
Center：
可以将子widget居中显示在自身内部
SizedBox：
一个特定大小的盒子
LimitedBox：
一个当自身不受约束时，可以限制子组件大小的盒子
FittedBox：
按自己的大小调整其子widget的大小和位置
Container(
color: Colors.blue,
width: 300.0,
height: 300.0,
child: FittedBox(
fit: BoxFit.none, //设置其子组件在其范围内的缩放大小
alignment: Alignment.topLeft,
child: Container(
width: 100.0,
height: 100.0,
color: Colors.yellow,
),
),
),
AspectRatio：
将子widget的大小指定为特定长宽比
Container(
color: Colors.blue,
height: 200.0,
child: AspectRatio(
aspectRatio: 1.5, //宽高比为1.5
child: Container(
color: Colors.yellow,
),
),
),
ConstrainedBox：
添加额外的限制条件到子组件
Column(
children: <Widget>[
ConstrainedBox(
constraints: BoxConstraints(
minHeight: 100.0,
minWidth: 100.0,
maxWidth: 200.0,
maxHeight: 300.0,
),
child: Container(
color: Colors.blue,
width: 300,
height: 50.0,
),
),
Container(
margin: EdgeInsets.only(top: 50.0),
color: Colors.blue,
width: 300.0,
height: 50.0,
)
],
),
Offstage：
可以控制子组件的显示与隐藏
Column(
children: <Widget>[
RaisedButton(
onPressed: () {
setState(() {
_offstage = !_offstage;
});
},
child: Text('显示/隐藏'),
),
Offstage(
offstage: _offstage, //为true隐藏
child: Container(
height: 300.0,
width: 300.0,
color: Colors.blue,
),
),
],
),
OverflowBox：
允许child超出parent的范围显示
Container(
height: 300.0,
width: 300.0,
color: Colors.blue,
child: OverflowBox(
maxHeight: 500.0,
maxWidth: 500.0,
child: Container(
width: 400.0,
height: 500.0,
color: Color.fromRGBO(100, 200, 200, 0.5),
),
),
),
SizedOverflowBox：
可以将自身固定尺寸传递给子组件
子组件也可以超出父节点尺寸的限制
Container(
color: Colors.blue,
alignment: Alignment.centerRight,
width: 200.0,
height: 200.0,
child: SizedOverflowBox(
size: Size(100.0, 200.0),
child: Container(
color: Colors.yellow,
width: 200.0,
height: 100.0,
),
),
),
Transform：
Center(
child: Transform(
transform: Matrix4.rotationZ(0.3),
child: Container(
color: Colors.blue,
width: 200.0,
height: 200.0,
),
),
),
拥有多个子组件的widget
Row：
在水平方向上排列子组件的列表
Column：
在垂直方向上排列子组件的列表
MainAxis:主轴
CorssAxis:副轴
Column({
Key key,
MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
MainAxisSize mainAxisSize = MainAxisSize.max,
CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
TextDirection textDirection,
VerticalDirection verticalDirection = VerticalDirection.down,
TextBaseline textBaseline,
List<Widget> children = const <Widget>[],
})
Stack：
可以允许子组件堆叠在一起
Stack(
children: <Widget>[
Container(
width: 300.0,
height: 300.0,
color: Colors.blue,
),
Icon(
Icons.local_cafe,
color: Colors.yellow,
size: 200.0,
),
Text(
'StackText',
style: TextStyle(fontSize: 50.0),
),
],
),
Wrap：
子组件可以自动换行，默认方向是水平方向
Wrap(
spacing: 5, //主轴上子组件之间的间距
runSpacing: 10, //副轴上子组件之间的间距
children: List.generate(10, (index){
return Container(
width: 100.0,
height: 100.0,
color: Colors.yellow,
);
}),
),
Flow：
与Wrap类似，但可以通过delegate属性设置子组件排列规则，实现更加个性化的需求
参考：https://blog.csdn.net/yuzhiqiang_1993/article/details/88378021#Flow_91
Table：
表格布局
Center(
child: Table(
border: TableBorder.all(
width: 2.0,
style: BorderStyle.solid,
),
//列宽
columnWidths: {
0: FixedColumnWidth(200.0),
1: FixedColumnWidth(100.0),
},
children: [
TableRow(
decoration: BoxDecoration(
color: Colors.grey,
),
children: [
Text(
'Title',
),
Text(
'Author',
),
],
),
TableRow(
decoration: BoxDecoration(
color: Colors.grey,
),
children: [
Text(
'标题',
),
Text(
'作者',
),
],
),
],
),
));
Image（图片）：
Image.asset：加载资源图片
Image.network：网络资源图片
Image.file：加载本地图片
Image.memory：加载Uint8List资源图片
GridView（网格布局）：
GridView.build
GridView.builder(
itemCount: 10,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
//横轴组件个数
crossAxisCount: 3,
//纵轴间距
mainAxisSpacing: 20.0,
//横轴间距
crossAxisSpacing: 10.0,
//子组件宽高比
childAspectRatio: 1.0,
),
itemBuilder: (BuildContext context, int index){
return Container(
width: 200.0,
height: 200.0,
color: Colors.yellow,
);
},
),
GridView.count
GridView.count(
//水平轴间距
crossAxisSpacing: 10.0,
//纵轴间距
mainAxisSpacing: 20.0,
//内边距
padding: EdgeInsets.all(10.0),
//水平轴组件个数
crossAxisCount: 2,
//子组件宽高比
childAspectRatio: 1.5,
//子组件列表
children: <Widget>[
Container(
width: 200.0,
height: 200.0,
color: Colors.yellow,
),
Container(
width: 200.0,
height: 200.0,
color: Colors.yellow,
),
Container(
width: 200.0,
height: 200.0,
color: Colors.yellow,
),
Container(
width: 200.0,
height: 200.0,
color: Colors.yellow,
),
Container(
width: 200.0,
height: 200.0,
color: Colors.yellow,
),
Container(
width: 200.0,
height: 200.0,
color: Colors.yellow,
),
],
),
GridView.custom
GridView.custom(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
//横轴组件个数
crossAxisCount: 3,
//纵轴间距
mainAxisSpacing: 20.0,
//横轴间距
crossAxisSpacing: 10.0,
//子组件宽高比
childAspectRatio: 1.0,
),
childrenDelegate: SliverChildBuilderDelegate(
(context, position) {
return Container(
width: 200.0,
height: 200.0,
color: Colors.yellow,
child: Text('$position'),
);
},
//子组件个数
childCount: 10,
),
),
GridView.extend
GridView.extent(
//水平方向的最大长度
maxCrossAxisExtent: 180.0,
//内边距
padding: EdgeInsets.all(10.0),
//纵轴间隔
mainAxisSpacing: 10.0,
//水平轴间隔
crossAxisSpacing: 20.0,
children: <Widget>[
Container(
width: 200.0,
height: 200.0,
color: Colors.yellow,
),
Container(
width: 200.0,
height: 200.0,
color: Colors.yellow,
),
Container(
width: 200.0,
height: 200.0,
color: Colors.yellow,
),
Container(
width: 200.0,
height: 200.0,
color: Colors.yellow,
),
Container(
width: 200.0,
height: 200.0,
color: Colors.yellow,
),
Container(
width: 200.0,
height: 200.0,
color: Colors.yellow,
),
],
),
