Android开发实战班 - 现代 UI 开发之自定义 Compose 组件

Jetpack Compose 不仅提供了丰富的内置组件，还允许开发者根据项目需求创建自定义组件。自定义 Compose 组件可以提高代码复用性、简化 UI 逻辑，并使应用界面更加一致和模块化。本章节将介绍如何创建自定义 Compose 组件，包括组件的创建、样式定制、状态管理以及在项目中的应用。

为什么需要自定义 Compose 组件

• 代码复用:

  • 通过创建自定义组件，可以将常用的 UI 逻辑封装起来，避免重复代码，提高代码复用性。

• 简化 UI 逻辑:

  • 将复杂的 UI 逻辑封装到自定义组件中，可以简化调用代码，使代码更简洁易懂。

• 一致性:

  • 自定义组件可以保证应用界面的一致性，例如统一的按钮样式、输入框样式等。

• 模块化:

  • 自定义组件可以将 UI 拆分成更小的模块，便于维护和测试。

创建自定义 Compose 组件

创建自定义 Compose 组件非常简单，只需定义一个带有 @Composable 注解的函数即可。以下是一个简单的自定义按钮组件示例：

import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

@Composable
fun MyButton(
    text: String,
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    backgroundColor: Color = MaterialTheme.colorScheme.primary,
    contentColor: Color = MaterialTheme.colorScheme.onPrimary
) {
   
   
    Text(
        text = text,
        modifier = modifier
            .clip(RoundedCornerShape(8.dp))
            .background(backgroundColor)
            .clickable {
   
    onClick() }
            .padding(vertical = 12.dp, horizontal = 16.dp),
        color