Flexible与Expanded

在 Flutter 中,FlexibleExpanded 小部件都用于在 Flex(如 RowColumn)布局中控制子小部件的布局。尽管它们看起来很相似,但存在一些关键的区别:

Flexible

  • Flexible 小部件允许其子小部件在主轴方向上根据可用空间来伸缩。使用 Flexible 时,可以指定子小部件的 flex 因子来决定其在 Flex 容器中占据的空间比例。
  • Flexible 还允许子小部件保持其固有尺寸。通过设置 fit 属性为 FlexFit.loose(默认值),子小部件可以在不超过分配空间的情况下保持其原始大小。也就是说,如果子小部件的内容不足以填满其分配的空间,它可以比分配的空间更小。大家可能对属性为 FlexFit.loose好奇,这个尽可能填充其空间是什么意思呢?假如有个需求,需要后一个Widget紧跟前一个Widget,但前一个Widget长度不是固定的,可能会溢出屏幕,这样的需求该如何实现呢?有的开发同学可能想到会计算前一个Widget的长度,用屏幕的宽减去对应的长度剩余的就是该Widget的宽度,这样可以解决问题,但其实Flutter中大多地方是不用计算的,使用FlexFit.loose则可以完美解决问题。代码如下:
less 复制代码
Row(
  children: [
    const SizedBox(width:16),
    const Text("来源:"),
    const Flexible(
        child: Text("这是一个项目" * 6,maxLines: 1,overflow: TextOverflow.ellipsis,)),
    const SizedBox(width: 8),
    Container(
      padding: EdgeInsets.all(5),
      decoration: const BoxDecoration(
          color: Colors.cyan,
          borderRadius: BorderRadius.all(Radius.circular(6))
      ),
      child: Text("项目"),
    ),
    const SizedBox(width:16),
  ],
)

效果分别如下:

Expanded

  • Expanded 小部件是 Flexible 小部件的一个特殊情况,继承Flexible,其 fit 属性默认设置为 FlexFit.tight。这意味着 Expanded 小部件会强制其子小部件填满在 Flex 容器中分配给它的空间。
  • 使用 Expanded 时,子小部件不能保持其固有大小,而是被拉伸以占据所有可用空间(根据其 flex 因子)。

示例代码

less 复制代码
Row(
  children: <Widget>[
    Flexible(
      flex: 2,
      child: Container(
        color: Colors.blue,
        height: 100,
      ),
    ),
    Flexible(
      flex: 1,
      fit: FlexFit.tight,
      child: Container(
        color: Colors.red,
        height: 100,
      ),
    ),
    Expanded(
      flex: 1,
      child: Container(
        color: Colors.green,
        height: 100,
      ),
    ),
  ],
)

效果如图所示:

  • 第一个 Container 使用 Flexible,并且其 flex 值为 2,这意味着它会尝试占据两倍于其他子元素分配的空间。由于 fit 属性为默认值 FlexFit.loose,如果容器内容不足以填满其分配的空间,它可以比分配的空间更小。
  • 第二个 Container 也使用 Flexible,但其 fit 设置为 FlexFit.tight,使其行为类似于 Expanded
  • 第三个 Container 使用 Expanded,自动应用 FlexFit.tight,确保填满分配的空间。

总的来说,Expanded 是特定于要求子小部件填满所有可用空间的场景的 Flexible。当你需要子小部件根据其大小灵活调整时,应该使用 Flexible

相关推荐
逆袭的小黄鸭2 分钟前
掌握 JavaScript:理解原型和原型链
前端·javascript·面试
患得患失9493 分钟前
【前端】【tailwind】tailwind默认重置了样式
前端·tailwind
SparkleTiger3 分钟前
2025好运-浏览器篇-回流与重绘
前端
前端小趴菜054 分钟前
记录 vue-router访问 / 路径直接重定向到有权限的第一个菜单
前端·javascript·vue.js
the_one5 分钟前
超燃!手把手教你打造赛博朋克风流光按钮🤩🤩🤩
前端·css
SparkleTiger5 分钟前
2025好运-CSS篇-BFC
前端
蜗牛快跑1236 分钟前
最受欢迎的十个 JavaScript 动画库 -2025
前端
疏狂难除9 分钟前
【Tauri2】013——前端Window Event与创建Window
前端·javascript·rust·react·tauri2
yanyu-yaya33 分钟前
@progress/kendo-react-dropdowns <ComboBox>组件报错,解决
前端·javascript·react.js
小破孩呦38 分钟前
动态循环表单+动态判断表单类型+动态判断表单是否必填方法
前端·javascript·html