Flexible(弹性组件)
这里的 Flexible
和上篇聊的 Flex
看着有点像,实际上这两个的实现完全不一样,作用的组件也不一样,前者作用于整体子项的布局,后者作用于单个子项的布局。Flexible
的源码可以看看上篇,这里我们先看看 Flex
的源码也是很简单的。
flex
填充比例fit
可用空间填充方式child
嵌套的子 Widget
Flex 填充比例
// 横向布局(可以看上一篇)
Row(
children: [
Flexible(
// 第一个占用 1/6
flex: 1,
child: getItem(1),
),
Flexible(
// 第 2 个占用 2/6
flex: 2,
child: getItem(2),
),
Flexible(
// 第 3 个占用 3/6
flex: 3,
child: getItem(3),
),
],
)
getItem
/// 获取子项目(这里使用了位置参数)
Widget getItem(int index, [double width = 60, double height = 60]) {
return Container(
// 宽高设置 60
width: width,
height: height,
// 设置背景色
color: Colors.orange.shade200,
// 设置间隙
margin: EdgeInsets.all(2),
// 设置子项居中
alignment: Alignment.center,
// 设置子项
child: Text(‘$index’),
);
}
}