文章已同步至掘金:https://juejin.cn/post/6844903956469153799
欢迎访问😃,有任何问题都可留言评论哦~
Flutter中的Flex
和Expanded
也是比较重要的,他们两个可以搭配起来使用
Flex 被称为弹性布局,这个在H5中也存在这个概念,H5中也有Flex布局。
所谓的弹性布局,就是允许子组件按照一定的比例来分配父容器的控件,他会自适应屏幕的宽度和高度,不是一个固定的数值。
Flex
Flex 组件可以沿着水平或垂直方向排列子组件。
如果知道主轴方向的话,可以使用Row
或Column
会方便一些,
因为Row
和Column
都继承自Flex
,参数基本相同,所以能使用Flex的地方基本上都可以使用Row
或Column
。
Flex最重要的一点,就是可以和Expanded
组件配合使用,来实现弹性布局
源码示例
构造函数如下:
注:其中带@required
,意思是必须要使用这个属性
Flex({
Key key,
@required this.direction,
this.mainAxisAlignment = MainAxisAlignment.start,
this.mainAxisSize = MainAxisSize.max,
this.crossAxisAlignment = CrossAxisAlignment.center,
this.textDirection,
this.verticalDirection = VerticalDirection.down,
this.textBaseline,
List<Widget> children = const <Widget>[],
})
属性解释
其中Flex
几乎所有属性都和Row
与Column
一样,
所以有关属性怎么使用,可以参考我的文章:Flutter 布局控件篇–>Row、Column
这里只说下direction
direction
决定弹性布局的方向
Row默认为水平方向,Column默认为垂直方向,其本质和Row
和Column
组件一样
如下:
direction: Axis.horizontal
意思主轴是水平方向
direction: Axis.vertical
意思主轴是垂直方向
Expanded
Expanded用法就比较简单了
他可以按比例伸缩或扩展 Row
、Column
和Flex
子组件所占用的空间大小。
源码示例
构造函数如下:
const Expanded({
Key key,
int flex = 1,
@required Widget child,
})
属性解释
key
就是一个唯一标识符
flex
弹性系数
如果为 0 或 null,则 child 是没有弹性的,即不会被扩伸占用的空间。
如果大于 0,所有的Expanded
按照其flex
的比例来分割主轴的全部空闲空间。
代码示例:
class FlexLayoutTestRoute extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
//Flex的两个子widget按1:2来占据水平空间
Flex(
direction: Axis.horizontal,
children: <Widget>[
Expanded(
flex: 1,
child: Container(
height: 30.0,
color: Colors.red,
),
),
Expanded(
flex: 2,
child: Container(
height: 30.0,
color: Colors.green,
),
),
],
),
Padding(
padding: const EdgeInsets.only(top: 20.0),
child: SizedBox(
height: 100.0,
//Flex的三个子widget,在垂直方向按2:1:1来占用100像素的空间
child: Flex(
direction: Axis.vertical,
children: <Widget>[
Expanded(
flex: 2,
child: Container(
height: 30.0,
color: Colors.red,
),
),
Spacer(
flex: 1,
),
Expanded(
flex: 1,
child: Container(
height: 30.0,
color: Colors.green,
),
),
],
),
),
),
],
);
}
}
运行效果:
示例中的Spacer
的功能是占用指定比例的空间,实际上它只是Expanded
的一个包装类
其中Expanded
也是可以和Row
和Column
结合来使用的
评论区