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, [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 可能你是第一次听说，但是从此以后你可能就会经常用到他了，非常好用，比如说我们要做到如下效果，你会怎么做？

文末

对于很多初中级Android工程师而言，想要提升技能，往往是自己摸索成长，不成体系的学习效果低效漫长且无助。 整理的这些架构技术希望对Android开发的朋友们有所参考以及少走弯路，本文的重点是你有没有收获与成长，其余的都不重要，希望读者们能谨记这一点。

最后想要拿高薪实现技术提升薪水得到质的飞跃。最快捷的方式，就是有人可以带着你一起分析，这样学习起来最为高效，所以为了大家能够顺利进阶中高级、架构师，我特地为大家准备了一套高手学习的源码和框架视频等精品Android架构师教程，保证你学了以后保证薪资上升一个台阶。

当你有了学习线路，学习哪些内容，也知道以后的路怎么走了，理论看多了总要实践的。

进阶学习视频

附上：我们之前因为秋招收集的二十套一二线互联网公司Android面试真题 （含BAT、小米、华为、美团、滴滴）和我自己整理Android复习笔记（包含Android基础知识点、Android扩展知识点、Android源码解析、设计模式汇总、Gradle知识点、常见算法题汇总。）

《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！
展知识点、Android源码解析、设计模式汇总、Gradle知识点、常见算法题汇总。）

[外链图片转存中…(img-NVnSJp2I-1714958755137)]
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！