Compose 中的 Material Design 3

Material Design 3 是 Google 推出的 Material Design 的最新版本，它为应用程序提供了全新的设计语言和组件库，以提供更现代、更具交互性的用户界面。在 Jetpack Compose 中，Material Design 3 提供了一系列用于构建应用程序界面的组件，这些组件包括按钮、文本字段、卡片、底部导航栏等。

Material Design 3 组件库

Material Design 3 组件库包括了许多常见的界面组件，如按钮、文本字段、卡片等。这些组件遵循 Material Design 3 的设计原则，提供了丰富的功能和交互效果，使得开发者可以更轻松地创建现代化的应用程序界面。

示例代码

以下是一些常见的 Material Design 3 组件的示例代码：

文本字段

import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview

@Composable
fun TextFieldExample() {
    var text by remember { mutableStateOf("") }

    TextField(
        value = text,
        onValueChange = { newText -> text = newText },
        label = { Text("Enter text") },
        placeholder = { Text("Placeholder") },
        modifier = Modifier.fillMaxWidth()
    )
}

@Preview
@Composable
fun TextFieldExamplePreview() {
    TextFieldExample()
}

按钮

import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview

@Composable
fun ButtonExample() {
    Button(
        onClick = { /* Do something */ },
        modifier = Modifier.padding(16.dp)
    ) {
        Text(text = "Button")
    }
}

@Preview
@Composable
fun ButtonExamplePreview() {
    ButtonExample()
}

卡片

import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview

@Composable
fun CardExample() {
    Card(
        modifier = Modifier.padding(16.dp),
        elevation = 4.dp
    ) {
        Column(
            modifier = Modifier.padding(16.dp)
        ) {
            Text(text = "Card Title")
            Spacer(modifier = Modifier.height(8.dp))
            Text(text = "Card Content")
        }
    }
}

@Preview
@Composable
fun CardExamplePreview() {
    CardExample()
}

解释

1. 文本字段:

   • 使用 TextField 组件创建文本字段，可以实现用户输入文本的功能。
   • 通过 value 和 onValueChange 参数来控制文本字段的值和变化。

2. 按钮:

   • 使用 Button 组件创建按钮，可以实现用户点击交互的功能。
   • 通过 onClick 参数来定义按钮被点击时的行为。

3. 卡片:

   • 使用 Card 组件创建卡片，用于显示相关内容。
   • 可以在 Card 中嵌套其他组件，如 Text 组件用于显示标题和内容。

通过使用 Material Design 3 组件库，开发者可以快速构建现代化的应用程序界面，并遵循 Material Design 3 的设计原则，提供更好的用户体验。