21.流式布局
Wrap(
spacing: 8.0, // 主轴(水平)方向间距
runSpacing: 4.0, // 纵轴(垂直)方向间距
alignment: WrapAlignment.center, //沿主轴方向居中
children: <Widget>[
new Chip(
//avatar: new CircleAvatar(backgroundColor: Colors.blue, child: Text('A')),
label: new Text('Hamilton'),
),
new Chip(
avatar: new CircleAvatar(backgroundColor: Colors.blue, child: Text('M')),
//超出范围会折叠
label: new Text('Lafayette'*100),
),
new Chip(
avatar: new CircleAvatar(backgroundColor: Colors.blue, child: Text('H')),
label: new Text('Mulligan'),
),
new Chip(
avatar: new CircleAvatar(backgroundColor: Colors.blue, child: Text('J')),
label: new Text('Laurens'),
),
],
)
效果:
22.层叠布局的定位
Stack(
alignment:Alignment.center , //指定未定位或部分定位widget的对齐方式
children: <Widget>[
//水平方向和垂直方向都没有定位,所以用Alignment.center的水平和垂直居中
Container(child: Text("Hello world",style: TextStyle(color: Colors.white)),
color: Colors.red,
),
//定位了水平方向,垂直方向未定位,所以用Alignment.cente的垂直居中
Positioned(
left: 18.0,
child: Text("I am Jack"),
),
//定位了垂直方向,水平方向未定位,所以用Alignment.cente的水平居中
Positioned(
top: 18.0,
child: Text("Your friend"),
)
],
),
效果:
23.层叠布局的堆叠效果
Stack(
alignment:Alignment.center ,
fit: StackFit.expand, //未定位widget占满Stack整个空间
children: <Widget>[
//已定位,只要定位了一个方向就是已定位
Positioned(
left: 18.0,
child: Text("I am Jack"),
),
//未定位,所以fit属性会对它起作用,就会占满Stack,第一个文本看不到了
Container(child: Text("Hello world",style: TextStyle(color: Colors.white)),
color: Colors.red,
),
//Stack子元素是堆叠的,第三个文本已定位,会堆叠在第二个文本上
Positioned(
top: 18.0,
child: Text("Your friend"),
)
],
),
效果:
24.上下左右对齐
Container(
height: 120.0,
width: 120.0,
color: Colors.blue[50],
child: Align(
//将FlutterLogo定位在Container的右上角
alignment: Alignment.topRight,
child: FlutterLogo(
size: 60,
),
),
)
效果:
25.通过坐标定位
Container(
color: Colors.blue[50],
child: Align(
//宽度因子为2,总宽度为2*60
widthFactor: 2,
//高度因子为3,总高度为3*60
heightFactor: 3,
//(0,0)就是矩形的中心点,居于这个点,一个单位就移动一格
alignment: Alignment(0,1.0),
child: FlutterLogo(
size: 60,
),
)
)
效果:
26.通过坐标定位
Container(
color: Colors.blue[50],
child: Align(
//宽度因子为2,总宽度为2*60
widthFactor: 2,
//高度因子为3,总高度为3*60
heightFactor: 3,
//(0,0)就是矩形的左上角的顶点,居于这个点,一个单位就移动一格
alignment: FractionalOffset(0,0),
child: FlutterLogo(
size: 60,
),
)
)
效果:
27.边框外的空白填充
class PaddingTestRoute extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Padding(
//上下左右各添加16像素补白
padding: EdgeInsets.all(16.0),
child: Column(
//显式指定对齐方式为左对齐,排除对齐干扰
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
//左边添加8像素补白
padding: const EdgeInsets.only(left: 8.0),
child: Text("Hello world"),
),
Padding(
//上下各添加8像素补白
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: Text("I am Jack"),
),
Padding(
// 分别指定四个方向的补白
padding: const EdgeInsets.fromLTRB(20.0,.0,20.0,20.0),
child: Text("Your friend"),
)
],
),
);
}
}
效果:
28.平移
//装饰容器
DecoratedBox(
decoration:BoxDecoration(color: Colors.red),
//默认原点为左上角,Text文本左移20像素,向上平移5像素
child: Transform.translate(
offset: Offset(-20.0, -5.0),
child: Text("Hello world"),
),
)
效果: