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

简介: 在 Flutter 开发中,Expanded 和 Flexible 是两个常用的布局控件,用于管理 UI 布局的空间分配。Expanded 使子组件占据主轴上的所有剩余空间,而 Flexible 允许通过 flex 参数按比例分配空间。掌握两者的区别和使用场景,可以让你在构建复杂 UI 时更加得心应手。

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

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

Expanded 的基本用法
Column(
children: [
Text('First'),
Expanded(
child: Container(
color: Colors.blue,
),
),
Text('Second'),
],
)
在上面的例子中,Expanded 包裹了一个 Container,这个 Container 会占据 Column 中剩余的空间,Text 控件会根据内容的大小显示在 Container 之上和之下。Expanded 控件的作用就是让 Container 扩展填充剩余的空间。

Expanded 的特点
占据所有剩余空间:Expanded 会使得子控件占据主轴方向的剩余空间,并将所有可用的空间均分给它包裹的子组件。
不能拥有多个:在某个方向的布局中,通常不建议使用多个 Expanded,除非你想让多个控件平分剩余空间。在 Row 或 Column 中多个 Expanded 会均匀分配剩余空间。
二、Flexible 的使用
与 Expanded 类似,Flexible 也是用来分配主轴方向的空间,但它更加灵活,因为它允许你指定子控件占据空间的比例。Flexible 通过给定一个 flex 值,控制子组件的空间占比,从而使得多个控件可以按比例分配可用空间。

Flexible 的基本用法
Row(
children: [
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 控件。第一个 Flexible 的 flex 值是 2,第二个 flex 值是 1。这意味着,第二个 Container 的空间会是第一个 Container 的一倍。Flexible 会根据它们的 flex 比例分配主轴的剩余空间。

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

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

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

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

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

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

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

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

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

                        版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

原文链接:https://blog.csdn.net/lbcyllqj/article/details/143581176

目录
相关文章
|
18天前
|
API
HarmonyOS 3.1/4项目在DevEco Studio 5.0(HarmonyOS NEXT)版本下使用的问题
有读者在使用《鸿蒙HarmonyOS应用开发入门》书中的源码时遇到问题,主要原因是使用的DevEco Studio版本不同所致。本文提供了三种解决方案:1) 降级DevEco Studio至3.1版本;2) 按照5.0版本修改书中示例;3) 等待并使用《鸿蒙之光HarmonyOS NEXT原生应用开发入门》升级版书籍。
125 1
|
3天前
|
存储 JSON 开发工具
三、HarmonyOS NEXT应用开发:ArkTS工程目录结构(Stage模型)
本文介绍了HarmonyOS NEXT应用开发中ArkTS工程的目录结构(Stage模型),包括AppScope、entry、hvigor、oh_modules等主要目录及其作用。重点解析了entry目录下的src > main > resources目录结构,详细说明了base、限定符目录和rawfile的作用,以及如何引用资源文件。
22 1
|
22天前
|
JSON JavaScript 前端开发
harmony-chatroom 自研纯血鸿蒙OS Next 5.0聊天APP实战案例
HarmonyOS-Chat是一个基于纯血鸿蒙OS Next5.0 API12实战开发的聊天应用程序。这个项目使用了ArkUI和ArkTS技术栈,实现了类似微信的消息UI布局、输入框光标处插入文字、emoji表情图片/GIF动图、图片预览、红包、语音/位置UI、长按语音面板等功能。
47 2
|
1月前
|
监控 UED 开发者
鸿蒙next版开发:订阅应用事件(ArkTS)
在HarmonyOS 5.0中,ArkTS引入了强大的应用事件订阅机制,允许开发者订阅和处理系统或应用级别的事件,这对于监控应用行为、优化用户体验和进行性能分析至关重要。本文详细介绍了如何在ArkTS中订阅应用事件,并提供了示例代码,包括导入模块、创建观察者、设置事件参数等步骤。通过这些方法,开发者可以更智能地管理和响应应用事件。
82 11
|
1月前
|
安全 API 数据处理
鸿蒙next版开发:ArkTS组件通用属性(隐私遮罩)
在HarmonyOS 5.0中,ArkTS引入了隐私遮罩功能,用于保护用户隐私和数据安全。本文详细介绍了隐私遮罩的通用属性和使用方法,并提供了示例代码。隐私遮罩支持Image和Text组件,在数据加载或处理过程中防止敏感信息泄露,提升用户体验和数据安全性。
57 11
|
1月前
|
开发者 UED 容器
鸿蒙next版开发:ArkTS组件通用属性(Flex布局)
在HarmonyOS next中,ArkTS的Flex布局是一种强大且灵活的布局方式,支持水平或垂直方向排列元素,并能动态调整大小和位置以适应不同屏幕。主要属性包括justifyContent、alignItems、direction和wrap,适用于导航栏、侧边栏和表单等多种场景。示例代码展示了如何使用这些属性创建美观的布局。
68 10
|
1月前
|
UED
鸿蒙next版开发:相机开发-适配不同折叠状态的摄像头变更(ArkTS)
在HarmonyOS 5.0中,ArkTS提供了强大的相机开发能力,特别是针对折叠屏设备的摄像头适配。本文详细介绍了如何在ArkTS中检测和适配不同折叠状态下的摄像头变更,确保相机应用在不同设备状态下的稳定性和用户体验。通过代码示例展示了具体的实现步骤。
60 8
|
1月前
|
API 内存技术
鸿蒙next版开发:相机开发-拍照(ArkTS)
在HarmonyOS 5.0中,ArkTS提供了一套完整的API来管理相机功能,特别是拍照功能。本文详细介绍如何在ArkTS中实现拍照功能,包括导入接口、创建会话、配置会话、触发拍照及监听拍照输出流状态,并提供代码示例进行详细解读。通过本文,你将掌握如何在HarmonyOS 5.0中使用ArkTS实现高效的拍照功能。
68 7
|
1月前
|
监控 开发者
鸿蒙next版开发:使用HiDebug获取调试信息(ArkTS)
在HarmonyOS 5.0中,HiDebug是一个强大的应用调试工具,可帮助开发者获取系统的CPU使用率、内存信息等关键性能数据。本文详细介绍了如何在ArkTS中使用HiDebug,并提供了示例代码,帮助开发者进行性能分析和问题诊断。
58 7
|
1月前
|
开发者 容器
鸿蒙next版开发:ArkTS组件通用属性(文本通用)
在HarmonyOS 5.0中,ArkTS提供了丰富的文本通用属性,如textAlign、maxLines、textOverflow、fontSize、fontColor、fontStyle、fontWeight、fontFamily、lineHeight、letterSpacing和decoration等,用于实现多样的文本显示和样式效果。本文详细解读了这些属性,并提供了示例代码,帮助开发者更好地利用这些工具,提升应用界面的美观和实用性。
63 8

热门文章

最新文章