Jetpack Compose 的 Column , Row ,Box 的用法，Android 开发究竟该如何学习
modifier 修饰符。这里先占时不讲，这个是 compose 很好用而且很重要的知识点，我们会专门写一篇文章介绍修饰符的用法。
verticalArrangement 表示是竖直方向上的对齐方式。默认是从顶部开始
举个例子，比如 Column 的高度是 200dp，而两个文本控件的高度不足 200dp，当设置底部对齐的时候，两个控件会在 Column 的底部
@Preview()
@Composable
fun columnTest(){
Column(
// 设置 Column 的宽度高 200dp
modifier = Modifier.size(200.dp),
// 设置居底部对齐
verticalArrangement = Arrangement.Bottom){
Text(text = "第一个文本控件 ikkokokojih 呼呼呼呼呼呼")
Text(text = "第二个文本控件")
}
}
horizontalAlignment 表示是水平方向上的对齐方式。默认是从左边开始
举个例子说明，比如上面两个文本控件，一个比较长，一个比较短。如果 horizontalAlignment 设置的是 End。那么两个文本控件就会居右对齐。
@Preview()
@Composable
fun columnTest(){
Column(horizontalAlignment = Alignment.End){
Text(text = "第一个文本控件,我是比较长的那个文本控件")
Text(text = "第二个文本控件")
}
}
content 所有布局的最后一个参数都是 content，它是一个发出子界面元素的函数。其实上就是子元素的内容，比如这里就是两个 Text 文本控件。其实 Column 的完整的写法是如下：
Column(
content = {
Text("Some text")
Text("Some more text")
Text("Last text")
}
)
只不过是 kotlin 的 lambda 语法，Compose 支持了。所以就把这种繁琐的写法简单的写成
Column{
Text("Some text")
Text("Some more text")
Text("Last text")
}
二：横向布局 Row
使用 Row 可将多个项水平地放置在屏幕上。Row 和 Column 一样都支持配置它们所含元素的对齐方式。我们还是拿两个文本控件来举例。两个文本控件横向排列
@Preview()
@Composable
fun rowTest(){
Row{
Text(text = "第一个文本控件 ikkokokojih 呼呼呼呼呼呼")
Text(text = " 第二个文本控件")
}
}
再来看看 Row 的源码
@Composable
@OptIn(ExperimentalLayoutNodeApi::class, InternalLayoutApi::class)
inline fun Row(
modifier: Modifier = Modifier,
horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,
verticalAlignment: Alignment.Vertical = Alignment.Top,
content: @Composable RowScope.() -> Unit
) {
...
}
我们可以看到跟 Column 一样。
modifier 修饰符 （后面文章会单独讲解）
horizontalArrangement 设置水平方向上的对齐方式（由于 Column 讲解过这里就不举例了）
verticalAlignment 设置竖直方向上对齐方式（由于 Column 讲解过这里就不举例了）
content 布局内容 （由于 Column 讲解过这里就不举例了）
三：Box (类似 FramLayout 布局)
使用 Box 可将一个元素放在另一个元素上，类似 FramLayout 布局。
Box(Modifier.size(200.dp).background(Color.Red)){
Text(text = "第一个文本控件 ikkokokojih 呼呼呼呼呼呼")
Text(text = "第二个文本控件")
}
比如上面这个例子就是第二个文本控件叠放在第一个文本控件上面。 再来看看 Box 的源码
@Composable
@OptIn(ExperimentalLayoutNodeApi::class)
inline fun Box(
modifier: Modifier = Modifier,
contentAlignment: Alignment = Alignment.TopStart,
content: @Composable BoxScope.() -> Unit
) {
...
}
《Android 学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》
【docs.qq.com/doc/DSkNLaERkbnFoS0ZF】 完整内容开源分享
modifier 修饰符 （后面文章会单独讲解）
contentAlignment 是设置子控件的对齐方式，比如设置底部居中
@Preview()
最后
目前已经更新的部分资料：
还未添加个人签名 2021.03.19 加入
还未添加个人简介
评论