type
status
date
slug
summary
tags
category
icon
password
<ins/>
在 Flutter 中，
Expanded 和 Flexible 都是用于在 Row、Column 等布局中按比例分配空间的组件。虽然它们有相似之处，但有一些关键区别：1. 基本作用
- Flexible：可以根据剩余空间大小来调整自身的大小，但不会强制填满剩余空间。
- Expanded：是
Flexible的子类，且flex参数默认为 1，它会强制子组件填满所有剩余空间。
2. flex 参数
- Flexible：可以设置
flex参数，指定子组件占用的比例。Flexible不会强制填满空间，而是允许子组件根据自己的内容尺寸和比例灵活调整。
- Expanded：继承了
Flexible并且默认flex值为 1，所以Expanded始终填满剩余空间，除非flex被设置为 0。
3. 使用方式
- Flexible：适合在需要按比例调整子组件大小，但允许它们根据内容大小有所变化的场景。例如，某些组件占据一部分剩余空间，但不填满整个区域。
- Expanded：适合在需要填满所有剩余空间的情况下使用，通常用于填充布局中的剩余区域。
示例对比
Flexible 示例
在这个例子中，两个
Flexible 子组件按比例分配剩余空间，但会根据内容自适应。在上例中，红色容器占 2/3 的剩余空间，蓝色容器占 1/3 的空间。
Expanded 示例
在这个例子中，
Expanded 会强制填满剩余空间：在上例中，红色和蓝色容器各自占 50% 的空间，因为
Expanded 强制填满所有可用的空间。4. 适用场景
- Flexible：适合需要按比例分配空间，但允许子组件根据内容大小灵活调整时使用。
- Expanded：适合需要占据整个剩余空间的场景，比如一个内容区域需要填充整个可用空间。
总结
特性 | Flexible | Expanded |
是否填满剩余空间 | 否，可根据内容大小调整 | 是，强制填满剩余空间 |
默认 flex 值 | 必须手动设置 | 默认 1 |
适用场景 | 按比例分配空间并根据内容自适应 | 填充布局中的剩余空间 |
通常在需要填满剩余空间的情况时使用
Expanded，而在需要按比例分配空间但保留内容灵活性时使用 Flexible。<ins/>