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

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

在 Flutter 中,Row 是一个水平布局的小部件,用于将子控件沿着水平轴排列。Row 类似于 HTML 中的 div 标签,但仅限于水平布局。它非常适合用来创建行式布局,如表单输入、按钮组、标签栏等。

基础用法

Row 最基本的用法是将多个控件水平排列:

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

主轴对齐

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

开始对齐

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

居中对齐

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

两端对齐

Row(mainAxisAlignment: MainAxisAlignment.spaceBetween,// ... 子控件
)

均匀分布

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

交叉轴对齐

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

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

间距和边距

RowmainAxisSize 属性决定了 Row 的大小是否应该占据所有可用空间:

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

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

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

子控件间距

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

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

子控件大小调整

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

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

实例:水平表单

下面是一个使用 Row 创建水平表单的实例:

Row(children: <Widget>[Expanded(child: TextField(decoration: InputDecoration(labelText: 'Username',border: OutlineInputBorder(),),),),SizedBox(width: 16.0),Expanded(child: TextField(decoration: InputDecoration(labelText: 'Password',border: OutlineInputBorder(),),obscureText: true,),),],
)

实例:按钮组

使用 Row 创建一组水平排列的按钮:

Row(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[ElevatedButton(onPressed: () {},child: Text('Button 1'),),ElevatedButton(onPressed: () {},child: Text('Button 2'),),ElevatedButton(onPressed: () {},child: Text('Button 3'),),],
)

结语

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

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

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

相关文章

【linux软件基础知识】完全公平调度

完全公平调度&#xff08;CFS&#xff09; CFS根据每个进程相对于所有可运行线程总权重的权重为每个进程分配一个“时间片”。 CFS 的目标是近似“无限小”的调度持续时间&#xff0c;称为目标延迟。 较小的目标延迟可以提高交互性并接近完美的多任务处理&#xff0c;但其代价…

【Linux网络】Https【下】{CA认证/证书的签发与认证/安全性/总结}

文章目录 1.引入证书【为方案五铺垫】1.1再谈https1.2SSL/TLS1.3CA机构1.4理解数字签名1.4继续铺垫1.5方案五服务端申请证书回顾一二三回顾方案四方案五过程寻找方案五的漏洞客⼾端对证书进⾏认证 2.查看证书2.1查看浏览器的受信任证书发布机构2.2中间⼈有没有可能篡改该证书2.…

差分约束 C++ 算法例题

差分约束 差分约束 是一种特殊的 n 元一次不等式组&#xff0c;m 个约束条件&#xff0c;可以组成形如下的格式&#xff1a; { x 1 − x 1 ′ ≤ y 1 x 2 − x 2 ′ ≤ y 2 ⋯ x m − x m ′ ≤ y m \begin{cases} x_1-x_1^{} \le y_1 \\ x_2-x_2^{} \le y_2 \\ \cdots \\ x_…

数据库的要求

本来我是不准备写数据库的。而且是准备从零开始&#xff0c;学习python&#xff0c;学完语言学&#xff0c;会c和写作技法&#xff0c;再来学习数据库 那样做的复杂度是天量的&#xff0c;按部就班什么的具备&#xff0c;因为你完全不清楚什么时候就有这个基础和条件&#xff0…

【53】Camunda8-Zeebe核心引擎-Partitions分区与Internal processing内部处理

Partitions分区 在Zeebe中,所有数据都是基于分区的。(一个)分区本质上是一个关于流程事件的持久化流。在broker集群中,分区分布在节点之间,因此可以将其视为分片。启动/初始化Zeebe 集群时,用户可以配置所需的分区数。如果使用过Kafka,这部分内容是比较相似的。 每当部…

SpringBoot集成jxls2实现复杂(多表格)excel导出

核心依赖 需求 导出多个表格&#xff0c;包含图片&#xff0c;类似商品标签 1.配置模板 创建一个xlsx的模板文件&#xff0c;配置如下 该模板进行遍历了两次&#xff0c;因为我想要导出的数据分为两列展示&#xff0c;左右布局&#xff0c;一个循环实现不了&#xff0c;所以采…

【ARM64 常见汇编指令学习 20.1 -- ARM 伪指令 .include】

请阅读【嵌入式开发学习必备专栏】 文章目录 ARM 编译指令 .include 使用介绍a.s 文件b.s 文件小结 ARM 编译指令 .include 使用介绍 在UEFI&#xff08;统一可扩展固件接口&#xff09;开发中&#xff0c;通常会用到汇编语言文件&#xff08;.s 或 .S 文件&#xff09;。如果…

百面算法工程师 | 正则优化函数——BN、LN、Dropout

本文给大家带来的百面算法工程师是正则优化函数&#xff0c;文章内总结了常见的提问问题&#xff0c;旨在为广大学子模拟出更贴合实际的面试问答场景。在这篇文章中&#xff0c;我们将总结一些BN、LN、Dropout的相关知识&#xff0c;并提供参考的回答及其理论基础&#xff0c;以…

Linux kbdconfig命令教程:键盘设置与配置(附案例详解和注意事项)

Linux kbdconfig命令介绍 kbdconfig&#xff08;键盘配置&#xff09;是一个用于设置键盘类型的程序&#xff0c;提供图形化的操作界面。kbdconfig实际上是修改/etc/sysconfig/keyboard的键盘配置文件。 Linux kbdconfig命令适用的Linux版本 kbdconfig命令主要在Red Hat Lin…

电商秒杀系统-案例04-redis下的session控制

前言&#xff1a; 在现代的Web应用中&#xff0c;安全和高效的用户身份验证机制是至关重要的。本文将深入探讨基于令牌的用户登录会话机制&#xff0c;特别是在使用Redis进行会话管理的情景。通过这一案例实战&#xff0c;我们将了解令牌如何在用户身份验证过程中发挥核心作用&…

Linux dircolors命令教程:如何设置ls命令的颜色方案(附案例详解和注意事项)

Linux dircolors命令介绍 dircolors命令在Linux中用于设置ls命令显示文件和目录的颜色方案。它可以输出设置LS_COLORS环境变量的命令。 Linux dircolors命令适用的Linux版本 dircolors命令在大多数Linux发行版中都可用&#xff0c;包括Debian、Ubuntu、Alpine、Arch Linux、…

C++ | Leetcode C++题解之第85题最大矩形

题目&#xff1a; 题解&#xff1a; class Solution { public:int maximalRectangle(vector<vector<char>>& matrix) {int m matrix.size();if (m 0) {return 0;}int n matrix[0].size();vector<vector<int>> left(m, vector<int>(n, 0)…

【HCIP学习】BGP对等体组、聚合、路由反射器、联盟、团体属性

一、大规模BGP网络所遇到的问题 BGP对等体众多&#xff0c;配置繁琐&#xff0c;维护管理难度大 BGP路由表庞大&#xff0c;对设备性能提出挑战 IBGP全连接&#xff0c;应用和管理BGP难度增加&#xff0c;邻居数量过多 路由变化频繁&#xff0c;导致路由更新频繁 二、解决大…

使用QT-QSqlQuery::value()遇到的问题

在实现客户端间好友添加功能时&#xff0c;我通过以下函数想实现数据库对好友信息的保存 bool OpeDB::handleAddFriend_repound(const char *pername, const char *name) { // pername 被添加方 name 申请添加方 qDebug() << pername << " " &l…

Nginx(简洁版)

基本配置 worker_processes 1; //默认为1&#xff0c;表示开启一个业务进程 events //事件驱动模块&#xff08;&#xff09;{worker_connections 1024; //单个业务进程可接受连接数 } http{include mime.types; // 引入http mime类型&#xff08;在外部已经定义好&#xff0c…

Java数组——冒泡排序

冒泡排序是最出名的排序算法之一&#xff0c;总共有八大排序。 冒泡排序代码并不复杂&#xff0c;共两层循环&#xff0c;外层冒泡轮数&#xff0c;里层依次比较。 算法步骤&#xff1a; 1. 比较数组中两个相邻元素&#xff0c;如果第一个元素比第二个元素大&#xff0c;交换…

如何在huggingface上申请下载使用llama2/3模型

1. 在对应模型的huggingface页面上提交申请 搜索对应的模型型号 登录huggingface&#xff0c;在模型详情页面上&#xff0c;找到这个表单&#xff0c;填写内容&#xff0c;提交申请。需要使用梯子&#xff0c;country填写梯子的位置吧(比如美国&#xff09; 等待一小时左右…

SEMI启动SiC专有技术项目

公司郑重声明&#xff0c;其正致力于筛选那些能够稳定输出、且可重复使用的关键参数性能。SEMI&#xff0c;这家SiC领域的佼佼者&#xff0c;已经启动了一项独具匠心的专有技术&#xff08;KGD&#xff09;筛选程序。该程序旨在为客户提供高品质的、经过严格电气分类与光学检验…

基于python的旅游爬虫可视化与实现

摘要 本项目为基于python的旅游爬虫可视化的设计与实现&#xff0c;项目以Web系统形式展示&#xff0c;利用Xpath爬虫爬取去哪儿网针对旅游业的需求&#xff0c;对国内热门旅游景点数据可视化系统&#xff0c;将爬取好的数据保存为CSV文件&#xff0c;再通过ORM框架导入MySQL数…

Python图形界面(GUI)Tkinter笔记(五):控件的定位(3)

Tkinter(GUI)设计图形界面时有三种控件的包装方法去定位各控件在窗口(父容器、根窗口)上的位置。 【1】pack()方法:用方位来定位位置,类似于Word文档中的文字对齐方式。 【2】grid()方法:用二维表格式的坐标值定位,类似于EXCEL单元格坐标。 【3】place()方法:用窗口…