【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.mzph.cn/pingmian/36943.shtml

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

相关文章

最新扣子(Coze)实战案例:图像流工具之空间风格化,完全免费教程

🧙‍♂️ 大家好,我是斜杠君,手把手教你搭建扣子AI应用。 📜 本教程是《AI应用开发系列教程之扣子(Coze)实战教程》,完全免费学习。 👀 关注斜杠君,可获取完整版教程。👍&#x1f3f…

Python的Django部署uwsgi后自签名实现的HTTPS

通过SSL/TLS来加密和客户端的通信内容。提高网络安全性,但是会损耗部分的服务器资源。 HTTPS 的原理图。 web.key 是打死也不能给其他人的。一定要保存好。里面主要是私钥。是各种认证的根基。本地测试的话生成1024的即可,如果是生产环境推荐使用2048。…

高级运维工程师讲述银河麒麟V10SP1服务器加固收回权限/tmp命令引起生产mysql数据库事故实战

高级运维工程师讲述银河麒麟V10SP1服务器加固收回权限/tmp命令引起生产MySql数据库事故实战 一、前言 作为运维工程师经常会对生产服务器进行安全漏洞加固,一般服务厂商、或者甲方信息安全中心提供一些安全的shell脚本,一般这种shell脚本都是收回权限&…

查看当前服务器Kafka是否已启动

# 查看当前系统中的java进程 # -ml 详细内容 jps -ml | grep Kafka

《人人都是产品经理》:项目坎坷的一生(下)

《人人都是产品经理》:项目坎坷的一生(下) 文档只是手段模板的作用多人协作与版本管理 流程只不过是手段这么多评审,可以省嘛? 敏捷更是手段有计划、更拥抱变化迭代周期内尽量不增加任务 集中工作、小步快跑持续细化需…

开放式耳机哪个牌子好?2024热门红榜开放式耳机测评真实篇!

当你跟朋友们聊天时,他们经常抱怨说长时间戴耳机会令耳朵感到不适,后台也有很多人来滴滴我,作为一位致力于开放式耳机的测评博主,在对比了多款开放式耳机之后,你开放式耳机在保护听力方面确实有用。开放式的设计有助于减轻耳道内的…

【EXCEL技巧】Excel如何将数字前面的0去掉

Excel文件中经常会遇到数据是0001345这种,那么,如何将数字前面的0去掉呢?今天和大家分享方法。 首先,选中一列空的单元格,然后在单元格中输入公式TEXT(D3,0),这里的D3指的是前面带有0的数据的位置 回车之后…

DAMA学习笔记(三)-数据架构

1.引言 架构是构建一个系统(如可居住型建筑)的艺术和科学,以及在此过程中形成的成果——系统本身。用通俗的话说,架构是对组件要素有组织的设计,旨在优化整个结构或系统的功能、性能、可行性、成本和用户体验。 对于架…

如何在SOLIDWORKS中高效管理文件属性?

当我们完成零件设计,出工程图后,发现零件中部分属性值需修改,或漏掉一些属性值需要添加,也可能老旧的设计图纸需要统一规范。 这时我们用SOLIDWORKS自带的属性标签工具就可以快速完成文件的属性编辑。 1打开工程图纸,…

生鲜水果行业wordpress主题

水果蔬菜wordpress外贸自建站模板 水果、脐橙、牛油果、菠萝、凤梨、鲜枣、苹果、芒果、瓜果、百香果wordpress外贸独立站模板。 https://www.jianzhanpress.com/?p3932 生鲜wordpress外贸出口网站模板 水果、蔬菜、肉蛋奶、水产、干货等生鲜产品wordpress外贸出口公司网站…

Postman 怎么测接口?实用教程

在当前,API(应用程序接口)的使用变得越来越普遍。其中,HTTP/HTTPS API 是最常见的一种。无论是开发前端还是后端,测试 API 都是一个关键环节。Postman 是一种流行且强大的 API 测试工具,能够帮助开发人员轻…

好用的兼容性测试工具推荐

兼容性测试确保软件在不同系统和环境中的一致性。本指南探讨了开发人员和QA专业人员有效检测和解决问题的工具,从而提高应用程序的稳健性和用户满意度。 好用的兼容性测试工具推荐 1.Lambda测试 它是一个由AI驱动的测试编排和执行平台,可让您使用超过300…

多端圈子校园论坛系统源码搭建教程,新手轻松搭建!

圈子社交系统以用户为中心,提供直观易用的界面和流程。用户可轻松注册、浏览内容、加入或创建圈子,并与其他用户互动。系统强化兴趣圈子功能,智能推荐相关圈子。同时确保隐私和安全,采用先进的安全措施保护用户数据。系统需持续优…

linux rocky9.2系统搭建sqle数据库审核平台

文章目录 前言一、环境准备?二、开始部署前言 关于SQLE SQLE 是由上海爱可生信息技术股份有限公司 开发并开源,支持SQL审核、索引优化、事前审核、事后审核、支持标准化上线流程、原生支持 MySQL 审核且数据库类型可扩展的 SQL 审核工具。 产品特色 支持通过插件的形式扩展…

基于大数据架构的内容安全风控与分析

1 项目介绍 1.1 研究目的和意义 在数字化时代,内容安全成为了互联网企业面临的一个重要挑战。海量数据的产生与传播,伴随着不良信息和网络安全威胁的日益增加。因此,本课题旨在通过构建一个基于大数据架构的内容安全风控与分析系统&#xf…

早期结直肠癌筛查需重视,华大基因肿瘤检测助力精准医学发展

当前,结直肠癌已跃居中国肿瘤发病率的第二位,且多数患者在发现时已是晚期,其生存率相对较低。据国家癌症中心最新数据的揭示,2022年新增的结直肠癌病例数量高达51.71万,其中,死亡人数则达到了24万。值得注意…

基于MindSpore Quantum的Grover搜索算法和龙算法

如果你听过量子计算,那么你一定听说过Grover搜索算法。1996年,Lov Grover [1] 提出了Grover搜索算法,它是一种利用量子状态的叠加性进行并行计算并实现加速的算法。Grover搜索算法被公认为是继Shor算法后的第二大量子算法,也是第一…

解码数智升级良方:中国一拖、中原传媒、神火股份等企业数字化实践分析

大模型、AI等技术的成熟以及政策法规的细化,数据资源的权属论证、合规确权、资产论证等环节逐渐走向实用性、价值化。 而伴随着“业财税数融”综合性数字化成为企业数字化转型的主流选择,财务部门的纽带属性被放大,财务数据的融合能力成为企业…

查普曼大学团队使用惯性动捕系统制作动画短片

道奇电影和媒体艺术学院是查普曼大学的知名学院,同时也是美国首屈一指的电影学院之一,拥有一流电影制作工作室。 最近,道奇学院的一个学生制作团队接手了一个项目,该项目要求使用真人动作、视觉效果以及真人演员和CG角色之间的互动…

Reflexion:通过语言反馈增强的智能体

Reflexion: Language Agents with Verbal Reinforcement Learning Reflexion: language agents with verbal reinforcement learninghttps://proceedings.neurips.cc/paper_files/paper/2023/hash/1b44b878bb782e6954cd888628510e90-Abstract-Conference.html 1.概述 最近,Re…