Jetpack Compose布局之Row
基本使用
Row
纵向线性布局,类似于LinearLayout
设置为android:orientation="horizontal"
时的效果:
Row() {Text(text = "千里之行,")Text(text = "始于足下")
}
上方两个Text
将按照垂直排列布局,Row
默认大小为内部子控件的大小,类似于wrap_content
大小调整
可以使用modifier
来设置Row
的大小:
Row(modifier = Modifier.height(200.dp).width(200.dp)) {Text(text = "千里之行,")Text(text = "始于足下")
}
上面的代码设置了Row
的大小为 200dp * 200dp
Row(modifier = Modifier.size(300.dp, 200.dp)
) {Text(text = "千里之行,")Text(text = "始于足下")
}
上面的代码使用Modifier.size(width,height)
来设置Row
的大小
Row(modifier = Modifier.fillMaxHeight().fillMaxWidth()
) {Text(text = "千里之行,")Text(text = "始于足下")
}
上面的代码使用Modifier.fillMaxHeight().fillMaxWidth()
来设置Row
的大小,此时Row
将填充父控件的剩余大小,类似于**match_parent**
,也可以使用Modifier.fillMaxSize()
直接设置。
内容宽度按比例分配
Row(modifier = Modifier.fillMaxSize()
) {Text(text = "千里之行",Modifier.weight(1f))Text(text = "始于足下",Modifier.weight(1f))
}
可以使用Modifier.weight(1f)
来设置内容高度的比例,Modifier.weight()
只在Column
和Row
里面存在
horizontalArrangement
horizontalArrangement
参数可以设置Row
垂直排列的方式:
Row(modifier = Modifier.fillMaxHeight().fillMaxWidth(),horizontalArrangement = Arrangement.Center
) {Text(text = "千里之行,")Text(text = "始于足下")
}
上面的代码中Row
里面的内容将垂直居中,Arrangement
的值和对应效果如下:
verticalAlignment
verticalAlignment
参数可以设置Row
的水平对齐方式:
Row(modifier = Modifier.fillMaxHeight().fillMaxWidth(),horizontalArrangement = Arrangement.Center,//设置水平居中对齐verticalAlignment = Alignment.CenterVertically//设置垂直居中对齐
) {Text(text = "千里之行")Text(text = "始于足下")
}
上面的代码中Row
里面的内容将垂直水平都居中,verticalAlignment
的值有三种:
Alignment.Top
向顶部对齐Alignment.CenterVertically
内容居中对齐Alignment.Bottom
向底部对齐
内容单独设置排列方式
Row(modifier = Modifier.fillMaxHeight().fillMaxWidth(),horizontalArrangement = Arrangement.Center,//设置水平居中对齐verticalAlignment = Alignment.CenterHorizontally//设置垂直居中对齐) {Text(text = "千里之行",Modifier.align(Alignment.Start))Text(text = "始于足下")}
可以使用Modifier.align(Alignment.Start)
来单独设置Row
里面某个组件垂直
的对齐方式,Modifier.align()
会优先verticalAlignment
指定的对齐方式。
background
背景色的设置同意使用的是modifier
,使用Modifier.background
来设置:
Row(modifier = Modifier.fillMaxHeight().fillMaxWidth().background(Color.Red),//设置背景设置为RedhorizontalArrangement = Arrangement.Center,//设置水平居中对齐verticalAlignment = Alignment.CenterVertically//设置垂直居中对齐
) {Text(text = "千里之行")Text(text = "始于足下")
}
border
边框的设置同样使用的是modifier
,使用Modifier._border_
来设置:
Row(modifier = Modifier.fillMaxHeight().fillMaxWidth().background(Color.Red)//设置边框的宽度为10dp,颜色为Yellow,设置圆角为20dp.border(10.dp, Color.Yellow, RoundedCornerShape(20.dp)),horizontalArrangement = Arrangement.Center,//设置水平居中对齐verticalAlignment = Alignment.CenterVertically//设置垂直居中对齐
) {Text(text = "千里之行")Text(text = "始于足下")
}
注:使用RoundedCornerShape(topStart,topEnd,bottomEnd,bottomStart)
可以分别设置四个角的圆角角度;
clip
使用Modifier.clip()
可以设置圆角:
Row(modifier = Modifier.width(200.dp).height(200.dp).clip(RoundedCornerShape(30.dp)).background(Color.Yellow),horizontalArrangement = Arrangement.Center,//设置水平居中对齐verticalAlignment = Alignment.CenterVertically//设置垂直居中对齐
) {Text(text = "千里之行")Text(text = "始于足下")
}
注:clip(RoundedCornerShape(30.dp))
的设置需要在background
设置前面才会生效;
clickable
使用Modifier.clickble()
可以设置点击事件:
Row(modifier = Modifier.width(200.dp).height(200.dp).clickable {//设置点击事件Log.i(TAG_Row, "千里之行,始于足下")},horizontalArrangement = Arrangement.Center,//设置水平居中对齐verticalAlignment = Alignment.CenterVertically//设置垂直居中对齐
) {Text(text = "千里之行")Text(text = "始于足下")
}
indication
indication
可以设置点击效果,它的使用方式和Button
是一致的,详细可以查看Button interractionSourrce
padding
使用Modifier.padding()
可以设置Row
的内边距,Compose
没有设置外边距的参数:
Row(modifier = Modifier.width(200.dp).height(200.dp).clip(RoundedCornerShape(30.dp)).background(Color.Yellow).padding(50.dp).clickable {Log.i(TAG_Column, "千里之行,始于足下")},horizontalArrangement = Arrangement.Center,//设置水平居中对齐verticalAlignment = Alignment.CenterVertically//设置垂直居中对齐
) {Text(text = "千里之行")Text(text = "始于足下")
}
padding
可以设置所有边距,也可以设置每个位置的边距。
注意:如果padding
在clickable
前面,那么内边距的位置是不可以点击,如果在clickable
后面,那么内边距的位置也会响应点击事件,所有modifier
的顺序也是很重要的。
horizontalScroll
使用Modifier._horizontalScroll_()
可以使Row
可以横向滚动:
Row(modifier = Modifier.width(200.dp).height(200.dp).clip(RoundedCornerShape(30.dp)).background(Color.Yellow).padding(50.dp).horizontalScroll(ScrollState(0)),horizontalArrangement = Arrangement.Center,//设置水平居中对齐verticalAlignment = Alignment.CenterVertically//设置垂直居中对齐
) {Text(text = "千里之行,")Text(text = "始于足下。")Text(text = "千里之行,")Text(text = "始于足下。")Text(text = "千里之行,")Text(text = "始于足下。")Text(text = "千里之行,")Text(text = "始于足下。")
}
horizontalScroll
接收一个ScrollState
,创建ScrollState
需要设置一个initial
,就是初始位置,如果设置成 100 ,那么Row
初始显示的时候,会滚动到 100 的位置;
Compose
给我提供了一个专门用来显示可滚动Row
的View:LazyRow,可用用它来实现类似ListView
和RecyclerView
的功能。
Jetpack Compose布局之Row相关推荐
- Jetpack Compose布局之Column
基本使用 Column纵向线性布局,类似于LinearLayout设置为android:orientation="vertical"时的效果: Column() {Text(tex ...
- Android前沿技术学习——Compose布局原理+配置布局+四大块技术全方面解析
一.简介 布局系统的 Jetpack Compose 实现有两个主要目标:一是实现高性能,二是让开发者能够轻松编写自定义布局.在 Compose 中,通过避免多次测量布局子级可实现高性能.如果需要进行 ...
- Jetpack Compose - Row、Column
Jetpack Compose - Row.Column 0.介绍 1.属性一览 2.使用示例 3.版本更新 4.未解决问题 Compose系列文章,请点原文阅读.原文,是时候学习Compose了! ...
- 移动开发 Jetpack Compose 组件布局
Jetpack Compose 是用于构建原生 Android 界面的新工具包.它可简化并加快 Android 上的界面开发,使用更少的代码.强大的工具和直观的 Kotlin API,快速让应用生动而 ...
- Jetpack Compose 自定义绘制——高仿Keep周运动数据页面
废话之前先上图吧,如果不是有人告诉,你可以一眼看出哪个是真哪个是假吗? 仿制整个页面(仅仅页面)大概花了我两个小时,不过仅仅是静态的.不可点击的.图有形似而无功能. 自定义绘制 Jetpack Com ...
- 使用Jetpack Compose竟能做出如此漂亮的倒计时APP
Compose开发者挑战赛二周目 迎合Jetpack Compose beta版的发布,Google官方发起了Compose开发者挑战赛活动,目前已经入二周目 android-dev-challeng ...
- Jetpack Compose入门详解(实时更新)
Jetpack Compose入门详解 前排提醒 前言(Compose是什么) 1.实战准备 一.优势与缺点 二.前四课 三.标准布局组件 1.Column 2.Row 3.Box 四.xml和com ...
- Jetpack Compose中的Modifier
Modifier的基本使用 Modifier修饰符是Jetpack Compose中用来修饰组件的,提供常用的属性,写布局时几乎所有Composable组件的大部分属性都可以用Modifier 来修饰 ...
- 安卓开发: Jetpack compose + kotlin 实现 俄罗斯方块游戏
文章目录 前言 俄罗斯方块开发文档 1.摘要 2.开发工具选取 2.1.Compose 的自身优点 2.2.数据驱动界面 3.设计需求 3.1.功能需求 3.1.1.基本游戏功能 3.1.2.拓展功能 ...
最新文章
- C++ 互斥锁和条件变量实现读写锁
- 探究C/C++可变参数
- 深入浅出计算机组成原理学习笔记:高速缓存(下)-你确定你的数据更新了么?(第38讲)...
- 使用 intellijIDEA + gradle构建的项目如何debug
- Python汉诺塔问题
- 出租WiFi到底靠不靠谱?
- SVN更新数据和提交数据的几个疑问
- asp.net网站的配置文件
- Java Web实训项目:西蒙购物网(中)
- 不用IIS跑.net web应用
- 未来软件是什么样子?-SIF期货
- WIN10开启Hyper-V虚拟化功能
- amd cpu排行_最全cpu性能排行榜,cpu性能排行天梯图
- BP误差反传神经网络
- RPGMV修炼手册1——RPGMV的基本了解
- 番外篇:韩国网游兴起
- CIDR(构成超网)
- kotlin 原生字符串输出三个引号
- python数据类型——数字
- 全国邮编区号大全和从word中读取内容保存到msql中的源程序