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

相关推荐
RoyLin6 分钟前
TypeScript设计模式:仲裁者模式
前端·后端·typescript
子兮曰10 分钟前
🚀前端依赖配置避坑指南:深度解析package.json中devDependencies的常见误解
前端·javascript·npm
瑶琴AI前端11 分钟前
【零成本高效编程】VS Code必装的5款免费AI插件,开发效率飙升!
前端·ai编程·visual studio code
forever_Mamba12 分钟前
实现一个高性能倒计时:从踩坑到最佳实践
前端·javascript
_AaronWong12 分钟前
实现一个鼠标滚轮横向滚动需求
前端·electron
子兮曰13 分钟前
浏览器与 Node.js 全局变量体系详解:从 window 到 global 的核心差异
前端·javascript·node.js
Olrookie13 分钟前
ruoyi-vue(十五)——布局设置,导航栏,侧边栏,顶部栏
前端·vue.js·笔记
召摇15 分钟前
API 设计最佳实践 Javascript 篇
前端·javascript·vue.js
光影少年15 分钟前
vite打包优化有哪些
前端·vite·掘金·金石计划
码间舞15 分钟前
文件太大怎么上传?【分组分片上传大文件】-实战记录
前端·vue.js·程序员