Jetpack Compose布局之Column
基本使用
Column
纵向线性布局,类似于LinearLayout
设置为android:orientation="vertical"
时的效果:
Column() {Text(text = "千里之行")Text(text = "始于足下")
}
上方两个Text
将按照垂直排列布局,Column
默认大小为内部子控件的大小,类似于wrap_content
大小调整
可以使用modifier
来设置Column
的大小:
Column(modifier = Modifier.height(200.dp).width(200.dp)) {Text(text = "千里之行")Text(text = "始于足下")
}
上面的代码设置了Column
的大小为 200dp * 200dp
Column(modifier = Modifier.size(300.dp, 200.dp)
) {Text(text = "千里之行")Text(text = "始于足下")
}
上面的代码使用Modifier.size(width,height)
来设置Column
的大小
Column(modifier = Modifier.fillMaxHeight().fillMaxWidth()
) {Text(text = "千里之行")Text(text = "始于足下")
}
上面的代码使用Modifier.fillMaxHeight().fillMaxWidth()
来设置Column
的大小,此时Column
将填充父控件的剩余大小,类似于match_parent
。可以直接使用Modifier.fillMaxSize()
来直接设置
内容高度按比例分配
Column(modifier = Modifier.fillMaxSize()
) {Text(text = "千里之行",Modifier.weight(1f))Text(text = "始于足下",Modifier.weight(1f))
}
可以使用Modifier.weight(1f)
来设置内容高度的比例,Modifier.weight()
只在Column
和Row
里面存在
verticalArrangement
verticalArrangement
参数可以设置Column
垂直排列的方式:
Column(modifier = Modifier.fillMaxHeight().fillMaxWidth(),verticalArrangement = Arrangement.Center
) {Text(text = "千里之行")Text(text = "始于足下")
}
上面的代码中Column
里面的内容将垂直居中,Arrangement
的值和对应效果如下:
Arrangement.EqualWeight
内容撑满Column
的高度,每个组件的高度平分Column
的高度Arrangement.SpaceBetween
内容撑满Column
的高度,最上方和最下方的组件紧靠Column
,组件与组件之间的间距会平分剩余高度Arrangement.SpaceAround
内容撑满Column
的高度,最上方和最下方的组件与Column
的间距是组件与组件直接的间距的一半Arrangement.SpaceEvenly
内容撑满Column
的高度,组件与组件之间的间距会平分剩余高度Arrangement.Top
内容对齐到Column
的最上方Arrangement.Center
内容居中对齐Arrangement.Bottom
内容对齐到Column
的最下方
horizontalAlignment
horizontalAlignment
参数可以设置Column
的水平对齐方式:
Column(modifier = Modifier.fillMaxHeight().fillMaxWidth(),verticalArrangement = Arrangement.Center,//设置垂直居中对齐horizontalAlignment = Alignment.CenterHorizontally//设置水平居中对齐
) {Text(text = "千里之行")Text(text = "始于足下")
}
上面的代码中Column
里面的内容将垂直水平都居中,horizontalAlignment
的值有三种:
Alignment.Start
向内容开始的方向对齐,一般为左边Alignment.CenterHorizontally
内容居中对齐Alignment.End
向内容结束的方向对齐,一般为右边
内容单独设置排列方式
Column(modifier = Modifier.fillMaxHeight().fillMaxWidth(),verticalArrangement = Arrangement.Center,//设置垂直居中对齐horizontalAlignment = Alignment.CenterHorizontally//设置水平居中对齐) {Text(text = "千里之行",Modifier.align(Alignment.Start))Text(text = "始于足下")}
可以使用Modifier.align(Alignment.Start)
来单独设置Column
里面某个组件水平
的对齐方式,Modifier.align()
会优先horizontalAlignment
指定的对齐方式。
background
背景色的设置使用的是modifier
,使用Modifier.background
来设置:
Column(modifier = Modifier.fillMaxHeight().fillMaxWidth().background(Color.Red),//设置背景设置为RedverticalArrangement = Arrangement.Center,horizontalAlignment = Alignment.CenterHorizontally
) {Text(text = "千里之行")Text(text = "始于足下")
}
border
边框的设置同样使用的是modifier
,使用Modifier._border_
来设置:
Column(modifier = Modifier.fillMaxHeight().fillMaxWidth().background(Color.Red)//设置边框的宽度为10dp,颜色为Yellow,设置圆角为20dp.border(10.dp, Color.Yellow, RoundedCornerShape(20.dp)),verticalArrangement = Arrangement.Center,horizontalAlignment = Alignment.CenterHorizontally
) {Text(text = "千里之行")Text(text = "始于足下")
}
注:使用RoundedCornerShape(topStart,topEnd,bottomEnd,bottomStart)
可以分别设置四个角的圆角角度;
clip
使用Modifier.clip()
可以设置圆角:
Column(modifier = Modifier.width(200.dp).height(200.dp).clip(RoundedCornerShape(30.dp)).background(Color.Yellow),verticalArrangement = Arrangement.Center,horizontalAlignment = Alignment.CenterHorizontally
) {Text(text = "千里之行")Text(text = "始于足下")
}
注:clip(RoundedCornerShape(30.dp))
的设置需要在background
设置前面才会生效;
clickable
使用Modifier.clickble()
可以设置点击事件:
Column(modifier = Modifier.width(200.dp).height(200.dp).clickable {//设置点击事件Log.i(TAG_Column, "千里之行,始于足下")},verticalArrangement = Arrangement.Center,horizontalAlignment = Alignment.CenterHorizontally
) {Text(text = "千里之行")Text(text = "始于足下")
}
indication
indication
可以设置点击效果,它的使用方式和Button
是一致的,详细可以查看Button interractionSourrce
padding
使用Modifier.padding()
可以设置Column
的内边距,Compose
没有设置外边距的参数:
Column(modifier = Modifier.width(200.dp).height(200.dp).clip(RoundedCornerShape(30.dp)).background(Color.Yellow).padding(50.dp).clickable {Log.i(TAG_Column, "千里之行,始于足下")},verticalArrangement = Arrangement.Center,horizontalAlignment = Alignment.CenterHorizontally
) {Text(text = "千里之行")Text(text = "始于足下")
}
padding
可以设置所有边距,也可以设置每个位置的边距。
注意:如果padding
在clickable
前面,那么内边距的位置是不可以点击,如果在clickable
后面,那么内边距的位置也会响应点击事件,所以modifier
是有顺序。
verticalScroll
使用Modifier.verticalScroll()
可以使Column
可以滚动:
Column(modifier = Modifier.width(200.dp).height(200.dp).clip(RoundedCornerShape(30.dp)).background(Color.Yellow).padding(50.dp).verticalScroll(ScrollState(0)),verticalArrangement = Arrangement.Center,horizontalAlignment = Alignment.CenterHorizontally
) {Text(text = "千里之行")Text(text = "始于足下")Text(text = "千里之行")Text(text = "始于足下")Text(text = "千里之行")Text(text = "始于足下")Text(text = "千里之行")Text(text = "始于足下")
}
verticalScroll
接收一个ScrollState
,创建ScrollState
需要设置一个initial
,就是初始位置,如果设置成 100 ,那么Column
初始显示的时候,会滚动到 100 的位置;
Compose
给我提供了一个专门用来显示可滚动Column
的View:LazyColumn,可用用它来实现类似ListView
和RecyclerView
的功能。
Jetpack Compose布局之Column相关推荐
- Jetpack Compose - Row、Column
Jetpack Compose - Row.Column 0.介绍 1.属性一览 2.使用示例 3.版本更新 4.未解决问题 Compose系列文章,请点原文阅读.原文,是时候学习Compose了! ...
- Jetpack Compose布局之Row
基本使用 Row纵向线性布局,类似于LinearLayout设置为android:orientation="horizontal"时的效果: Row() {Text(text = ...
- Android前沿技术学习——Compose布局原理+配置布局+四大块技术全方面解析
一.简介 布局系统的 Jetpack 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 Animations 超简单教程
Node:本文基于Jetpack Compose 1.0.0-beta01 Animation是由state驱动的 Compose的核心思想状态驱动UI刷新,这一思想同样体现在动画上. Compose ...
- Jetpack Compose入门详解(实时更新)
Jetpack Compose入门详解 前排提醒 前言(Compose是什么) 1.实战准备 一.优势与缺点 二.前四课 三.标准布局组件 1.Column 2.Row 3.Box 四.xml和com ...
- Jetpack Compose中的Modifier
Modifier的基本使用 Modifier修饰符是Jetpack Compose中用来修饰组件的,提供常用的属性,写布局时几乎所有Composable组件的大部分属性都可以用Modifier 来修饰 ...
最新文章
- 【每日一算法】删列造序
- [No000010F]Git8/9-使用GitHub
- python在线编辑器最新_Editor.md 二次开发-markdown在线编辑器
- 中国中草药提取物市场需求容量与投资价值预测报告2022年
- 面试官都会问的Mybatis面试题,你会这样回答吗?
- 数据挖掘概念与技术12--数据立方体的计算和多路数组聚集详解
- java list resultset_Java工具类 通过ResultSet对象返回对应的实体List集合
- WebSocket能干啥
- 韩顺平php视频笔记62-67 php面向对象
- rest api是什么_一文搞懂什么是RESTful API
- 我新浪的免费邮箱这段时间总是登不上去或是不稳定
- mysql 5.7 无法启动 服务没有报告任何错误
- 新计算机安装系统后鼠标键盘都无反应处理
- php生成appid,请求认证密钥-AppID
- HashMap 如何解决 hash 冲突
- 苹果x漫画脸_苹果最新iPhone SE:秒杀安卓的小屏旗舰
- C++ vector<std::tuple<XXX, XXX, XXX>>
- 阿蒙森 斯科特_斯科特的糖尿病解释:飞机类比
- ISAM2.h/ISAM2.cpp
- 中国数学家黄金一代-北大数学专业2000级