Flutter&鸿蒙next 中的 Expanded 和 Flexible 使用技巧详解

在 Flutter 开发中,ExpandedFlexible 是两个非常常用的布局控件,它们可以帮助开发者更加灵活地管理 UI 布局的空间分配。虽然它们看起来非常相似,但它们的功能和使用场景有所不同。理解这两者的区别,能帮助你在构建复杂 UI 布局时更加得心应手。

一、Expanded 的使用

Expanded 是一个用来在主轴(横向或纵向)方向上扩展子组件的控件。当你希望某个子组件占据可用空间的剩余部分时,可以使用 Expanded 来包裹它。Expanded 会将其子组件的大小调整为占据主轴上的所有剩余空间。

Expanded 的基本用法
Column(
  children: <Widget>[
    Text('First'),
    Expanded(
      child: Container(
        color: Colors.blue,
      ),
    ),
    Text('Second'),
  ],
)

在上面的例子中,Expanded 包裹了一个 Container,这个 Container 会占据 Column 中剩余的空间,Text 控件会根据内容的大小显示在 Container 之上和之下。Expanded 控件的作用就是让 Container 扩展填充剩余的空间。

Expanded 的特点
  • 占据所有剩余空间Expanded 会使得子控件占据主轴方向的剩余空间,并将所有可用的空间均分给它包裹的子组件。
  • 不能拥有多个 :在某个方向的布局中,通常不建议使用多个 Expanded,除非你想让多个控件平分剩余空间。在 RowColumn 中多个 Expanded 会均匀分配剩余空间。
二、Flexible 的使用

Expanded 类似,Flexible 也是用来分配主轴方向的空间,但它更加灵活,因为它允许你指定子控件占据空间的比例。Flexible 通过给定一个 flex 值,控制子组件的空间占比,从而使得多个控件可以按比例分配可用空间。

Flexible 的基本用法
Row(
  children: <Widget>[
    Container(
      color: Colors.red,
      width: 50,
      height: 50,
    ),
    Flexible(
      flex: 2,
      child: Container(
        color: Colors.blue,
      ),
    ),
    Flexible(
      flex: 1,
      child: Container(
        color: Colors.green,
      ),
    ),
  ],
)

在这个例子中,Row 中有两个 Flexible 控件。第一个 Flexibleflex 值是 2,第二个 flex 值是 1。这意味着,第二个 Container 的空间会是第一个 Container 的一倍。Flexible 会根据它们的 flex 比例分配主轴的剩余空间。

Flexible 的特点
  • 按比例分配空间 :与 Expanded 的固定占用剩余空间不同,Flexible 可以根据不同的 flex 值来按比例分配空间。例如,flex: 2flex: 1 会分配 2:1 的比例。
  • 适用于具有不同空间需求的控件Flexible 可以用来创建一个有弹性比例的布局,适合那些需要动态调整比例的场景。
三、ExpandedFlexible 的区别
  1. 默认行为

    • Expanded 会将子控件扩展为占据剩余空间的所有部分。它等价于设置 Flexible(flex: 1)
    • Flexible 则允许你通过 flex 参数控制空间的比例分配。
  2. 使用场景

    • 使用 Expanded 时,你不关心空间的比例,只需要填满剩余空间时,可以直接使用。
    • 使用 Flexible 时,你关心子控件在剩余空间中应该占据多少比例,这时候就需要使用 flex 来控制比例。
  3. 性能差异

    • 在性能上,二者差异不大,但是如果你只需要简单的"填充"效果,使用 Expanded 会更直接、更简洁。
四、实际应用技巧
  1. 平分剩余空间 : 如果你希望多个控件平分父容器的剩余空间,可以使用多个 Expanded

    Row(
      children: <Widget>[
        Expanded(child: Container(color: Colors.red)),
        Expanded(child: Container(color: Colors.blue)),
      ],
    )
    
  2. 按比例分配空间 : 使用 Flexible 来按比例分配空间,灵活地控制每个子控件的宽度或高度:

    Row(
      children: <Widget>[
        Flexible(flex: 2, child: Container(color: Colors.red)),
        Flexible(flex: 1, child: Container(color: Colors.blue)),
      ],
    )
    
  3. 动态调整布局 : 使用 Flexible 结合 flex 值来实现复杂的动态布局。例如,在响应式设计中,根据屏幕宽度或容器大小,动态改变布局比例。

  4. 避免嵌套过深 : 尽量避免在复杂的 UI 中使用过多的嵌套 ExpandedFlexible,这可能导致布局过于复杂或性能瓶颈。

五、总结

ExpandedFlexible 是 Flutter 中布局系统中两个非常重要的控件,能够帮助我们在 RowColumnFlex 等容器中灵活管理空间的分配。Expanded 用于占据剩余空间,适合均匀分配剩余空间的场景;Flexible 则提供了更灵活的空间比例控制,允许你根据不同需求调整控件占据空间的比例。

掌握这两者的使用技巧,能够让你的布局更加灵活和高效,尤其是在复杂的 UI 中,你可以根据实际需求选择合适的布局方式,从而提高开发效率和用户体验。

相关推荐
郝晨妤9 小时前
鸿蒙原生应用开发元服务 元服务是什么?和App的关系?(保姆级步骤)
android·ios·华为od·华为·华为云·harmonyos·鸿蒙
Peace*9 小时前
HarmonyOs鸿蒙开发实战(16)=>沉浸式效果第一种方案一窗口全屏布局方案
harmonyos·鸿蒙·鸿蒙系统
howard200512 小时前
鸿蒙实战:页面跳转传参
harmonyos·跳转·router·传参
嘟嘟叽13 小时前
初学 flutter 环境变量配置
flutter
iFlyCai13 小时前
深入理解Flutter生命周期函数之StatefulWidget(一)
flutter·生命周期·dart·statefulwidget
sunly_13 小时前
Flutter:photo_view图片预览功能
android·javascript·flutter
威哥爱编程20 小时前
异步编程在ArkTS中具体怎么实现?
harmonyos·arkts·harmonyos next
Summer不秃20 小时前
Flutter中sqflite的使用案例
flutter
sunly_20 小时前
Flutter:TweenAnimationBuilder自定义隐式动画
flutter
AiFlutter20 小时前
Flutter-Web首次加载时添加动画
前端·flutter