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/>