Flutter 中的 Expanded 小部件:全面指南

Flutter 中的 Expanded 小部件:全面指南

在 Flutter 中,Expanded 是一个用于控制子控件占据可用空间的布局小部件,通常与 RowColumnFlex 等父级布局小部件一起使用。Expanded 允许你创建灵活的布局,其中子控件可以按照指定的 flex 因子填充可用空间。

基础用法

Expanded 最基本的用法是包裹其他小部件,使其在父级布局中占据剩余空间:

Row(children: <Widget>[Expanded(child: Container(color: Colors.red),),Expanded(child: Container(color: Colors.blue),),],
)

在这个例子中,两个 Container 小部件将会各自占据 Row 的一半宽度。

flex 属性

Expandedflex 属性定义了子控件在父级布局中分配空间的相对比例。flex 值越大,子控件占据的空间越多:

Row(children: <Widget>[Expanded(flex: 2,child: Container(color: Colors.red),),Expanded(flex: 1,child: Container(color: Colors.blue),),],
)

在这个例子中,红色 Container 将占据比蓝色 Container 多的空间。

fill 属性

fill 属性决定了子控件是否应该填充父级布局分配给它的所有空间。默认值为 true,意味着子控件将完全填充分配给它的空间:

Expanded(fill: true,child: Container(color: Colors.green),
)

如果你想要子控件不填充分配给它的所有空间,可以设置 fillfalse

FlexFit 属性

flexFit 属性允许你控制 Expanded 子控件的 FlexParentData 如何调整其子控件的大小。它接受 FlexFit.looseFlexFit.tight 两个值:

  • FlexFit.loose:子控件的大小将基于其最小约束而不是父级分配给它的全部空间。
  • FlexFit.tight:子控件将尽可能大地增长以填充分配给它的空间。
Expanded(flex: 1,flexFit: FlexFit.tight,child: Container(color: Colors.purple),
)

与非 Expanded 小部件配合使用

Expanded 可以与非 Expanded 小部件一起使用,非 Expanded 小部件将占据固定空间,而 Expanded 小部件将填充剩余空间:

Row(children: <Widget>[Container(width: 100.0, height: 50.0, color: Colors.black),Expanded(child: Container(color: Colors.green),),],
)

控制子控件的对齐

Expanded 允许你控制子控件在交叉轴上的对齐方式:

Row(children: <Widget>[Expanded(alignment: Alignment.center,child: Container(color: Colors.yellow),),],
)

在这个例子中,黄色 Container 将在其分配的空间内居中对齐。

实例:响应式布局

Expanded 可以用于创建响应式布局,其中子控件的大小可以根据屏幕大小变化:

Row(children: <Widget>[Expanded(child: Container(color: Colors.red),),SizedBox(width: 10.0), // 固定宽度的空间Expanded(child: Column(children: <Widget>[Container(height: 50.0, color: Colors.blue),SizedBox(height: 10.0), // 固定高度的空间Container(height: 50.0, color: Colors.green),],),),],
)

结语

Expanded 是 Flutter 中一个非常实用的小部件,它提供了一种简单而灵活的方式来控制子控件在布局中占据的空间。通过合理使用 Expanded,你可以创建出既美观又适应不同屏幕尺寸的布局界面。掌握 Expanded 的使用,对于任何 Flutter 开发者来说都是一项重要的技能。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/836397.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SpringCloudAlibaba 2023.0.1、SpringBoot 3.2.5 - 项目完整搭建(Nacos、OpenFeign、Gateway)

目录 一、SpringCloudAlibaba 项目完整搭建 1.1、初始化项目 1.2、配置父工程的 pom.xml 1.3、创建子模块

贪吃蛇(c实现)

目录 游戏说明&#xff1a; 第一个是又是封面&#xff0c;第二个为提示信息&#xff0c;第三个是游戏运行界面 游戏效果展示&#xff1a; 游戏代码展示&#xff1a; snack.c test.c snack.h 控制台程序的准备&#xff1a; 控制台程序名字修改&#xff1a; 参考&#xff1a…

如何自定义双亲委派中类的加载器

在Java中&#xff0c;要自定义双亲委派模型中的类加载器&#xff0c;需要继承java.lang.ClassLoader类&#xff0c;并重写其中的findClass(String name)方法。findClass方法负责根据类的名字查找并加载类的字节码数据。 通常不建议直接重写findClass方法&#xff0c;而是应该重…

练习队列的相关操作:循环队列

1. 思路解析 循环队列就是在只有有限的空间时使用队列实现循环存储数据&#xff0c;有双向链表和数组两种选择&#xff0c;这里我们使用数组实现循环队列&#xff08;因为链表我不会 >-<&#xff09; 2. 相关函数及其实现 2.1 判空与判满 判空&#xff1a;直接返回头尾…

Leetcode—946. 验证栈序列【中等】

2024每日刷题&#xff08;133&#xff09; Leetcode—946. 验证栈序列 实现代码 class Solution { public:bool validateStackSequences(vector<int>& pushed, vector<int>& popped) {int left 0;for(int i 0; i < popped.size(); i) {while(left &…

关于我转生从零开始学C++这件事:获得神器

❀❀❀ 文章由不准备秃的大伟原创 ❀❀❀ ♪♪♪ 若有转载&#xff0c;请联系博主哦~ ♪♪♪ ❤❤❤ 致力学好编程的宝藏博主&#xff0c;代码兴国&#xff01;❤❤❤ 几天不见 &#xff0c;甚是想念&#xff01;哈咯大家好又是我大伟&#xff0c;五一的假期已经结束&#xff0…

超绝git

我们应该学会使用超绝git了&#xff0c;首先&#xff0c;什么是git&#xff1f; git是超绝版本控制器&#xff08;去中心化的分布式系统&#xff09;&#xff0c;什么又是版本控制&#xff0c;git和Gitee又有什么牵扯&#xff1f; git安装 这是安装git&#xff1a; yum ins…

Kexp 动态展示 k8s 资源对象依赖关系

kexp[1] 旨在以可视化的方式帮助用户理解和探索 Kubernetes 的能力。 适用场景&#xff1a; 学习和探索 Kubernetes 的功能。 应用开发&#xff0c;提供每个应用的对象图预设。 控制器和操作器的开发&#xff0c;支持动态对象图。 即将推出类似 Postman 的 Kubernetes API …

Python深度学习基于Tensorflow(9)注意力机制

文章目录 注意力机制是怎么工作的注意力机制的类型 构建Transformer模型Embedding层注意力机制的实现Encoder实现Decoder实现Transformer实现 注意力机制的主要思想是将注意力集中在信息的重要部分&#xff0c;对重要部分投入更多的资源&#xff0c;以获取更多所关注目标的细节…

GoF之代理模式(静态代理+动态代理(JDK动态代理+CGLIB动态代理带有一步一步详细步骤))

1. GoF之代理模式&#xff08;静态代理动态代理(JDK动态代理CGLIB动态代理带有一步一步详细步骤)&#xff09; 文章目录 1. GoF之代理模式&#xff08;静态代理动态代理(JDK动态代理CGLIB动态代理带有一步一步详细步骤)&#xff09;每博一文案2. 代理模式的理解3. 静态代理4. 动…

整理好的中债国债3年期到期收益率数据集(2002-2023年)

01、数据简介 国债&#xff0c;又称国家公债&#xff0c;是由国家发行的债券&#xff0c;是中央ZF为筹集CZ资金而发行的一种ZF债券&#xff0c;是中央ZF向投资者出具的、承诺在一定时期支付利息和到期偿还本金的债权债务凭证。 中债&#xff0c;是指由中国中债登记结算有限责…

Jetpack Compose一:初步了解Compose

Intellij IDEA构建Android开发环境 IntelliJ IDEA 2023.2.1 Android开发变化 IDEA配置使用Gradle 新建Compose工程&#xff0c;取名ComposeStudy 可以看到的是IDEA为项目初始化了部分代码 使用Compose开发不再需要使用xml文件来设计布局了 Compose中的Text也不同于Android V…

机器学习特征降维

目录 特征降维概念 低方差过滤法 PCA主成分分析 相关系数法 小结 特征降维概念 特征对训练模型时非常重要的&#xff1b;用于训练的数据集包含一些不重要的特征&#xff0c;可能导致模型性能不好、泛化性能不佳&#xff1b;例如&#xff1a; 某些特征的取值较为接近&…

部署Gerapy

1.Gerapy 是什么&#xff1f; Gerapy 是一款基于 Python 3 的分布式爬虫管理框架&#xff0c;它旨在简化和优化分布式爬虫的部署、管理和监控过程。 2.作用与功能&#xff1f; 2.1分布式管理&#xff1a; Gerapy 允许用户在多台机器上部署和管理Scrapy爬虫&#xff0c;实现爬虫…

Oracle数据库之 常用数据库对象(二)

目录 1.视图 1.1.什么是视图&#xff1f; 1.2.创建视图的语法 1.3.简单视图和复杂视图 1.4.创建复杂视图 1.4.1.创建复杂视图的步骤 1.4.2.示例 1.4.3.注意事项 1.5.视图中使用DML的规定 1.5.1.屏蔽DML操作 1.6.删除视图 2.序列 2.1.语法&#xff1a; 2.2.查询序…

统计学在实际生活中的应用

统计学在各个领域都有着广泛的应用&#xff0c;包括但不限于医学、经济学、环境科学等。以下是一些领域中统计学的实际应用&#xff1a; 1. 医学&#xff1a; - 临床试验设计和数据分析&#xff1a;用于评估药物疗效、疾病预防和治疗方案的有效性。 - 流行病学研究&…

Python中的类变量和实例变量的关系

Python中的类变量和实例变量的关系&#xff0c;就是各论各的 id(): 在 Python 中&#xff0c;id() 函数返回对象的唯一标识符&#xff08;整数&#xff09;。该标识符代表当前实现中对象的内存地址。Python 中的每个对象在创建时都会被分配一个唯一标识符&#xff0c;并且该标…

HNU-操作系统OS-2024期中考试

前言 该卷为22计科/智能OS期中考卷。 感谢智能22毕宿同学记忆了考卷考题。 同学评价&#xff1a;总体简单&#xff1b;第1&#xff0c;7概念题较难需要看书&#xff1b;第4&#xff0c;5题原题。 欢迎同学分享答案。 【1】共10分 操作系统的设计目标有哪些&#xff1f; 【…

安卓surfaceview的使用方式

1. 什么是surfaceview surfaceview内部机制和外部层次结构 在安卓开发中&#xff0c;我们经常会遇到一些需要高性能、高帧率、高画质的应用场景&#xff0c;例如视频播放、游戏开发、相机预览等。这些场景中&#xff0c;我们需要直接操作图像数据&#xff0c;并且实时地显示到…

传感网应用开发教程--AT指令访问新大陆云平台(ESP8266模块+物联网云+TCP)

实现目标 1、熟悉AT指令 2、熟悉新大陆云平台新建项目 3、具体目标&#xff1a;&#xff08;1&#xff09;注册新大陆云平台&#xff1b;&#xff08;2&#xff09;新建一个联网方案为WIFI的项目&#xff1b;&#xff08;3&#xff09;ESP8266模块&#xff0c;通过AT指令访问…