常用的布局组件包括AppBar、Center、Container、SizeBox、线性布局(Column、Row)、Flex(弹性布局)、Stack(层叠布局)等。
一、AppBar
相当于android中的标题栏
(1)源码属性:
(2)使用:
class AppBarWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text("AppBarWidget"),//标题
centerTitle: true,//标题居中显示
actions: <Widget>[//右边显示的内容,比如设置、更多等
Image.asset(
"assets/images/ic_launcher.png",
width: 30,
height: 30,
),
Container(
color: Colors.green,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'设置',
textAlign: TextAlign.center,
),
],
),
margin: EdgeInsets.only(left: 10, right: 10),
),
Container(
color: Colors.brown,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'更多',
textAlign: TextAlign.center,
),
],
),
),
],
leading: Container( //左边显示的内容,比如一张图片
color: Colors.red,
child: Image.asset("assets/images/ic_launcher.png"),
padding: EdgeInsets.all(10),
),
backgroundColor: Colors.yellow,//背景颜色
),
);
}
}
(3)效果:
二、Center
(1)源码属性:
继承了Align。Align的源码如下:
默认是居中的。
- widthFactor :宽度因子
- heightFactor:高度因子
这两个参数控制上下左右子控件之间的间距。
(2)使用
class CenterWidget extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text('CenterWidget'),
),
body: Row(
children: <Widget>[
Center(
widthFactor: 2,//宽度因子
heightFactor: 2,//高度因子
child: Container(
color: Colors.red,
height: 150,
width: 150,
child: Center(
child:Text('CenterWidget'),
),
alignment: Alignment.center,
),
),
Container(
color: Colors.yellow,
width: 50,
height: 50,
)
],
)
);
}
}
(3)效果:
代码中并没有设置margin或者padding。因为widthFactor和heightFactor出现了间距。
三、Container
(1)源码属性:
注意:color与decoration不能同时存在。
(2)使用:
class ContainerWidget extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text('ContainerWidget'),
),
body: Container(
width: 100, //宽度
height: 100,//高度
alignment: Alignment.center,
padding: EdgeInsets.all(10),//内边距
margin: EdgeInsets.all(10),//外边距
transform: Matrix4.rotationZ(0.1),//z轴旋转角度
decoration: BoxDecoration(//加一个圆角边框
color: Colors.black,
border: Border.all(width: 1,color: Colors.black),
borderRadius: BorderRadius.all(Radius.circular(10))
),
child: Container(//内部控件
color: Colors.green,
),
),
);
}
}
(3)效果:
四、SizeBox
单一子控件布局容器
(1)源码属性:
(2)使用:
class SizeBoxWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text('SizeBoxWidget'),
),
body: SizedBox(
width: 50,
height: 50,
child: Container(
color: Colors.red,
),
),
);
}
}
使用相当简单。
(3)效果:
五、线性布局–Column与Row
(1)源码属性:
(2)使用:
class ColumnWidget extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text('ColumnWidget'),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.start,//主轴,对于column就是纵向顶部开始
crossAxisAlignment: CrossAxisAlignment.center,//垂直轴,这里是横向居中
mainAxisSize: MainAxisSize.max,//纵向占满整个屏幕空间。也可以使用 MainAxisSize.min控件有多大,占用多大
children: <Widget>[//子控件,纵向排列
Row(
mainAxisAlignment: MainAxisAlignment.center,//主轴,横向居中
children: <Widget>[ //子控件,横向排列
Container(
width: 100,
height: 100,
color: Colors.red,
),
Container(
width: 100,
height: 100,
color: Colors.yellow,
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
width: 50,
height: 50,
color: Colors.green,
),
],
),
],
),
);
}
}
(3)效果:
六、弹性布局–Flex
相当于Android中的LinearLayout。需要配合 Expanded 使用。
(1)源码属性:
必传参数为 direction。
(2)使用:
class FlexWidget extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text('FlexWidget'),
),
body: Flex(
direction: Axis.horizontal,
children: <Widget>[
Expanded(
flex: 1, //相当于android中权重weight
child:Container(
height: 100,
color: Colors.red,
) ,
),
Expanded(
flex: 2,
child:Container(
height: 100,
color: Colors.green,
) ,
),
Expanded(
flex: 1,
child:Container(
height: 100,
color: Colors.blue,
) ,
)
],
),
);
}
}
三种颜色块的宽度比例为1:2:1。使用 flex 属性设置比例。
(3)效果:
七、层叠布局–Stack
相当于Android中的FrameLayout。可配合 Positioned 组件进行子控件位置调整。
(1)源码属性:
(2)使用:
class StackWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text('StackWidget'),
),
body: Stack(
alignment: AlignmentDirectional.bottomEnd,//所有的Widget 以Stack的右下角开始对齐
//fit: StackFit.expand,//使子view的大小和父组件的一样大
children: <Widget>[
Container(
height: 60,
width: 60,
color: Colors.red,
),
Container(
height: 40,
width: 40,
color: Colors.green,
),
Container(
height: 20,
width: 20,
color: Colors.blue,
),
],
),
);
}
}
(3)效果: