Flutter 中 Flexible、Expanded、Spacer 的使用技巧详解 _ Flutter Widgets(1)

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,