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’),
);
}
}
看效果
What？ 按照常识来讲这不符合预期啊，刚才上面看到 fit 参数默认是 FlexFit.loose 并且这里 getItem 子项的宽高设置成了 60 ，以是会出现上面的征象。
做些修改
这里我们将 getItem 改为 getItem(1, null, 60) 设置为不限制宽度，看看效果
Flexible(
flex: 1,
fit: FlexFit.loose,
child: getItem(1, null, 60),
)
这下就符合我们的预期了，我们再来做一些调解， getItem 不变，仅把 fit 参数改为 FlexFit.tight 看看效果
Flexible(
flex: 1,
fit: FlexFit.tight,
child: getItem(1),
)
这里也符合我们的预期，这是为什么呢？
由于 FlexFit.loose 允许子项与最大的可用空间(1/6)一样大，但是可以更小，我们开始设置了子项宽度是 60 ，以是就是 60 了，不设置子项宽度就是按照允许的最大空间来了。 由于 FlexFit.tight 被迫会将子类填充可用空间(1/6)，以是设置后纵然我们设置了子项宽度也没有作用
小结一下
- flex 可用空间比例
- fit 子项可用空间填充方式
- FlexFit.loose 允许子项 <= 可用空间
- FlexFit.tight 子项 == 可用空间
Expanded（展开的）
这个 Widget 也是非常常用的，有了前面的理解，如今我们看看他的实现，就秒懂什么意思了，一起来
看到他继续自 Flexible 你就差不多懂了吧，然后我们再看看他 fit 设置的 FlexFit.tight （子项 == 可用空间），如今来看看下面的代码，你说效果是什么？
Row(
children: [
Expanded(
flex: 1,
child: getItem(1),
),
Expanded(
flex: 2,
child: getItem(2),
),
Expanded(
flex: 3,
child: getItem(3),
),
],
)
对了，正如你所料，他和上面我们 Flexible 展示的最后一个示例效果是一样的。
应用场景
先看看下面简朴的异常效果
实现代码如下
Row(
children: [
getItem(1),
Text(
‘ZeroFlutter 聊 Expanded，ZeroFlutter 聊 ExpandedZeroFlutter 聊 ExpandedZeroFlutter 聊 ExpandedZeroFlutter 聊 ExpandedZeroFlutter 聊 Expanded’)
],
)
一样平常我们都要考虑适配性，你想要的大概是这样的
实现代码如下，我们使用 Expanded 包裹 Text ，然后设置了最多 2 行，超过 … 显示
Row(
children: [
getItem(1),
// 使用 Expanded 包裹 Text
Expanded(
child: Text(
‘ZeroFlutter 聊 Expanded，ZeroFlutter 聊 ExpandedZeroFlutter 聊 ExpandedZeroFlutter 聊 ExpandedZeroFlutter 聊 ExpandedZeroFlutter 聊 Expanded’,
overflow: TextOverflow.ellipsis,
maxLines: 2,
),
)
],
)
Spacer（弹片）
这个 Widget 大概你是第一次听说，但是今后以后你大概就会常常用到他了，非常好用，比如说我们要做到如下效果，你会怎么做？
// 你是这样想的吗？
Row(
children: [
getItem(1),
Expanded(child: SizedBox()),
getItem(2),
Expanded(
child: SizedBox(),
flex: 2,
),
getItem(3)
],
)
根据前面学的，你是上面 |
