【Android】【Compose】Compose里面的Row和Column的简单使用

内容

Row和Column的简单使用方式和常用属性含义

Row

在 Jetpack Compose 中,Row 是一种用于在水平方向排列子元素的布局组件。它类似于传统 Android 中的 LinearLayout,但更加灵活和强大。

Row的代码

@Composable
inline fun Row(modifier: Modifier = Modifier,horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,verticalAlignment: Alignment.Vertical = Alignment.Top,content: @Composable RowScope.() -> Unit
) {val measurePolicy = rowMeasurePolicy(horizontalArrangement, verticalAlignment)Layout(content = { RowScopeInstance.content() },measurePolicy = measurePolicy,modifier = modifier)
}
Row 的属性和用法
基本用法:
Row(modifier = Modifier.fillMaxWidth(),horizontalArrangement = Arrangement.SpaceBetween,verticalAlignment = Alignment.CenterVertically
) {// 子元素
}

modifier:用于指定 Row 的大小、填充方式等属性的修饰符。
horizontalArrangement:水平排列方式,例如 Arrangement.SpaceBetween 表示子元素之间均匀分布。
verticalAlignment:垂直对齐方式,例如 Alignment.CenterVertically 表示子元素在垂直方向上居中对齐。

子元素:

在 Row 的大括号内添加子元素,可以是任何支持 Compose 的组件,如 Text、Image、Button 等。

属性:
modifier:

修饰符,可以控制 Row 的大小、填充等。

horizontalArrangement:

控制子元素在水平方向的排列方式,常见的有:
Arrangement.Start:从开始位置对齐(默认)。
Arrangement.End:末尾对齐。
Arrangement.Center:居中对齐。
Arrangement.SpaceEvenly:均匀分布。
Arrangement.SpaceAround:子元素周围均匀分布空间。
Arrangement.SpaceBetween:子元素之间均匀分布。

verticalAlignment:

控制子元素在垂直方向上的对齐方式,常见的有:
Alignment.Top:顶部对齐。
Alignment.Bottom:底部对齐。
Alignment.CenterVertically:垂直居中对齐。
Alignment.CenterVertically:垂直居中对齐。
Alignment.Bottom:底部对齐。

示例:
Row(modifier = Modifier.fillMaxWidth().padding(16.dp),horizontalArrangement = Arrangement.SpaceBetween,verticalAlignment = Alignment.CenterVertically
) {Text("Left Item")Spacer(modifier = Modifier.width(16.dp))Text("Right Item")
}
显示效果

在这里插入图片描述
这个示例中,两个 Text 组件会被放置在 Row 中,左边的文本会靠左对齐,右边的文本会靠右对齐,并且它们之间有一个 16dp 的空白间隔。

Column

在 Jetpack Compose 中,Column 是一种用于垂直排列子元素的布局组件,类似于传统 Android 中的 LinearLayout,但更为灵活和强大。

Column的代码

@Composable
inline fun Column(modifier: Modifier = Modifier,verticalArrangement: Arrangement.Vertical = Arrangement.Top,horizontalAlignment: Alignment.Horizontal = Alignment.Start,content: @Composable ColumnScope.() -> Unit
) {val measurePolicy = columnMeasurePolicy(verticalArrangement, horizontalAlignment)Layout(content = { ColumnScopeInstance.content() },measurePolicy = measurePolicy,modifier = modifier)
}
Column 的属性和用法
基本用法:
Column(modifier = Modifier.fillMaxSize(),verticalArrangement = Arrangement.Center,horizontalAlignment = Alignment.CenterHorizontally
) {// 子元素
}

modifier:用于指定 Column 的大小、填充方式等属性的修饰符。
verticalArrangement:垂直排列方式,例如 Arrangement.Center 表示子元素在垂直方向上居中排列。
horizontalAlignment:水平对齐方式,例如 Alignment.CenterHorizontally 表示子元素在水平方向上居中对齐。

子元素:

在 Column 的大括号内添加子元素,可以是任何支持 Compose 的组件,如 Text、Image、Button 等。

属性:
modifier:

修饰符,可以控制 Column 的大小、填充等。

verticalArrangement:

控制子元素在垂直方向上的排列方式,常见的有:
Arrangement.Top:顶部对齐。
Arrangement.Bottom:底部对齐。
Arrangement.Center:垂直居中对齐。
Arrangement.SpaceEvenly:均匀分布。
Arrangement.SpaceAround:子元素周围均匀分布空间。
Arrangement.SpaceBetween:子元素之间均匀分布。

horizontalAlignment:

控制子元素在水平方向上的对齐方式,常见的有:
Alignment.Start:开始位置对齐(默认)。
Alignment.End:末尾对齐。
Alignment.CenterHorizontally:水平居中对齐。
Alignment.CenterHorizontally:水平居中对齐。

示例:
Column(modifier = Modifier.fillMaxSize().padding(16.dp),verticalArrangement = Arrangement.Center,horizontalAlignment = Alignment.CenterHorizontally
) {Text("Top Item")Spacer(modifier = Modifier.height(16.dp))Text("Middle Item")Spacer(modifier = Modifier.height(16.dp))Text("Bottom Item")
}
显示效果

在这里插入图片描述

区别
Column:

垂直排列:Column 主要用于垂直方向上排列子元素。
默认排列方式:子元素从上到下依次排列。
属性:可以设置垂直对齐方式 (verticalArrangement),控制子元素在垂直方向上的布局方式,例如居中、顶部对齐、底部对齐等。
示例应用:适合于垂直列表或者页面上垂直排列的 UI 元素。

Row:

水平排列:Row 主要用于水平方向上排列子元素。
默认排列方式:子元素从左到右依次排列。
属性:可以设置水平对齐方式 (horizontalArrangement),控制子元素在水平方向上的布局方式,例如居中、左对齐、右对齐等。
示例应用:适合于水平列表或者页面上水平排列的 UI 元素。

共同点:

子元素:两者的子元素可以是任何支持 Compose 的 UI 组件,例如 Text、Image、Button 等。
修饰符:都支持使用 modifier 设置大小、填充和其他样式属性。
灵活性:都可以嵌套使用,例如在一个 Column 中放置一个或多个 Row,以实现复杂的布局结构。

和传统的 LinearLayout 对比
声明式 UI:

Compose:Jetpack Compose 是一种声明式 UI 框架,通过 Kotlin 代码描述 UI 的结构和行为,而不是像传统的 XML 布局文件。这种方式更加灵活,使得 UI 的构建和修改更加直观和便捷。
LinearLayout:LinearLayout 是 Android 原生布局系统中的一部分,通过 XML 文件描述 UI 结构和属性,具有一定的静态性,修改布局结构和属性相对复杂。

性能优化:

Compose:Jetpack Compose 提供了基于函数式响应式编程的 UI 更新机制,能够更高效地处理 UI 的重绘和局部更新,以确保性能的最大化。
LinearLayout:在传统的 Android 开发中,布局的重绘和更新机制可能相对复杂,需要开发者手动管理视图的状态和更新。

布局属性:

Compose:Column 和 Row 通过函数式 API 提供了更丰富和灵活的布局属性和修饰符,例如 modifier 和对齐方式的指定,使得布局更加可控和可定制。
LinearLayout:LinearLayout 通过 XML 的属性来控制子元素的排列方式和对齐方式,相对于 Compose 的代码方式来说,灵活性较低。

组合性和可重用性:

Compose:Compose 提倡组合和可重用性,可以通过自定义组件和组合多个小组件来构建复杂的 UI 结构,使得代码更具可维护性和可扩展性。
LinearLayout:传统的 LinearLayout 也支持布局的组合和嵌套,但相较于 Compose 的函数式组合方式来说,复用和灵活性有所限制。

Jetpack Compose 对于有传统 Android 开发经验的开发者来说可能确实会有一些不适应的感觉,但是感觉以后Compose应该是一种大势所趋吧,不学是不行的,慢慢来学习吧,Jetpack Compose 是一种全新的声明式 UI 框架,与传统的基于 XML 的布局系统截然不同。它采用了函数式编程的方式来描述 UI,这需要习惯于用代码而不是 XML 来构建和定义界面。
对于习惯了 XML 布局和 View 控制的人来说,这种范式转变可能需要一定的时间和适应过程。当初学习kotlin的时候也是这样,很不习惯这样的写法。感觉现在学习Compose的一个问题就是,公司根本不用,嘿嘿。

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

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

相关文章

LLM大模型实战 —— DB-GPT阿里云部署指南

简介: DB-GPT 是一个实验性的开源应用,它基于FastChat,并使用vicuna-13b作为基础模型, 模型与数据全部本地化部署, 绝对保障数据的隐私安全。 同时此GPT项目可以直接本地部署连接到私有数据库, 进行私有数据处理, 目前已支持SQL生…

WPF文本框中加提示语

效果&#xff1a; WPF中貌似不能像winfrom里一样直接加提示语&#xff0c;需要使用TextBox.Style&#xff0c;将Trigger标签插入进去。 贴源码&#xff1a; <WrapPanel Name"TakeOverExpressNo1"><Label Content"物流单号&#xff1a;"><…

AV Foundation学习笔记二 - 播放器

ASSets AVFoundation框架的最核心的类是AVAsset&#xff0c;该类是整个AVFoundation框架设计的中心。AVAsset是一个抽象的&#xff08;意味着你不能调用AVAsset的alloc或者new方法来创建一个AVAsset实例对象&#xff0c;而是通过该类的静态方法来创建实例对象&#xff09;、不…

python中的并发编程

文章目录 并发编程1、进程、线程与协程【1】进程概念【2】线程的概念线程的生命周期进程与线程的区别 【3】协程(Coroutines) 2、多线程实现【1】threading模块【2】线程应用案例【3】线程池【4】互斥锁(同步锁)【5】线程队列&#xff08;1&#xff09;队列的基本语法&#xff…

Logback-打印方法名及代码行号

背景 公司产品使用了logback作为日志输出框架&#xff0c;日志输出的pattern里配置了打印调用方法名及代码行号的配置&#xff0c;但是实际输出的日志方法名总是显示? 在强迫症的驱使下&#xff0c;开启了探秘之旅 Logback版本 1.2.3 项目中Logging.pattern配置如下&#xff1…

经典排序算法详解

目录 创作不易&#xff0c;如对您有帮助&#xff0c;还望一键三连&#xff0c;谢谢&#xff01; 前言 学习目标&#xff1a; 直接插入排序 基本思想&#xff1a; 代码 希尔排序&#xff1a; gap取值 代码 特性总结 选择排序 基本思想 代码 堆排序 思想 代码 冒…

【PHP项目实战训练】——后台-RBAC权限管理原理

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;开发者-曼亿点 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 曼亿点 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a…

Ubuntu多显示器设置不同缩放比例

Ubuntu多显示器设置不同缩放比例 设备问题解决方案 设备 笔记本屏幕分辨率为2560 \times 1600&#xff0c;外接显示器的分辨率为3840 \times 2160。 问题 Ubuntu默认的显示器设置中&#xff0c;缩放仅能选择100%&#xff0c;200%&#xff0c;300%&#xff0c;400%。假…

北邮《计算机网络》蒋老师思考题及答案-传输层

蒋yj老师yyds&#xff01; 答案自制&#xff0c;仅供参考&#xff0c;欢迎质疑讨论 问题一览 传输层思考题P2P和E2E的区别使用socket的c/s模式通信&#xff0c;流控如何反映到编程模型三次握手解决什么问题举一个两次握手失败的例子为什么链路层是两次握手而非三次&#xff1f;…

求生之路史低入手 教你怎么使用求生之路创意工坊提高体验性

求生之路是一款抵御丧尸的第一人称射击游戏&#xff0c;四名幸存者联机配合&#xff0c;在现代的城市中&#xff0c;击败各种丧尸还有强大的变种人BOSS&#xff0c;虽然是十几年前的游戏&#xff0c;但是毫不夸张的说&#xff0c;游戏丝毫不过时&#xff0c;目前steam夏促&…

数据结构5---矩阵和广义表

一、矩阵的压缩存储 特殊矩阵:矩阵中很多值相同的元素并且它们的分布有一定的规律。 稀疏矩阵:矩阵中有很多零元素。压缩存储的基本思想是: (1)为多个值相同的元素只分配一个存储空间; (2)对零元素不分配存储空间。 1、特殊矩阵的压缩存储 &#xff08;1&#xff09;对称矩…

数据库自动备份到gitee上,实现数据自动化备份

本人有个不太好的习惯&#xff0c;每次项目的数据库都是在线上创建&#xff0c;Navicat 连接线上数据库进行处理&#xff0c;最近有一个项目需要二次升级&#xff0c;发现老项目部署的服务器到期了&#xff0c;完蛋&#xff0c;数据库咩了&#xff01;&#xff01;&#xff01;…

从 Hadoop 迁移,无需淘汰和替换

我们仍然惊讶于有如此多的客户来找我们&#xff0c;希望从HDFS迁移到现代对象存储&#xff0c;如MinIO。我们现在以为每个人都已经完成了过渡&#xff0c;但每周&#xff0c;我们都会与一个决定进行过渡的主要、高技术性组织交谈。 很多时候&#xff0c;在这些讨论中&#xff…

游戏AI的创造思路-技术基础-深度学习(5)

继续深度学习技术的探讨&#xff0c;填坑不断&#xff0c;头秃不断~~~~~ 目录 3.5. 自编码器&#xff08;AE&#xff09; 3.5.1. 定义 3.5.2. 形成过程 3.5.3. 运行原理 3.5.3.1.运行原理及基本框架 3.5.3.2. 示例代码 3.5.4. 优缺点 3.5.5. 存在的问题和解决方法 3.5…

开源模型应用落地-FastAPI-助力模型交互-WebSocket篇(三)

一、前言 使用 FastAPI 可以帮助我们更简单高效地部署 AI 交互业务。FastAPI 提供了快速构建 API 的能力,开发者可以轻松地定义模型需要的输入和输出格式,并编写好相应的业务逻辑。 FastAPI 的异步高性能架构,可以有效支持大量并发的预测请求,为用户提供流畅的交互体验。此外,F…

鸿蒙开发 之 健康App案例

1.项目介绍 该项目是记录用户日常饮食情况&#xff0c;以及针对不同食物摄入营养不同会有对应的营养摄入情况和日常运动消耗情况&#xff0c;用户可以自己添加食品以及对应的热量。 1.1登陆页 1.2饮食统计页 1.3 食物列表页 2.登陆页 2.1自定义弹框 import preferences from oh…

使用自定义的shiro密码匹配器CredentialsMatcher完成密码验证

今天突然想研究一下shiro怎么匹配用户的密码。 我们使用shiro的API登录时&#xff0c;会先创建一个令牌对象&#xff0c;而经常用的令牌对象是UsernamePasswordToken&#xff0c;把用户输入的用户名和密码作为参数构建一个UsernamePasswordToken&#xff0c;然后通过Subject.l…

十二、Yocto集成ROS2 app程序(package)

文章目录 Yocto集成ROS2 app程序1. 添加一个ros2 package应用程序2. 添加bb文件集成app应用程序 Yocto集成ROS2 app程序 本篇文章为基于raspberrypi 4B单板的yocto实战系列的第十二篇文章&#xff1a; 一、yocto 编译raspberrypi 4B并启动 二、yocto 集成ros2(基于raspberrypi…

stable diffusion 模型和lora融合

炜哥的AI学习笔记——SuperMerger插件学习 - 哔哩哔哩接下来学习的插件名字叫做 SuperMerger,它的作用正如其名,可以融合大模型或者 LoRA,一般来说会结合之前的插件 LoRA Block Weight 使用,在调整完成 LoRA 模型的权重后使用改插件进行重新打包。除了 LoRA ,Checkpoint 也…

Kafka入门到精通(三)-Kafka

Kafka简介 Kafka是由Apache软件基金会开发的一个开源流处理平台&#xff0c;由Scala和Java编写。Kafka是一种高吞吐量的分布式发布订阅消息系统&#xff0c;它可以处理消费者在网站中的所有动作流数据。 这种动作&#xff08;网页浏览&#xff0c;搜索和其他用户的行动&#xf…