Flutter鸿蒙next 中的 Expanded 和 Flexible 使用技巧详解
在 Flutter 开发中,Expanded 和 Flexible 是两个非常常用的布局控件,它们可以帮助开发者更加灵活地管理 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,除非你想让多个控件平分剩余空间。在Row或Column中多个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 控件。第一个 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: <Widget>[Expanded(child: Container(color: Colors.red)),Expanded(child: Container(color: Colors.blue)),], ) -
按比例分配空间: 使用
Flexible来按比例分配空间,灵活地控制每个子控件的宽度或高度:Row(children: <Widget>[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 中,你可以根据实际需求选择合适的布局方式,从而提高开发效率和用户体验。
相关文章:
Flutter鸿蒙next 中的 Expanded 和 Flexible 使用技巧详解
在 Flutter 开发中,Expanded 和 Flexible 是两个非常常用的布局控件,它们可以帮助开发者更加灵活地管理 UI 布局的空间分配。虽然它们看起来非常相似,但它们的功能和使用场景有所不同。理解这两者的区别,能帮助你在构建复杂 UI 布…...
【微信小游戏学习心得】
这里是引用 微信小游戏学习心得 简介了解微信小游戏理解2d游戏原理数据驱动视图总结 简介 本人通过学习了解微信小游戏,学习微信小游戏,加深了对前端框架,vue和react基于数据驱动视图的理解,及浏览器文档模型和javaScript之间的关…...
Python | Leetcode Python题解之第539题最小时间差
题目: 题解: def getMinutes(t: str) -> int:return ((ord(t[0]) - ord(0)) * 10 ord(t[1]) - ord(0)) * 60 (ord(t[3]) - ord(0)) * 10 ord(t[4]) - ord(0)class Solution:def findMinDifference(self, timePoints: List[str]) -> int:n len…...
Zookeeper运维秘籍:四字命令基础、详解及业务应用全解析
文章目录 一、四字命令基础二、四字命令详解三、四字命令的开启与配置四、结合业务解读四字命令confconsenvi命令Stat命令MNTR命令ruok命令dump命令wchswchp ZooKeeper,作为一款分布式协调服务,提供了丰富的四字命令(也称为四字短语ÿ…...
Error: `slot-scope` are deprecated报错解决
本人新手菜鸡,文章为自己遇到问题的记录,如有错误或不足还请大佬批评指正 问题描述 在Vue3环境下使用slot插槽,出现‘slot-scope’ are deprecated报错问题,经过查找发现,是因为在slot插槽使用中,vue2和vu…...
Excel(图例)中使用上标下标
单元格中 1、在Excel单元格中刷黑要设置成上标的字符,如m2中的2; 2、单击右键,在弹出的对话框中选择“设置单元格格式”; 3、在弹出的“设置单元格格式”对话框中选择上标(或下标); 4、最后…...
熔断和降级
目录 隔离和降级 FeignClient整合Sentinel 通过Feign设置服务降级 1.创建类实现FallbackFactory接口,并让这个类和使用FeignClient的接口类绑定 2.让order-service服务的feign开启sentinel 3.测试,只开启order-service服务,而不开启user-…...
【学习笔记】Linux系统基础知识 6 —— su命令详解
提示:学习Linux系统基础命令 su 命令详解,包含通过 su 命令切换用户实例 一、前期准备 1.已经正确安装并成功进入Linux系统 说明:本实验采用的 Redhat 系统(因系统不一致,可能部分显示存在差异) 二、学…...
docker-compose命令介绍
docker-compose命令介绍 docker-compose1. docker-compose是什么2. Compose file format3. 命令3.1 服务相关命令upruncreatestartrestartdownstopkillrmpauseunpause 3.2 镜像相关命令3.3 查看相关命令 docker-compose 学了docker,然后就直接去学k8s了。恍恍惚惚几…...
Spring学习笔记_29——@Transactional
Transactional 1. 介绍 Transactional 是 Spring 框架提供的一个注解,用于声明方法或类级别的事务属性。 Spring事务:Spring学习笔记_28——事务-CSDN博客 当你在一个方法或类上使用 Transactional 注解时,Spring 会为该方法或类创建一个…...
github使用基础
要通过终端绑定GitHub账号并进行文件传输,你需要使用Git和SSH密钥来实现安全连接和操作。以下是一个基本流程: 设置GitHub和SSH 检查Git安装 通过终端输入以下命令查看是否安装Git: bash 复制代码 git --version配置Git用户名和邮箱 bash …...
Flink-Kafka-Connector
Apache Flink 是一个用于处理无界和有界数据的开源流处理框架。它支持高吞吐量、低延迟以及精确一次的状态一致性等特性。Flink 社区提供了丰富的连接器(Connectors)以方便与不同的数据源进行交互,其中就包括了 Apache Kafka 连接器。 Apach…...
远程终端vim里使用系统剪切板
1、本地通过终端远程linux server,由于不是桌面环境/GUI,终端vim里似乎没办法直接使用系统剪切板,即便已经是clipboard。 $ vim --version | grep clipboard clipboard keymap printer vertsplit eval …...
底层视角看C语言
文章目录 main函数很普通main函数之前调用了什么main函数和自定义函数的对比 变量名只为人而存在goto是循环的本质指针变量指针是一个特殊的数字汇编层面看指针 数组和指针数组越界问题低端地址越界高端地址越界 引用就是指针 main函数很普通 main函数是第一个被调用的函数吗&…...
【点云学习笔记】——分割任务学习
3D点云实例分割 vs 3D点云语义分割 1. 功能对比 代码1(实例分割):用于3D点云中的实例分割任务,其目标是将点云中的物体分割成独立的实例。每个实例可能属于相同类别但需要被分开,比如在自动驾驶中的多个行人、汽车&am…...
Qt——窗口
一.窗口概述 Qt 窗口是通过 QMainWindow 类来实现的。 QMainWindow是一个为用户提供主窗口程序的类,继承QWidget类,并且提供一个预定义的布局。包含一个菜单栏(menu bar),多个工具栏(tool bars࿰…...
InfluxDB性能优化指南
1. 引言 1.1 InfluxDB的简介与发展背景 InfluxDB是一个开源的时间序列数据库(TSDB),由InfluxData公司开发,专门用于处理高频率的数据写入和查询。其设计初衷是为物联网、应用程序监控、DevOps和实时分析等场景提供一个高效的存储…...
负载均衡式在线oj项目开发文档2(个人项目)
judge模块的框架 完成了网页渲染的功能之后,就需要判断用户提交的代码是否是正确的,当用户点击提交之后,就会交给路由模块的/judge模块,然后这个路由模块就需要去调用jude模块了,也就是需要一个新的jude模块ÿ…...
ssm081高校实验室管理系统的设计与实现+vue(论文+源码)_kaic
毕 业 设 计(论 文) 题目:高校实验室管理系统的设计与实现 摘 要 互联网发展至今,无论是其理论还是技术都已经成熟,而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播,搭配信息管理工具可以很…...
GitLab基于Drone搭建持续集成(CI/CD)
本文介绍了如何为 Gitee 安装 Drone 服务器。服务器打包为在 DockerHub 上分发的最小 Docker 映像。 1. 准备工作 创建OAuth应用 创建 GitLab OAuth 应用。Consumer Key 和 Consumer Secret 用于授权访问极狐GitLab 资源。 ps:授权回调 URL 必须与以下格式和路径匹配&…...
深入剖析AI大模型:大模型时代的 Prompt 工程全解析
今天聊的内容,我认为是AI开发里面非常重要的内容。它在AI开发里无处不在,当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗",或者让翻译模型 "将这段合同翻译成商务日语" 时,输入的这句话就是 Prompt。…...
3.3.1_1 检错编码(奇偶校验码)
从这节课开始,我们会探讨数据链路层的差错控制功能,差错控制功能的主要目标是要发现并且解决一个帧内部的位错误,我们需要使用特殊的编码技术去发现帧内部的位错误,当我们发现位错误之后,通常来说有两种解决方案。第一…...
Neo4j 集群管理:原理、技术与最佳实践深度解析
Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档,本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石,用于构建高可用、可扩展且一致的图数据库服务…...
相机Camera日志分析之三十一:高通Camx HAL十种流程基础分析关键字汇总(后续持续更新中)
【关注我,后续持续新增专题博文,谢谢!!!】 上一篇我们讲了:有对最普通的场景进行各个日志注释讲解,但相机场景太多,日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志,通过下列分类关键字搜索,即可清晰的分析不同场景的相机运行流程差异…...
大学生职业发展与就业创业指导教学评价
这里是引用 作为软工2203/2204班的学生,我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要,而您认真负责的教学态度,让课程的每一部分都充满了实用价值。 尤其让我…...
稳定币的深度剖析与展望
一、引言 在当今数字化浪潮席卷全球的时代,加密货币作为一种新兴的金融现象,正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而,加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下,稳定…...
初探Service服务发现机制
1.Service简介 Service是将运行在一组Pod上的应用程序发布为网络服务的抽象方法。 主要功能:服务发现和负载均衡。 Service类型的包括ClusterIP类型、NodePort类型、LoadBalancer类型、ExternalName类型 2.Endpoints简介 Endpoints是一种Kubernetes资源…...
【LeetCode】算法详解#6 ---除自身以外数组的乘积
1.题目介绍 给定一个整数数组 nums,返回 数组 answer ,其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法,且在 O…...
抽象类和接口(全)
一、抽象类 1.概念:如果⼀个类中没有包含⾜够的信息来描绘⼀个具体的对象,这样的类就是抽象类。 像是没有实际⼯作的⽅法,我们可以把它设计成⼀个抽象⽅法,包含抽象⽅法的类我们称为抽象类。 2.语法 在Java中,⼀个类如果被 abs…...
Ubuntu系统复制(U盘-电脑硬盘)
所需环境 电脑自带硬盘:1块 (1T) U盘1:Ubuntu系统引导盘(用于“U盘2”复制到“电脑自带硬盘”) U盘2:Ubuntu系统盘(1T,用于被复制) !!!建议“电脑…...
