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

最新推荐文章于 2024-06-18 15:30:00 发布

m0_66684871

最新推荐文章于 2024-06-18 15:30:00 发布

阅读量3k

点赞数 1

分类专栏：程序员文章标签：面试

本文链接：https://blog.csdn.net/m0_66684871/article/details/123241858

版权

本文详细介绍了Flutter中的Flexible组件，包括Flex填充比例和getItem方法的使用，以及Fit属性对布局的影响。接着讲解了Expanded组件的原理和应用场景，展示了如何避免布局异常并实现适配性。最后，总结了Flutter弹性布局的关键知识点，为开发者提供面试准备的指导。

摘要由CSDN通过智能技术生成

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),
),
],
)