【Android 笔记】—Jetpack Compose学习(谷歌教程)-简单介绍主要介绍：什么是Compose? 添

什么是Jetpack Compose?

官方链接：Android Compose 教程 | Android 开发者 | Android Developers (google.cn)

Jetpack Compose 是用于构建原生 Android 界面的新工具包。它使用更少的代码、强大的工具和直观的 Kotlin API，可以帮助您简化并加快 Android 界面开发。无需修改任何 XML 布局，也不需要使用布局编辑器。

(ps:在之前的android Android项目中，逻辑和视图是相互分开的，视图在res/layout/xxx.xml 文件中进行绘制，在代码逻辑中使用setContent进行视图关联。）

Compose需要和kotlin搭配使用

使用Jetpack Compose

如果要使用Compose来构建项目的试图，有以下依赖需要添加

implementation("androidx.core:core-ktx:1.9.0")
implementation("androidx.lifecycle:lifecycle-runtime-ktx:2.6.1")
implementation("androidx.activity:activity-compose:1.7.0")
implementation(platform("androidx.compose:compose-bom:2023.03.00"))
implementation("androidx.compose.ui:ui")
implementation("androidx.compose.ui:ui-graphics")
implementation("androidx.compose.ui:ui-tooling-preview")
implementation("androidx.compose.material3:material3")

可组合函数（Composable functions）

定义可组合函数：

在函数上添加@Composeble注解


@Composable
fun MessageCard(params) {
    Text(text = "Hello $params !")
}

预览可组合函数的效果：

定义另一个无参的可组合函数，添加@Preview的注解，即可在编译器的Split视图上查看预览效果，而不需要将应用安装到手机上。

@Preview
@Composable
fun PreviewMessageCard() {
    MessageCard("Compose")
}

布局（layout)

可组合函数可以包含可组合函数以实现界面层次结构。

添加多个文本

例子：构建一个数据类，通过传入数据类为参数来展示多个text。

部分代码：

data class Message(val author: String, val message: String)

@Composable
fun MessageCard(param: Message) {
    Column {
        Row {
            Text(text = param.author)
            Text(text = param.message)
        }
    }
}

@Preview
@Composable
fun PreviewMessageCard() {
    MessageCard(Message("Android", "Jetpack Compose"))
}

这样在一个可组合函数中添加了两个Text.

Column函数和 Row函数

上面的例子中，多个Text在同一个地方叠加显示了，使用Column函数可以将Text文本并排显示不至于叠加。

Column函数

垂直显示内部的View

@Composable
fun MessageCard(param: Message) {
    Column {
        Text(text = param.author)
        Text(text = param.message)
    }
}

预览视图：

Row函数

水平显示内部的View

只要将上面代码块中的Column替换为Row

Row和Column可以相互包含来实现布局，有点类似于 LinearLayout 之间的相互嵌套。

添加Image

类型：androidx.compose.foundation.Image

Image{} 需要传入两个参数

androidx.compose.ui.res.painterResource 这个用来设置图片资源的id
String类型的图片描述

ps: 作为新手练习使用的demo, 这里只需要改动MessageCard这个函数就可以预览改动后的视图。预览图的效果可以在AS上查看。

@Composable
fun MessageCard(param: Message) {
    Row {
        Column {
            Text(text = param.author)
            Text(text = param.message)
        }
        Image(painter = painterResource(R.drawable.ic_launcher_foreground),
            contentDescription = "This is a Context Description")
    }
}

添加修饰符（Modifier）

修饰每个UI控件以及VIewGroup的具体样式（大小、布局、边距、视图点击 等）。

ps: Column、Row有点类似于之前的ViewGroup概念，即管理一组子View使用，在Compose样式中，我觉得可以用layout作为表述。如果有其它的更加官方的叫法，大佬们可以在评论里call me。

注意点： Modifier的创建时机

对于layout元素来说，modifier在创建时作为参数传入，即写在类名的（）中。 eg:

Row (modifier = Modifer.xxx) {
    ……
}

对于单个view来说，在 { } 代码块中进行赋值。 eg:

Image {
    painter = xxx
    contentDescription = xxx
    modify = Modify.xxx
}

对于（）和 {} 不同部位创建 Modifier的区别，即为什么是在这两个不同的地方创建，需要再去调查。

下面是简单的代码示例

@Composable
fun MessageCard(param: Message) {
    Row (modifier = Modifier.padding(all = 16.dp)) {
        Column {
            Text(text = param.author)
            Text(text = param.message)
        }
    }

    Image(
        painter = painterResource(id = R.drawable.ic_launcher_background),
        contentDescription = "",
        modifier = Modifier
            .size(40.dp)
            .clip(CircleShape)
    )
    Image (
        painter = painterResource(R.drawable.ic_launcher_foreground),
        contentDescription = "This is a Context Description",
        modifier = Modifier
            .size(40.dp)
            .clip(CircleShape)
    )
}

【Android 笔记】—Jetpack Compose学习(谷歌教程)-简单介绍