初识 Jetpack Compose【04】

启用深色主题

深色主题（或夜间模式）可以避免明亮的显示，由于支持 Material Design，Jetpack Compose 默认可以处理深色主题。只要是使用了 Material 的颜色后，文本和背景将自动适应黑暗的背景。

你可以在你的文件中创建多个预览，作为单独的函数，或者在同一个函数中添加多个注解。

让我们添加一个新的预览注解并在手机上或者虚拟机上启用夜间模式。

@Preview(name = "Light Mode")
@Preview(
    uiMode = Configuration.UI_MODE_NIGHT_YES,
    showBackground = true,
    name = "Dark Mode"
)
@Composable
fun PreviewMessageCard() {
    ExamplesTheme {
        MessageCard(
            msg = Message("Jetpack Compose 之旅", "坚果开始更新啦")
        )
    }
}

浅色和深色主题的颜色选择是在 IDE 生成的 Theme.kt 文件中定义的。

到目前为止，我们已经创建了一个 MessageCard 元素，它可以显示一个图像和两个不同风格的文本，而且在浅色和深色主题中都看起来很好

4. 列表和动画

创建一个列表消息卡片

到目前为止，我们只有一个消息的卡片，看上去有点单调，所以让我们来改善它，让它拥有多条信息。我们需要创建一个能够显示多条消息的函数。对于这种情况，我们可以使用 Compose 的 LazyColumn 和 LazyRow。这些 Composable 只渲染屏幕上可见的元素，所以它们的设计对于长列表来说很有效果。同时，它们避免了 RecyclerView 与 XML 布局的复杂性。

import androidx.compose.foundation.lazy.items
​
@Composable
fun Conversation(messages: List<Message>) {
    LazyColumn {
        items(messages) { message ->
            MessageCard(msg = message)
        }
    }
}
​
@Composable
fun PreviewMessageCard() {
    ComposestudyTheme {
        Conversation(messages = MsgData.messages)
    }
}

你可以在这里获取 MsgData 的代码

MsgData.kt

​
​
object MsgData {
    private const val author = "大前端之旅"
    val messages = listOf(
        Message(author, "我们开始更新啦"),
        Message(author, "秋刀鱼会过期吗？"),
        Message(author, "下周就是端午了"),
        Message(author, "男人最好的状态是，25岁的时候能带着30岁的成熟去经营爱情，30岁的时候还带着18岁的不怕，去勇敢爱\uD83D\uDCAA"),
        Message(author, "Android之旅"),
​
    )
}

在这个代码片段中，你可以看到 LazyColumn 有一个 items 子项。它接收一个 List 作为参数，它的 lambda 接收一个我们命名为 message 的参数（我们可以随便命名）。 而这个 lambda 将会调用每个 List 中里面提供的 item。