Expanded 组件可以让 Row、Column、Flex等子组件在其主轴方向上展开并填充可用空间。类似 Android 中的 widget 属性的用法
Row 的用法
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: null,
automaticallyImplyLeading: false,
title: Text(widget.title),
),
body: new Row(
children: <Widget>[
new Expanded(
flex: 2,
child: new Container(
child: new Text(
'Text1',
textAlign: TextAlign.center
),
height: 100,
alignment: AlignmentDirectional.center,
color: Colors.grey,
),
),
new Expanded(
flex: 1,
child: new Container(
child: new Text(
'Text2',
textAlign: TextAlign.center
),
height: 100,
alignment: AlignmentDirectional.center,
color: Colors.blue,
),
),
new Expanded(
flex: 1,
child: new Container(
child: new Text(
'Text3',
textAlign: TextAlign.center
),
height: 100,
alignment: AlignmentDirectional.center,
color: Colors.cyan,
),
),
],
));
}
}
效果图：
image.png
Column 的用法
上面 Row 控件换成 Column 控件，
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: null,
automaticallyImplyLeading: false,
title: Text(widget.title),
),
body: new Column(
children: <Widget>[
new Expanded(
flex: 2,
child: new Container(
child: new Text(
'Text1',
textAlign: TextAlign.center
),
height: 100,
alignment: AlignmentDirectional.center,
color: Colors.grey,
),
),
new Expanded(
flex: 1,
child: new Container(
child: new Text(
'Text2',
textAlign: TextAlign.center
),
height: 100,
alignment: AlignmentDirectional.center,
color: Colors.blue,
),
),
new Expanded(
flex: 1,
child: new Container(
child: new Text(
'Text3',
textAlign: TextAlign.center
),
height: 100,
alignment: AlignmentDirectional.center,
color: Colors.cyan,
),
),
],
));
}
}
image.png
Flex 的用法
再 把 Column 换成 Flex
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: null,
automaticallyImplyLeading: false,
title: Text(widget.title),
),
body: new Flex(
direction: Axis.horizontal,//还有Axis.vertical
children: <Widget>[
new Expanded(
flex: 2,
child: new Container(
child: new Text(
'Text1',
textAlign: TextAlign.center
),
height: 100,
alignment: AlignmentDirectional.center,
color: Colors.grey,
),
),
new Expanded(
flex: 1,
child: new Container(
child: new Text(
'Text2',
textAlign: TextAlign.center
),
height: 100,
alignment: AlignmentDirectional.center,
color: Colors.blue,
),
),
new Expanded(
flex: 1,
child: new Container(
child: new Text(
'Text3',
textAlign: TextAlign.center
),
height: 100,
alignment: AlignmentDirectional.center,
color: Colors.cyan,
),
),
],
));
}
}
direction 为 Axis.horizontal 的时候，效果如图1， direction 为 Axis.vertical 的时候效果如图 2
Flex 其他属性
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: null,
automaticallyImplyLeading: false,
title: Text(widget.title),
),
body: new Flex(
direction: Axis.vertical,//还有Axis.vertical
mainAxisAlignment:MainAxisAlignment.start,
mainAxisSize:MainAxisSize.max,
crossAxisAlignment:CrossAxisAlignment.start,
//textBaseline: TextBaseline.ideographic,
verticalDirection:VerticalDirection.up,
children: <Widget>[
new Container(
child: new Text(
'Text1',
textAlign: TextAlign.center
),
width: 100,
height: 50,
alignment: AlignmentDirectional.center,
color: Colors.grey,
),
new Container(
child: new Text(
'Text2',
textAlign: TextAlign.center
),
width: 100,
height: 50,
alignment: AlignmentDirectional.center,
color: Colors.blue,
),
new Container(
child: new Text(
'Text3',
textAlign: TextAlign.center
),
width: 100,
height: 50,
alignment: AlignmentDirectional.center,
color: Colors.cyan,
),
],
));
}
}
mainAxisAlignment
相对主轴的对其方式。再 Expand 控件下面无效
- MainAxisAlignment.start , 对齐主轴开始位置
image.png
- MainAxisAlignment.end, 对齐主轴结束位置
image.png
- MainAxisAlignment.center ,对齐主轴居中位置
image.png
- MainAxisAlignment.spaceBetween , 剩余部分给控件与控件之间间距且间距相等
image.png
- MainAxisAlignment.spaceAround，剩余部分给控件与控件之间间距且间距相等，再多余的对半给最左边和最右边
image.png
- MainAxisAlignment.spaceEvenly 。剩余部分给控件与控件之间间距和最左边和最右边且间距都相等
image.png
- mainAxisSize
- MainAxisSize.min 主轴占最小空间
- MainAxisSize.max 主轴尽量撑开
crossAxisAlignment
相对副轴的对齐方式
如上代码外面包一层更高的布局，就可以看出效果
new Container(
height: 600,
child:......,
);
- CrossAxisAlignment.start 对齐副轴开始部分
image.png
- CrossAxisAlignment.end 对齐副轴结束部分
image.png
- CrossAxisAlignment.center 对齐副轴居中部分
image.png
CrossAxisAlignment.baseline , 和 字体对齐,结合 textBaseLine 使用，textBaseLine 必须设置。
CrossAxisAlignment , 相对副轴 进行拉伸
image.png
textBaseline
字体的对齐方式
- TextBaseline.alphabetic 效果
image.png
- TextBaseline.ideographic 表意字对齐方式，看不出神马效果
verticalDirection
决定垂直方向开头的方向
- VerticalDirection.up 从下往上
- VerticalDirection.down 从上往下
