Compose笔记(五十二)--FilledIconButton

        这一节主要了解一下Compose中的FilledIconButton，它是Material 3设计规范中提供的填充风格图标按钮组件，用于在紧凑空间中通过图标触发辅助操作。简单总结:

API

@Composable
fun FilledIconButton(onClick: () -> Unit,          // 点击事件回调modifier: Modifier = Modifier, // 布局修饰符（enabled: Boolean = true,       // 是否启用按钮shape: Shape = IconButtonDefaults.filledShape, // 按钮形状colors: IconButtonColors = IconButtonDefaults.filledIconButtonColors(), // 颜色配置interactionSource: MutableInteractionSource? = null, // 交互状态源content: @Composable () -> Unit // 图标内容
)

栗子:

import android.widget.Toast
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Delete
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.Share
import androidx.compose.material3.FilledIconButton
import androidx.compose.material3.Icon
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.unit.dp@Composable
fun FilledIconButtonDemo01(
) {val context = LocalContext.currentRow(modifier = Modifier.fillMaxWidth().padding(16.dp),horizontalArrangement = Arrangement.SpaceEvenly,verticalAlignment = Alignment.CenterVertically) {// 收藏按钮（默认主题色）FilledIconButton(onClick = {Toast.makeText(context,"已收藏",Toast.LENGTH_LONG).show()}) {Icon(imageVector = Icons.Default.Favorite,contentDescription = "收藏")}// 分享按钮（自定义颜色）FilledIconButton(onClick = {Toast.makeText(context,"分享成功",Toast.LENGTH_LONG).show()},) {Icon(imageVector = Icons.Default.Share,contentDescription = "分享",tint = Color.White // 自定义图标颜色)}// 删除按钮FilledIconButton(onClick = { /* 禁用状态下点击无响应 */ },enabled = false // 禁用按钮) {Icon(imageVector = Icons.Default.Delete,contentDescription = "删除")}}
}

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material.icons.filled.Notifications
import androidx.compose.material.icons.filled.Remove
import androidx.compose.material3.Badge
import androidx.compose.material3.BadgedBox
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.FilledIconButton
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButtonDefaults
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun FilledIconButtonDemo02() {var unreadCount by remember { mutableStateOf(3) }Scaffold(topBar = {androidx.compose.material3.TopAppBar(title = { Text("带徽章的图标按钮") },actions = {BadgedBox(badge = {if (unreadCount > 0) {Badge(containerColor = Color.Red,contentColor = Color.White) {Text(text = if (unreadCount > 9) "9+" else unreadCount.toString(),style = MaterialTheme.typography.labelSmall)}}}) {FilledIconButton(onClick = {unreadCount = 0},modifier = Modifier.size(40.dp) ) {Icon(imageVector = Icons.Default.Notifications,contentDescription = "通知")}}})}) { innerPadding ->Box(modifier = Modifier.fillMaxSize().padding(innerPadding),contentAlignment = Alignment.Center) {Column {Row(modifier = Modifier.padding(16.dp),horizontalArrangement = Arrangement.spacedBy(16.dp)) {// 自定义添加按钮的颜色FilledIconButton(onClick = { },// 配置颜色colors = IconButtonDefaults.filledIconButtonColors(containerColor = Color(0xFF4CAF50), contentColor = Color.White, disabledContainerColor = Color(0xFFC8E6C9), disabledContentColor = Color(0xFF757575))) {Icon(imageVector = Icons.Default.Add,contentDescription = "添加")}// 自定义删除按钮的颜色（禁用状态）FilledIconButton(onClick = {  },enabled = false, // 禁用按钮colors = IconButtonDefaults.filledIconButtonColors(containerColor = Color(0xFFF44336), contentColor = Color.White,disabledContainerColor = Color(0xFFFFCDD2), disabledContentColor = Color(0xFFBDBDBD) )) {Icon(imageVector = Icons.Default.Remove,contentDescription = "删除")}}}}}
}

注意:
1 依赖版本一致性：FilledIconButton属于Material3组件，需确保项目中material3依赖版本与Compose其他库兼容。
2 点击事件无耗时操作：onClick回调中避免执行耗时操作，需通过协程将耗时逻辑切换到后台线程，否则会导致UI卡顿。