Compose | UI组件(九) | Column,Row - 线性布局

文章目录

  • 前言
    • Column 的含义
    • Column 的使用
      • 给 Column 加边框
      • Column 使用 verticalArrangement 定位子项位置
      • Column 使用 horizontalAlignment 定位子组件位置
      • Column 设置了大小,可使用Modifier.align修饰符设置子组件对齐方式
    • Row 的含义
      • Row 的使用
  • 总结


前言

传统的View中使用的线性布局是 LinearLayout,Compose根据纵向和横向的方向不同分为 ColumnRow 两种组件


Column 的含义

Column 是一个垂直线性布局组件,可将子组件按顺序从上到下垂直排列

@Composable
inline fun Column(modifier: Modifier = Modifier,                                //修饰符verticalArrangement: Arrangement.Vertical = Arrangement.Top, //垂直位置horizontalAlignment: Alignment.Horizontal = Alignment.Start, //水平位置content: @Composable ColumnScope.() -> Unit                  //垂直作用域
)

注:Column 默认 垂直位置靠上,水平位置靠左

Column 的使用

Column{Text(text     = "Hello,World",style    = MaterialTheme.typography.titleMedium)Text(text = "Jetpack Compose")
}

给 Column 加边框

Column(modifier = Modifier.border(1.dp, Color.Red)){Text(text     = "Hello,World",style    = MaterialTheme.typography.titleMedium)Text(text = "Jetpack Compose")
}

注:
加了边框后可以看出来,内容是包裹起来的

Column默认是没有指定宽高的,也就无法定位 Column 中的 子组件的位置定位 ,也就是无法使用 verticalArrangementhorizontalAlignment 定位 子组件位置

如果宽度和高度都指定了,就可以使用 verticalArrangementhorizontalAlignment 定位 子组件位置

Column 使用 verticalArrangement 定位子项位置

Column(modifier = Modifier.border(1.dp, Color.Red).size(200.dp),verticalArrangement = Arrangement.Center){Text(text     = "Hello,World",style    = MaterialTheme.typography.titleMedium)Text(text = "Jetpack Compose")
}

注:Arrangement.Center 为居中

Column 使用 horizontalAlignment 定位子组件位置

Column(modifier = Modifier.border(1.dp, Color.Red).size(200.dp),verticalArrangement = Arrangement.Center,horizontalAlignment = Alignment.CenterHorizontally){Text(text     = "Hello,World",style    = MaterialTheme.typography.titleMedium)Text(text = "Jetpack Compose")
}

注:Alignment.CenterHorizontally 为水平居中

Column 设置了大小,可使用Modifier.align修饰符设置子组件对齐方式

Column(modifier = Modifier.border(1.dp, Color.Red).size(200.dp),verticalArrangement = Arrangement.Center){Text(text     = "Hello,World",style    = MaterialTheme.typography.titleMedium,modifier = Modifier.align(Alignment.CenterHorizontally))Text(text = "Jetpack Compose")
}

注:modifier = Modifier.align(Alignment.CenterHorizontally)) 设置子组件 水平居中Modifier.align 修饰符优先于 ColumnhorizontalAlignment 参数

Row 的含义

Row组件是水平线性布局组件,可将子组件按顺序从左往右 水平排列

@Composable
inline fun Row(modifier: Modifier = Modifier,                                     //修饰符horizontalArrangement: Arrangement.Horizontal = Arrangement.Start, //水平位置verticalAlignment: Alignment.Vertical = Alignment.Top,             //垂直位置content: @Composable RowScope.() -> Unit                           //水平作用域
)

Row 的使用

Row(modifier = Modifier.fillMaxWidth().padding(top = 30.dp),horizontalArrangement = Arrangement.SpaceAround) {IconButton(onClick = {  }) {Icon(imageVector = Icons.Filled.Favorite, contentDescription = null)}IconButton(onClick = {  }) {Icon(imageVector = Icons.Filled.ShoppingCart, contentDescription = null)}IconButton(onClick = {  }) {Icon(imageVector = Icons.Filled.MailOutline, contentDescription = null)}
}

注:Arrangement.SpaceAround 内容 撑满Row的宽度,最左边和最右边的组件与Row的间距是 组件与组件之间的间距的一半


总结

  1. Column 是一个垂直线性布局组件,可将子组件按顺序从上到下垂直排列
  2. Column和Row 默认是包裹的,需要设置宽高才可以定子组件具体位置显示
  3. Column 通过 verticalArrangement 定位垂直位置
  4. Row 是水平线性布局组件,可将子组件按顺序从左往右 水平排列
  5. Row 通过 horizontalArrangement 定位水平位置

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

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

相关文章

“值得一试的六个浏览器扩展推荐|让你的上网更加便捷和有趣!”

iTab新标签页(免费ChatGPT) iTab是新一代组件式标签页的首创者,简洁美观高效无广,是您打造个人学习工作台的浏览器必备插件。 详情请见: iTab新标签页(免费ChatGPT) - Microsoft Edge Addons AdGuard 广告拦截器 AdGuard 广告拦截器可有效的…

vueRouter中scrollBehavior实现滚动固定位置

使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。 vue-router 能做到,而且更好,它让你可以自定义路由切换时页面如何滚动。 注意: 这个功能只在 HTML5 h…

GD32移植FreeRTOS+CLI过程记录

背景 之前我只在STM32F0上基于HAL库和CubeMX移植FreeRTOS,但最近发现国产化替代热潮正盛,许多项目都有国产化器件指标,而且国产单片机确实比意法的便宜,所以也买了块兆易创新的GD32F303开发板,试一试它的优劣。虽然GD…

详细PyTorch安装步骤

PyTorch的安装步骤可以参考以下教程: 安装Anaconda:首先需要安装Anaconda,这是一个Python发行版,包含了Python、pip、conda等常用工具。可以从Anaconda官网下载并安装最新版本的Anaconda。 创建虚拟环境:Anaconda中可…

【Web前端实操17】导航栏效果——滑动门

滑动门 定义: 类似于这种: 滑到导航栏的某一项就会出现相应的画面,里面有对应的画面出现。 箭头图标操作和引用: 像一些图标,如果需要的话,可以找字体图标,比如阿里巴巴矢量图标库:iconfont-阿里巴巴矢量图标库 选择一个——>添加至购物车——>下载代码 因…

Facebook的智能时代:AI技术在社交中的崛起

随着科技的快速发展,人工智能(AI)技术已经深刻改变了我们的生活方方面面,而社交媒体领域也不例外。在这个信息爆炸的时代,Facebook正以令人瞩目的速度推动着AI技术在社交领域的崛起。本文将深入探讨Facebook如何在智能…

物化视图(Materialized view)详解

什么是物化视图 物化视图(Materialized View)是一种预先计算和存储的查询结果,类似于数据库中的表。与普通视图不同,物化视图在创建时会将查询的结果物理存储在内存或磁盘上,而不是在查询时动态计算。 物化视图与视图…

STM32控制DS18B20温度传感器获取温度

时间记录:2024/1/28 一、DS18B20温度传感器介绍 (1)测温范围-55℃~125℃,在-10℃到85℃范围内误差为0.4 (2)返回的温度数据为16位二进制数据 (3)STM32和DS18B20通信使用单总线协议…

Nginx解析漏洞复现

首先这个漏洞不是软件或代码的问题,是认为疏忽造成的。 一、环境搭建 从vulhub上面下载vulhub-master.zip文件,上传到服务器中,或者直接在服务器下载。 unzip vulhub-master.zip 进入漏洞目录 cd /vulhub-master/vulhub-master/nginx/ng…

【electron】打包问题处理

目录 项目无法在win7执行场景尝试处理 项目无法在win7执行 场景 使用electron25.0.1、electron-builder24.2.1,打出来的项目在win7系统上跑不起来,报错无法定位程序输入点DiscardVirtualMemoty于动态链接库KERNEL32.dll上。 尝试处理 通过百度发现ele…

高分文献解读|乳酸通过与可溶性腺苷酸环化酶结合调控铁代谢

乳酸(LA)的过量产生可能发生在运动期间或者许多疾病中,例如癌症中。个人伴有高乳酸血症的患者常表现为贫血、血清铁减少以及一种铁代谢关键调控因子—铁调素(hepcidin)升高。然而,目前尚不清楚乳酸是否以及如何调节铁调素的表达。…

微服务舞台上的“三步曲“:Spring Cloud 服务注册、服务发现与服务调用

在当今软件开发的舞台上,微服务架构已然成为引领潮流的主角。而在这场微服务的大戏中,Spring Cloud 以其强大的工具集成为关键演员,为我们呈现了一个完美的"三步曲":服务注册、服务发现与服务调用。 第一步&#xff1a…

算法39:统计全 1 子矩形(力扣1504)----单调栈

题目: 给你一个 m x n 的二进制矩阵 mat ,请你返回有多少个 子矩形 的元素全部都是 1 。 示例 1: 输入:mat [[1,0,1],[1,1,0],[1,1,0]] 输出:13 解释: 有 6 个 1x1 的矩形。 有 2 个 1x2 的矩形。 有 3 个 2x1 的矩…

ERP定制费用怎么算?详解跨境电商成本控制策略

在全球化数字经济的浪潮中,跨境电商行业具有潜在的高利润和巨大的发展空间,吸引着众多创业者的关注和投入。然而,与潜在利润相伴随的是种种挑战,成本控制便是其中关键的一环。在这一行业中,ERP定制费用作为一个重要的成…

第十三章认识Ajax(四)

认识FormData对象 FormData对象用于创建一个表示HTML表单数据的键值对集合。 它可以用于发送AJAX请求或通过XMLHttpRequest发送表单数据。 以下是FormData对象的一些作用: 收集表单数据:通过将FormData对象与表单元素关联,可以方便地收集表…

C++笔记之RTTI、RAII、MVC、MVVM、SOLID在C++中的表现

C++笔记之RTTI、RAII、MVC、MVVM、SOLID在C++中的表现 —— 杭州 2024-01-28 code review! 文章目录 C++笔记之RTTI、RAII、MVC、MVVM、SOLID在C++中的表现1.RTTI、RAII、MVC、MVVM、SOLID简述2.RAII (Resource Acquisition Is Initialization)3.RTTI (Run-Time Type Informat…

js中将回调地狱改装成promise方式的函数

概述: 回调地狱(Callback Hell)是指在异步编程中,多层嵌套的回调函数导致代码难以理解、维护和扩展的情况。 代码展示: ajax({url: 我是第一个请求,success (res) {// 现在发送第二个请求ajax({url: 我是第二个请求…

多线程面试合集

前言 前文介绍了JVM相关知识,本文将重点介绍多线程相关知识以及工作中的一些经验。 多线程面试合集 什么是多线程?为什么我们需要多线程? 多线程是指在一个进程中同时执行多个线程,每个线程可以执行不同的任务。多线程可以提高…

什么是“原子类“ 和 CAS “无锁化编程“?如何解决 CAS 编程中的 ABA 问题?

目录 一、什么是"原子类"? 二、什么是 CAS ? 三、CAS 的 ABA 问题是什么? 四、如何解决 ABA 问题? 一、什么是"原子类"? "原子类"是 Java 标准库提供的 CAS 工具类。存放于 java.ut…

Springboot响应数据详解

功能接口 Controller下每一个暴露在外的方法都是一个功能接口 功能接口的请求路径是RequestMapping定义的路径,浏览器需要请求该功能则需要发出该路径下的请求。 RestController RestControllerControllerResponseBody(响应数据的注解) ResponseBody 类型&#…