初识 Jetpack Compose(二) ：布局

一、布局

官网对于Compose布局的描述

可组合函数是 Compose 的基本构建块。可组合函数是一种发出 Unit 的函数，用于描述界面中的某一部分。该函数接受一些输入并生成屏幕上显示的内容。如需详细了解可组合项，请参阅 Compose 构思模型文档。

一个可组合函数可能会发出多个界面元素。不过，如果您未提供有关如何排列这些元素的指导，Compose 可能会以您不喜欢的方式排列它们。

当我们尝试着像如下编写代码时

@Composable
fun MainPage() {
    Text(text = "Hello,Jetpack Compose!")
    Text(text = "hello,jetpack compose!")
}

在预览视图中会发现两个Text重叠了

在xml中，我们可以用各种布局方式来排列/约束视图元素的位置，那么在Compose 中如何实现呢？Compose中有没有类似于LinearLayout、FrameLaoyout、ConstraintLayout 的东西呢？

答案是：必然有。

在许多情况下，您只需使用 Compose 的标准布局元素即可。

通过以下几种布局方式，基本可以满足日常的开发布局需求。

1. Row

Row可以理解为Xml布局中LinearLayout的horizontal模式，例如：

@Composable
fun MainPage() {
    Row(){
        Text(text = "Hello")
        Text(text = ",")
        Text(text = "jetpack compose!")
    }
}

通过Row的源码可以看到我们还可以传递如下几个参数：

@Composable
inline fun Row(
    modifier: Modifier = Modifier,
    horizontalArrangement: