0.前言
Flex布局是Flutter的五虎上将之一,虎父无犬子，其子Row和Column也能力非凡
你有没有被mainAxisAlignment，crossAxisAlignment弄得晕头转向,本文将助你将他们纳入麾下。
先看一下父子三人在Flutter布局体系中的位置:多子组件布局
1.Flex的属性一览
| 属性名 | 类型 | 默认值 | 简介 |
|---|---|---|---|
| direction | Axis | @required | 轴向 |
| mainAxisAlignment | MainAxisAlignment | start | 主轴方向对齐方式 |
| crossAxisAlignment | CrossAxisAlignment | center | 交叉轴方向对齐方式 |
| mainAxisSize | MainAxisSize | max | 主轴尺寸 |
| textDirection | TextDirection | null | 文本方向 |
| verticalDirection | VerticalDirection | down | 竖直方向 |
| textBaseline | TextBaseline | null | 基线类型 |
| children | List | [] | 内部孩子 |
2.轴向:direction:Axis
enum Axis {
horizontal,//水平
vertical,//竖直
}
复制代码也就是水平排放还是竖直排放，可以看出默认情况下都是主轴顶头,交叉轴居中
比如horizontal下主轴为水平轴，交叉轴则为竖直。也就是水平顶头，竖直居中
这里使用MultiShower快速展示,更好的对比出不同之处，MultiShower详见
var direction =[Axis.horizontal,Axis.vertical];
var show = MultiShower(direction,(e){
return Flex(
direction: e,
children: [redBox,blueBox,yellowBox,greenBox],
);
},color: Colors.black12,width: 300,height: 200);
var redBox= Container(
color: Colors.red,
height: 50,
width: 50,
);
var blueBox= Container(
color: Colors.blue,
height: 30,
width: 60,
);
var yellowBox= Container(
color: Colors.yellow,
height: 50,
width: 100,
);
var greenBox= Container(
color: Colors.green,
height: 60,
width: 60,
);
复制代码 3.主轴方向:mainAxisAlignment:MainAxisAlignment
主轴方向的排布规则,这里以水平为例，主轴为水平方向。竖直类比即可
enum MainAxisAlignment {
start,//顶头
end,//接尾
center,//居中
spaceBetween,//顶头接尾，其他均分
spaceAround,//中间的孩子均分,两头的孩子空一半
spaceEvenly,//均匀平分
复制代码testMainAxisAlignment(){
var redBox= Container(
color: Colors.red,
height: 50,
width: 50,
);
var blueBox= Container(
color: Colors.blue,
height: 30,
width: 60,
);
var yellowBox= Container(
color: Colors.yellow,
height: 10,
width: 10,
);
var greenBox= Container(
color: Colors.green,
height: 50,
width: 10,
);
var mainAxisAlignment =[
MainAxisAlignment.start,MainAxisAlignment.center,
MainAxisAlignment.end,MainAxisAlignment.spaceAround,
MainAxisAlignment.spaceBetween,MainAxisAlignment.spaceEvenly];
var show = MultiShower(mainAxisAlignment,(e){
return Flex(
direction: Axis.horizontal,
mainAxisAlignment: e,
children: [redBox,blueBox,yellowBox,greenBox],
);
},color: Colors.black12,width: 200,height: 150);
return show;
}
复制代码 4.交叉轴方向:crossAxisAlignment:CrossAxisAlignment
enum CrossAxisAlignment {
start,//顶头
end,//接尾
center,//居中
stretch,//伸展
baseline,//基线
}
复制代码还是水平为例，交叉轴便是竖轴，这里可以看出他们的布局行为
其中需要注意的是CrossAxisAlignment.baseline使用时必须有textBaseline
其中textBaseline确定对齐的是那种基线,分为alphabetic和ideographic
testCrossAxisAlignment(){
var redBox= Container(
color: Colors.red,
height: 50,
width: 50,
);
var blueBox= Container(
color: Colors.blue,
height: 30,
width: 60,
);
var yellowBox= Container(
color: Colors.yellow,
height: 10,
width: 10,
);
var greenBox= Container(
color: Colors.green,
height: 50,
width: 10,
);
var crossAxisAlignment =[CrossAxisAlignment.start,CrossAxisAlignment.center,
CrossAxisAlignment.end,CrossAxisAlignment.stretch,CrossAxisAlignment.baseline];
var show = MultiShower(crossAxisAlignment,(e){
return Flex(
direction: Axis.horizontal,
crossAxisAlignment: e,
textBaseline: TextBaseline.alphabetic,//基线类型
children: [redBox,blueBox,yellowBox,greenBox],
);
},color: Colors.black12,width: 200,height: 140);
return show;
}
复制代码 5.主轴尺寸:mainAxisSize
enum MainAxisSize {
min,
max,
}
复制代码当父容器的宽未约束,Flex默认会将自身尽可能延伸，这便是MainAxisSize.max
此时改为MainAxisSize.min时,它不会延伸自己的区域，自会包裹内容
testMainAxisSize(){
var redBox= Container(
color: Colors.red,
height: 50,
width: 50,
);
var blueBox= Container(
color: Colors.blue,
height: 30,
width: 60,
);
var yellowBox= Container(
color: Colors.yellow,
height: 10,
width: 10,
);
var greenBox= Container(
color: Colors.green,
height: 50,
width: 10,
);
return Center(child: Flex(
direction: Axis.horizontal,
mainAxisSize: MainAxisSize.max,
children: [redBox,blueBox,yellowBox,greenBox],
),);
}
复制代码 6.文字方向:textDirection:TextDirection
enum TextDirection {
ltr,//从左到右
rtl,//从右到左
}
复制代码这个非常好理解，不多言了
testTextDirection(){
var redBox= Container(
color: Colors.red,
height: 50,
width: 50,
);
var blueBox= Container(
color: Colors.blue,
height: 30,
width: 60,
);
var yellowBox= Container(
color: Colors.yellow,
height: 10,
width: 10,
);
var greenBox= Container(
color: Colors.green,
height: 50,
width: 10,
);
var textDirection =[TextDirection.ltr,TextDirection.rtl];
var show = MultiShower(textDirection,(e){
return Flex(
direction: Axis.horizontal,
textDirection: e,
children: [redBox,blueBox,yellowBox,greenBox],
);
},color: Colors.black12,width: 200,height: 140);
return show;
}
复制代码 7.竖直方向排序:verticalDirection:VerticalDirection
enum VerticalDirection{
up,
down,
}
复制代码testVerticalDirection(){
var redBox= Container(
color: Colors.red,
height: 50,
width: 50,
);
var blueBox= Container(
color: Colors.blue,
height: 30,
width: 60,
);
var yellowBox= Container(
color: Colors.yellow,
height: 10,
width: 10,
);
var greenBox= Container(
color: Colors.green,
height: 50,
width: 10,
);
var verticalDirection =[VerticalDirection.up,VerticalDirection.down];
var show = MultiShower(verticalDirection,(e){
return Flex(
direction: Axis.vertical,
verticalDirection: e
children: [redBox,blueBox,yellowBox,greenBox],
);
},color: Colors.black12,width: 200,height: 140);
return show;
}
复制代码 8.基线对齐方式:textBaseline:TextBaseline
enum TextBaseline {
alphabetic,
ideographic,
}
复制代码testTextBaseline(){
var redBox= Text(
"张风捷特烈",style: TextStyle(fontSize: 20,backgroundColor: Colors.red),
);
var blueBox= Text(
"toly",style: TextStyle(fontSize: 50,backgroundColor: Colors.blue),
);
var yellowBox= Text(
"1994",style: TextStyle(fontSize: 30,backgroundColor: Colors.green),
);
var textBaseline =[TextBaseline.alphabetic,TextBaseline.ideographic];
var show = MultiShower(textBaseline,(e){
return Flex(
direction: Axis.horizontal,
crossAxisAlignment: CrossAxisAlignment.baseline,
textBaseline: e,
children: [redBox,blueBox,yellowBox],
);
},color: Colors.black12,width: 300,height: 140);
return show;
}
复制代码 至此，Flutter中的Flex布局就已经完全解读完了。
其中Flutter的孩子Row是direction: Axis.horizontal,Column是direction: Axis.vertical,
其他的属性都是类似的，相当于Flex的简化版，所以Flex在手，天下我有。
Expanded与Flex的搭配--- [更新于2019.1.22]
还要一点是关于Expanded，也比较保用，它能与Flex布局结合，变更孩子尺寸
c1:绿色 c2:红色 c3:黄色
1).Expanded--c2：c1和c3将不变，c2延伸自己占满剩余部分
2).同时Expanded--c2和c3，最终c2和c3的长度是一样的
3).同时Expanded--c1，c2和c3，最终c1,c2，c3长度都是一样的
复制代码9.用Flex布局写个小例子
光说不练假把式,光练不说空把式,下面就用一个布局来实际看一下Flex的强大
- 首先简单的分析一下
1.由上中下三行，可以用Column
2.第一行由图标，文字和文字组成，其中两头分处左右，可以用Expanded处理
3.中间比较复杂由一个Row中包含两部分，左边是一个两行Column的内容,右边是文字
4.底部是一个Row,主轴对齐是start
复制代码- 布局代码
showItem() {
var infoStyle = TextStyle(color: Color(0xff999999), fontSize: 13);
var littleStyle = TextStyle(color: Colors.black, fontSize: 16);
var top = Row(//顶部,通过Flex布局的Row进行横向排列,Expanded中间
children: [
Image.asset("images/icon_head.png", width: 20, height: 20),
Expanded(
child: Padding(
child: Text("张风捷特烈"),
padding: EdgeInsets.only(left: 4),
),
),
Text(
"Flutter/Dart",
style: infoStyle,
)
],
);
var content = Column(//中间文字内容,交叉轴为start
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"[Flutter必备]-Flex布局完全解读",
style: littleStyle,
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
Padding(
child: Text("也就是水平排放还是竖直排放，可以看出默认情况下都是主轴顶头,"
"交叉轴居中比如horizontal下主轴为水平轴，交叉轴则为竖直。也就是水平顶头，竖直居中"
"这里使用MultiShower快速展示,更好的对比出不同之处",
style: infoStyle, maxLines: 2, overflow: TextOverflow.ellipsis),
padding: EdgeInsets.only(top: 5),
),
],
);
var center = Row(//中间的部分
children: [
Expanded(
child: Padding(
child: content,
padding: EdgeInsets.all(5),
)),
ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(5)),
child: Image.asset("images/wy_300x200.jpg",
width: 80, height: 80, fit: BoxFit.cover),)
],
);
var end = Row(//底部
children: [
Icon(
Icons.grade,
color: Colors.green,
size: 20,
),
Text(
"1000W",
style: infoStyle,
),
Padding(child:Icon(Icons.tag_faces, color: Colors.lightBlueAccent, size: 20),
padding: EdgeInsets.symmetric(horizontal: 5),),
Text("2000W", style: infoStyle),
],
);
var result = Card(//总体拼合
child: Container(
height: 160,
color: Colors.white,
padding: EdgeInsets.all(10),
child: Column(children: [top, Expanded(child: center), end])));
return result;
}
复制代码 结语
本文到此接近尾声了，如果想快速尝鲜Flutter，《Flutter七日》会是你的必备佳品;如果想细细探究它,那就跟随我的脚步，完成一次Flutter之旅。
另外本人有一个Flutter微信交流群，欢迎小伙伴加入，共同探讨Flutter的问题，本人微信号:zdl1994328，期待与你的交流与切磋。