Compose 中的 Badges

在 Jetpack Compose 中，Badge 是一种小型圆形标记，通常用于显示通知或状态，例如未读消息数、新邮件提示等。Badge 通常与其他组件一起使用，例如图标、按钮等，以提供附加信息。

Badge 的基本用法

Badge 组件可以通过 BadgeBox 来使用，它可以包裹其他组件，并在其右上角显示一个徽章。Badge 组件可以显示简单的点，也可以包含数字或文本。

常用参数

• content: 一个 @Composable 函数，用于定义徽章的内容。
• badgeContent: 一个 @Composable 函数，用于定义徽章内部的内容（通常是文本或数字）。

示例代码

下面是一个基本的示例代码，展示如何在 Jetpack Compose 中使用 Badge 和 BadgeBox：

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.badgeexample.ui.theme.BadgeExampleTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            BadgeExampleTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    BadgeExample()
                }
            }
        }
    }
}

@Composable
fun BadgeExample() {
    var badgeCount by remember { mutableStateOf(5) }

    Box(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        contentAlignment = Alignment.Center
    ) {
        BadgeBox(
            badgeContent = {
                Text(
                    text = badgeCount.toString(),
                    color = Color.White,
                    modifier = Modifier.padding(2.dp)
                )
            }
        ) {
            IconButton(onClick = { badgeCount++ }) {
                Icon(
                    imageVector = Icons.Default.Notifications,
                    contentDescription = "Notifications"
                )
            }
        }
    }
}

@Preview(showBackground = true)
@Composable
fun BadgeExamplePreview() {
    BadgeExampleTheme {
        BadgeExample()
    }
}

解释

1. 状态管理:

   • 使用 remember 和 mutableStateOf 来管理徽章的状态。badgeCount 是一个整数变量，表示徽章中显示的数字。

2. 布局:

   • 使用 Box 布局将 BadgeBox 居中显示在页面中。

3. BadgeBox 组件:

   • BadgeBox 组件包裹了一个 IconButton，在其右上角显示一个徽章。
   • badgeContent 参数定义了徽章内部的内容，这里使用 Text 显示 badgeCount。

4. IconButton 组件:

   • IconButton 包含一个 Icon，用于显示通知图标，并在点击时增加 badgeCount。

自定义样式

你还可以通过 Badge 自定义徽章的外观，例如颜色和形状：

BadgeBox(
    badgeContent = {
        Badge(
            backgroundColor = Color.Red,
            contentColor = Color.White,
            modifier = Modifier.size(24.dp)
        ) {
            Text(
                text = badgeCount.toString(),
                color = Color.White,
                modifier = Modifier.padding(2.dp)
            )
        }
    }
) {
    IconButton(onClick = { badgeCount++ }) {
        Icon(
            imageVector = Icons.Default.Notifications,
            contentDescription = "Notifications"
        )
    }
}

通过这种方式，你可以更改徽章的背景颜色、内容颜色和大小，以适应不同的设计需求。