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

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

在 Flutter 中,Column 是一个垂直布局的小部件,用于将子控件沿着垂直轴排列。ColumnRow 相对,Row 是水平布局,而 Column 则是垂直布局。它非常适合用来创建列式布局,如表单、列表项、导航栏等。

基础用法

Column 最基本的用法是将多个控件垂直排列:

Column(children: <Widget>[Container(height: 50.0, color: Colors.red),Container(height: 50.0, color: Colors.blue),// ... 更多的控件],
)

主轴对齐

ColumnmainAxisAlignment 属性用于控制子控件在主轴(垂直轴)上的对齐方式:

顶部对齐

Column(mainAxisAlignment: MainAxisAlignment.start,// ... 子控件
)

居中对齐

Column(mainAxisAlignment: MainAxisAlignment.center,// ... 子控件
)

底部对齐

Column(mainAxisAlignment: MainAxisAlignment.end,// ... 子控件
)

空间均匀分布

Column(mainAxisAlignment: MainAxisAlignment.spaceEvenly,// ... 子控件
)

交叉轴对齐

ColumncrossAxisAlignment 属性用于控制子控件在交叉轴(水平轴)上的对齐方式:

Column(crossAxisAlignment: CrossAxisAlignment.center,// ... 子控件
)

间距和边距

通过 mainAxisSize 属性,可以设置 Column 的大小是否应该占据所有可用空间:

Column(mainAxisSize: MainAxisSize.min,// ... 子控件
)

通过 padding 属性,可以为 Column 添加内边距:

Column(padding: EdgeInsets.all(8.0),// ... 子控件
)

子控件间距

使用 spacing 属性来设置子控件之间的垂直间距:

Column(spacing: 10.0,children: List<Widget>.generate(5, (index) {return Container(height: 50.0, color: Colors.primaries[index % Colors.primaries.length]);}).toList(),
)

子控件大小调整

使用 flex 属性来设置子控件在 Column 中的弹性比例:

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

实例:垂直表单

下面是一个使用 Column 创建垂直表单的实例:

Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[TextField(decoration: InputDecoration(labelText: 'Username',border: OutlineInputBorder(),),),SizedBox(height: 16.0),TextField(decoration: InputDecoration(labelText: 'Password',border: OutlineInputBorder(),),obscureText: true,),SizedBox(height: 16.0),ElevatedButton(onPressed: () {},child: Text('Login'),),],
)

实例:导航栏

使用 Column 创建一个垂直排列的导航栏:

Column(mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: List<Widget>.generate(3, (index) {return ElevatedButton(onPressed: () {},child: Text('Nav Item $index'),);}).toList(),
)

结语

Column 是 Flutter 中处理垂直布局的核心小部件,它提供了丰富的对齐和间距选项,使得在 Flutter 应用中实现各种垂直布局变得简单而高效。掌握 Column 的使用,可以帮助你创建出既美观又实用的布局界面。

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

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

相关文章

AJAX前端与后端交互技术知识点以及案例

Promise promise对象用于表示一个异步操作的最终完成&#xff08;或失败&#xff09;及其结果值 好处&#xff1a; 逻辑更清晰了解axios函数内部运作机制成功和失败状态&#xff0c;可以关联对应处理程序能解决回调函数地狱问题 /*** 目标&#xff1a;使用Promise管理异步任…

Linux-02

Linux常用命令&#xff1a; ls: 列出目录touch: 创建文件 touch test.txt echo:往文件写内容echo "i love linux" >>test.txtcd&#xff1a;切换目录pwd&#xff1a;显示目前的目录mkdir&#xff1a;创建一个新的目录 mkdir dai:创建目录dai mkdir -p test1/t…

基于springboot的物业服务平台的设计与实现

基于springboot的物业服务平台的设计与实现 摘 要:本文针对社区物业服务管理现状,采用B/S系统架构并选择MySQL数据库作为系统的数据存储系统,设计并实现一个以Spring Boot为后端框架、Vue为前端框架的社区物业服务管理平台。与传统的物业服务管理方式相比,该系统取代了传统…

印象笔记使用技巧

印象笔记&#xff08;Evernote&#xff09;是一款广泛使用的笔记应用&#xff0c;它帮助用户整理个人信息、文件和备忘录。以下是一些提高在印象笔记中效率的使用技巧&#xff1a; ### 1. 使用标签和笔记本组织笔记 - **建立笔记本**&#xff1a;为不同的项目或类别创建笔记本…

2024-Docker常用命令大全

Docker是一个流行的开源容器化平台&#xff0c;它允许开发人员将应用程序及其依赖项打包到可移植的容器中&#xff0c;并可以轻松地发布到任何Linux机器上。以下是Docker的一些常用命令总结&#xff1a; 一、帮助与启动类命令 启动Docker&#xff1a;sudo systemctl start do…

如何查看打包后的jar包启动方法main方法

背景 有时候我们在引用一个jar包的时候,想查看一个jar包的结构,这时候查看启动类就比较重要,因为一些关键配置是在启动类上的,这里教大家如何查看这个启动类(springboot项目) 步骤 首先打开jar包预览结构,可以使用解压缩工具直接双击打开或者预览结构 打开路径 META-INF/MA…

springfox.documentation.spi.DocumentationType没有OAS_30(从swagger2转到swagger3出现的问题)

直接开讲&#xff1a; 查看源码根本没有OAS_30的类型选择 右键package的springfox找到maven下载的包&#xff0c;打开到资源管理器 可以看到项目优先使用2版本的jar包&#xff0c;但是OAS_30只在3版本中才有&#xff0c;意思就是让项目优先使用以下图片中的3.0.0jar包 解决办法…

[AutoSar]BSW_Diagnostic_004 ReadDataByIdentifier(0x22)的配置和实现

目录 关键词平台说明背景一、配置DcmDspDataInfos二、配置DcmDspDatas三、创建DcmDspDidInfos四、创建DcmDspDids五、总览六、创建一个ASWC七、mapping DCM port八、打开davinci developer&#xff0c;创建runnabl九、生成代码 关键词 嵌入式、C语言、autosar、OS、BSW、UDS、…

系统和功能测试:确保软件的功能和易用性

目录 概述 功能测试 LOSED 模型 用例的设计 等价类划分 边界值分析 循环结构测试的综合方法 因果图 决策表 功能图 正交实验设计 易用性测试 内部易用性测试 外部易用性测试 功能性测试 正向功能性测试 负向功能性测试 功能性测试工具 结语 概述 在软件开发…

课堂练习——路由策略

需求&#xff1a;将1.1.1.0/24网段重发布到网络中&#xff0c;不允许出现次优路径&#xff0c;实现全网可达。 在R1上重发布1.1.1.0/24网段&#xff0c;但是需要过滤192.168.12.0/24和192.168.13.0/24在R2和R3上执行双向重发布 因为R1引入的域外路由信息的优先级为150&#xff…

8.微服务项目结合SpringSecurity项目结构

项目结构 acl_parent:创建父工程用来管理依赖版本 common service_base&#xff1a;工具类 spring_security: Spring Security相关配置 infrastructure api_gateway: 网关 service service_acl: 实现权限管理功能代码 acl_parent的pom.xml <?xml version"1.0" …

Go 之 interface接口理解

go语言并没有面向对象的相关概念&#xff0c;go语言提到的接口和java、c等语言提到的接口不同&#xff0c;它不会显示的说明实现了接口&#xff0c;没有继承、子类、implements关键词。go语言通过隐性的方式实现了接口功能&#xff0c;相对比较灵活。 interface是go语言的一大…

系统和非功能性测试:全面提升软件的性能和可靠性

目录 非功能性测试的需求 负载测试、压力测试和性能测试的概念 负载测试 压力测试 性能测试 负载测试 性能测试 压力测试 性能测试工具 兼容性测试 安全性测试 容错性测试 可靠性测试 结语 在软件开发中&#xff0c;系统测试和非功能性测试是确保软件质量的关键环…

vue组件循环依赖

1、两个组件相互引用导致的报错&#xff0c;代码如下&#xff1a; <!-- Component A --> <template><div>{{ message }}<B /></div> </template><script> import B from ./B.vue;export default {components: { B },data() {return…

STM32 | STC-USB驱动安装Windows 10(64 位)

Windows 10&#xff08;64 位&#xff09;安装方法 由于 Windows10 64 位操作系统在默认状态下&#xff0c;对于没有数字签名的驱动程序是不能安装成功的。所以在安装 STC-USB 驱动前&#xff0c;需要按照如下步骤&#xff0c;暂时跳过数字签名&#xff0c;即可顺利安装成功。…

Transformers中加载预训练模型的过程剖析(二)

接着 Transformers中加载预训练模型的过程剖析(一) 来讲模型初始和载入预训练权重。 初始化模型 经过以上两个步骤,对于下载的 shibing624/text2vec-base-chinese-paraphrase 预训练模型(底层的模型是ernie),我们从代码 model = AutoModel.from_pretrained(model_path) 成功…

镜像制作过程

镜像制作过程 Centos镜像制作 虚拟机系统安装将网卡转换为eth0在install安装时按tab健加入一下配置 net.ifnames=0 biosdevname=0

Flask-Login 实现用户认证

Flask-Login 实现用户认证 Flask-Login 是什么 Flask-Login 是 Flask 中的一个第三方库&#xff0c;用于处理用户认证和管理用户会话&#xff0c;它提供了一组工具和功能&#xff0c;使得在 Flask 应用程序中实现用户认证变得更加简单和方便。 如何使用 Flask-Login 1.安装…

XYCTF - web

目录 warm up ezMake ezhttp ezmd5 牢牢记住&#xff0c;逝者为大 ezPOP 我是一个复读机 ezSerialize 第一关 第二关 第三关 第一种方法&#xff1a; 第二种方法&#xff1a; ez?Make 方法一&#xff1a;利用反弹shell 方法二&#xff1a;通过进制编码绕过 ε…

使用迭代器进行遍历时不能进行元素的任何修改

记录一下 使用迭代器进行遍历时不能进行元素的任何修改 ArrayList<String> list new ArrayList<>();list.add("一");list.add("二");list.add("光");list.add("华"); // 遍历器Iterator<String> iterator …