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

相关推荐
EutoCool3 分钟前
Qt窗口:菜单栏
开发语言·c++·嵌入式硬件·qt·前端框架
浮桥1 小时前
vue3实现pdf文件预览 - vue-pdf-embed
前端·vue.js·pdf
七夜zippoe1 小时前
前端开发中的难题及解决方案
前端·问题
马可奥勒留2 小时前
睡前幻想——基于透明化黄金锚定的超主权货币体系设计:一种解决政府货币滥用的奥地利学派方案(4)
程序员
Hockor2 小时前
用 Kimi K2 写前端是一种什么体验?还支持 Claude Code 接入?
前端
杨进军2 小时前
React 实现 useMemo
前端·react.js·前端框架
海底火旺2 小时前
浏览器渲染全过程解析
前端·javascript·浏览器
你听得到112 小时前
揭秘Flutter图片编辑器核心技术:从状态驱动架构到高保真图像处理
android·前端·flutter
驴肉板烧凤梨牛肉堡2 小时前
浏览器是否支持webp图像的判断
前端
Xi-Xu2 小时前
隆重介绍 Xget for Chrome:您的终极下载加速器
前端·网络·chrome·经验分享·github