持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第7天，点击查看活动详情 前两天给大家带来了基础的UI，今天就来润色一下。
第三步：Material design
Compose 是为支持 Material design 原则而建立的。它的许多 UI 元素都是开箱即用的。在这一步中，你将用 Material 小部件来设计你的应用程序。
使用 Material Design
我们的 MessageCard 现在有了一个布局，但它看起来还不是太好,
Jetpack Compose 提供了 Material Design 的实现，我们将使用 Material Design 的风格来改善我们的 MessageCard。
首先，我们使用在你的项目中创建的 Material 主题来包装我们的 MessageCard 函数，在我们的例子中是 ComposestudyTheme。在 @Preview 和 setContent 中都添加它。
Material Design 是围绕三个元素建立的。颜色（Color）、排版（Typography）、形状（Shape）。让我们一个一个地添加它们。
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
ComposestudyTheme {
MessageCard(Message("Jetpack Compose 博物馆", "我们开始更新啦"))
}
}
}
@Preview
@Composable
fun PreviewMessageCard() {
ComposestudyTheme {
MessageCard(
msg = Message("Jetpack Compose 博物馆", "我们开始更新啦")
)
}
}
注意
一个 Empty Compose Activity 已经自动为你的项目生成了一个默认的主题，允许你自定义 MaterialTheme。如果你给你的项目命名与 ComposestudyTheme 不同，你可以在 ui.theme 包中找到你的自定义主题。
颜色（Color）
使用包装好的主题中的颜色进行修饰很容易，你可以在任何需要颜色的地方使用主题中的值。
让我们对标题进行修饰，并为图片添加边框。
Row(
modifier = Modifier.padding(all = 8.dp)
) {
Image(
painterResource(id = R.drawable.profile_picture),
contentDescription = "profile picture",
modifier = Modifier
.size(50.dp)
.clip(CircleShape)
.border(1.5.dp, MaterialTheme.colors.secondary, shape = CircleShape) // 添加边框
)
Spacer(Modifier.padding(horizontal = 8.dp))
Column {
Text(
text = msg.author,
color = MaterialTheme.colors.secondaryVariant // 添加颜色
)
Spacer(Modifier.padding(vertical = 4.dp))
Text(text = msg.body)
}
}
排版（Typography）
Material Typography 风格在 MaterialTheme 中是可用的，只要把它们添加到 Text composables 中。
Column {
Text(
text = msg.author,
color = MaterialTheme.colors.secondaryVariant,
style = MaterialTheme.typography.subtitle2 // 添加 style
)
Spacer(Modifier.padding(vertical = 4.dp))
Text(
text = msg.body,
style = MaterialTheme.typography.body2 // 添加 style
)
}
形状（Shape）
有了形状，我们可以添加最后的修饰。我们为整个 MessageCard 实现了一个卡片式的设计
@file:Suppress("PreviewAnnotationInFunctionWithParameters")
package com.example.composestudy
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import com.example.composestudy.ui.theme.ComposestudyTheme
import java.nio.file.Files.size
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
ComposestudyTheme{MessageCard(
msg = Message("Jetpack Compose 之旅", "坚果开始更新啦")
)}
}
}
}
data class Message(val author: String, val body: String)
@Composable
fun MessageCard(msg: Message) {
Surface(
shape = MaterialTheme.shapes.medium, // 使用 MaterialTheme 自带的形状
elevation = 5.dp,
modifier = Modifier.padding(all = 8.dp)
) {
Row(
modifier = Modifier.padding(all = 8.dp)
) {
Image(
painterResource(id = R.mipmap.ic_launcher),
contentDescription = "profile picture",
modifier = Modifier
.size(50.dp)
.clip(CircleShape)
.border(1.5.dp, MaterialTheme.colors.secondary, shape = CircleShape)
)
Spacer(Modifier.padding(horizontal = 8.dp))
Column {
Text(
text = msg.author,
color = MaterialTheme.colors.secondaryVariant,
style = MaterialTheme.typography.subtitle2
)
Spacer(Modifier.padding(vertical = 4.dp))
Text(
text = msg.body,
style = MaterialTheme.typography.body2
)
}
}
}
}
@Preview
@Composable
fun PreviewMessageCard() {
ComposestudyTheme{
MessageCard(
msg = Message("Jetpack Compose 之旅", "坚果开始更新啦")
)
}
}
启用深色主题
深色主题（或夜间模式）可以避免明亮的显示，由于支持 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 元素，它可以显示一个图像和两个不同风格的文本，而且在浅色和深色主题中都看起来很好
\
