Jetpack：002-页面与布局

我们在上一章回中介绍了Jetpack相关的概念和主要内容，本章回中主要介绍 页面和布局。闲话休提，请我们一起Talk Android Jetpack吧

1. 概念介绍

我们在本章回中介绍的页面是指Activity和Fragment,它们是App的重要组成部分，Jetpack虽然引入了composeUI库，但是仍然使用使用它们当作页面，不过对它们进行了重新封装，让它们位于Jetpack库中。

布局就是界面中内容的排列方式，比如xml中的线性布局，不过Jetpack没有使用这些布局，而是引入了新的布局方式，毕竟xml都不使用了，留着这些布局还有什么用呢。本章回中将详细介绍页面与布局相关的内容。

2. 使用方法

2.1 页面

页面使用Activity和Fragment表示，它们是页面中各种UI的载体，我们需要掌握与它们相关的生命周期和与生命周期对应的回调方法，比如onCreate()方法。我们在TalkAndoird专栏中介绍过这些内容，因此这里不再详细介绍。不过生命周期的内容会有一些变化，我们将在后续章回中介绍。

2.2 布局

布局包含三种：Column,Row和Box，详细内容如下：

• Column布局：把组件以列的方式进行排列；
• Row布局：把组件以行的方式进行排列；
• Box布局：把组件以叠加的方式进行排列；

如果大家不理解这些布局的话，可以查看下图，该图来自官方文档，它可以形象地表示各个布局的含义。

此外，还有一些约束布局和基于槽位的布局，比如Scaffold.我们在本章回中先不做介绍，后面遇到后再作详细的介绍。

3. 示例代码

介绍完页面和布局后，我们将通过具体的代码来演示它们的使用方法，详细如下：

@Composable
fun LayoutPage() {
    val  list = listOf("1-One","2-Tow","3-Three")

    Column(
        modifier = Modifier
            .padding(top = 60.dp)
            .fillMaxHeight(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Top
    ) {
        for (item in list) {
            //控制每个list选项的边距，长宽度，边框和背景颜色
            Surface(
                color = MaterialTheme.colorScheme.primary,
                modifier = Modifier
                    .fillMaxWidth() //相当于match_parent,默认是wrap_content
                    .height(48.dp)
                    .padding(vertical = 8.dp, horizontal = 16.dp)
                    .border(width = 3.dp, color = Color.Yellow,)
            ) {
                Row (
                    verticalAlignment = Alignment.CenterVertically,
                    modifier = Modifier
                        .padding(start = 24.dp)
                        .align(alignment = Alignment.CenterHorizontally)
                        ){
                    Text(text = item)
                    Button(onClick = { Log.d("ex001","button is clicked")}) {
                        Text(text = "Button")
                    }
                }
            }
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

在上面的代码中，我们把所有的布局封装成了一个可组合函数，将该函数放到页面的onCreate()方法中就可以运行，它将生成一个三行两列的布局，下面是程序的运行效果图，请大家参考。此外，我们建议大家参考示例代码自己动手实践一下，这样才能真正掌握布局相关的知识。

4. 内容总结

最后，我们对本章回的内容做一个总结：

• 本章回主要介绍页面和布局的内容；
• 界面仍然使用Activity表示；
• 常用的布局分为三种：Row,Column和Box;

看官们，关于Jetpack的基本内容就介绍这些，欢迎大家在评论区交流与讨论！