|
| 1 | +# IconButton |
| 2 | + |
| 3 | +`IconButton` 是 Miuix 中的图标按钮组件，用于提供辅助操作的交互点。它们通常用于需要紧凑按钮的场景，如工具栏或图片列表中。 |
| 4 | + |
| 5 | +## 引入 |
| 6 | + |
| 7 | +```kotlin |
| 8 | +import top.yukonga.miuix.kmp.basic.IconButton |
| 9 | +``` |
| 10 | + |
| 11 | +## 基本用法 |
| 12 | + |
| 13 | +IconButton 组件可以用于触发操作或事件： |
| 14 | + |
| 15 | +```kotlin |
| 16 | +IconButton( |
| 17 | + onClick = { /* 处理点击事件 */ } |
| 18 | +) { |
| 19 | + Icon( |
| 20 | + imageVector = MiuixIcons.Useful.Like, |
| 21 | + contentDescription = "点赞" |
| 22 | + ) |
| 23 | +} |
| 24 | +``` |
| 25 | + |
| 26 | +## 组件状态 |
| 27 | + |
| 28 | +### 禁用状态 |
| 29 | + |
| 30 | +```kotlin |
| 31 | +IconButton( |
| 32 | + onClick = { /* 处理点击事件 */ }, |
| 33 | + enabled = false |
| 34 | +) { |
| 35 | + Icon( |
| 36 | + imageVector = MiuixIcons.Useful.Like, |
| 37 | + contentDescription = "点赞" |
| 38 | + ) |
| 39 | +} |
| 40 | +``` |
| 41 | + |
| 42 | +### 按下状态 |
| 43 | + |
| 44 | +IconButton 支持通过 `holdDownState` 参数控制按下状态，通常用于显示弹出对话框时的视觉反馈： |
| 45 | + |
| 46 | +```kotlin |
| 47 | +Scaffold { |
| 48 | + var showDialog = remember { mutableStateOf(false) } |
| 49 | + IconButton( |
| 50 | + onClick = { showDialog.value = true }, |
| 51 | + holdDownState = showDialog.value |
| 52 | + ) { |
| 53 | + Icon( |
| 54 | + imageVector = MiuixIcons.Useful.Like, |
| 55 | + contentDescription = "点赞" |
| 56 | + ) |
| 57 | + } |
| 58 | + // 在其他地方定义对话框 |
| 59 | + SuperDialog( |
| 60 | + title = "对话框", |
| 61 | + show = showDialog, |
| 62 | + onDismissRequest = { dismissDialog(showDialog) } // 关闭对话框 |
| 63 | + ) { |
| 64 | + // 对话框内容 |
| 65 | + } |
| 66 | +} |
| 67 | +``` |
| 68 | + |
| 69 | +## 属性 |
| 70 | + |
| 71 | +### IconButton 属性 |
| 72 | + |
| 73 | +| 属性名 | 类型 | 说明 | 默认值 | 是否必须 | |
| 74 | +| --------------- | ---------------------- | --------------------- | ------------------------------- | -------- | |
| 75 | +| onClick | () -> Unit | 点击按钮时触发的回调 | - | 是 | |
| 76 | +| modifier | Modifier | 应用于按钮的修饰符 | Modifier | 否 | |
| 77 | +| enabled | Boolean | 按钮是否可点击 | true | 否 | |
| 78 | +| holdDownState | Boolean | 是否处于按下状态 | false | 否 | |
| 79 | +| backgroundColor | Color | 按钮的背景颜色 | Color.Unspecified | 否 | |
| 80 | +| cornerRadius | Dp | 按钮圆角半径 | IconButtonDefaults.CornerRadius | 否 | |
| 81 | +| minHeight | Dp | 按钮最小高度 | IconButtonDefaults.MinHeight | 否 | |
| 82 | +| minWidth | Dp | 按钮最小宽度 | IconButtonDefaults.MinWidth | 否 | |
| 83 | +| content | @Composable () -> Unit | 按钮内容，通常是 Icon | - | 是 | |
| 84 | + |
| 85 | +### IconButtonDefaults 对象 |
| 86 | + |
| 87 | +IconButtonDefaults 对象提供了图标按钮组件的默认值。 |
| 88 | + |
| 89 | +#### 常量 |
| 90 | + |
| 91 | +| 常量名 | 类型 | 说明 | 默认值 | |
| 92 | +| ------------ | ---- | -------------- | ------ | |
| 93 | +| MinWidth | Dp | 按钮的最小宽度 | 40.dp | |
| 94 | +| MinHeight | Dp | 按钮的最小高度 | 40.dp | |
| 95 | +| CornerRadius | Dp | 按钮的圆角半径 | 40.dp | |
| 96 | + |
| 97 | +## 进阶用法 |
| 98 | + |
| 99 | +### 自定义背景颜色 |
| 100 | + |
| 101 | +```kotlin |
| 102 | +IconButton( |
| 103 | + onClick = { /* 处理点击事件 */ }, |
| 104 | + backgroundColor = Color.LightGray.copy(alpha = 0.3f) |
| 105 | +) { |
| 106 | + Icon( |
| 107 | + imageVector = MiuixIcons.Useful.Like, |
| 108 | + contentDescription = "点赞" |
| 109 | + ) |
| 110 | +} |
| 111 | +``` |
| 112 | + |
| 113 | +### 自定义大小和圆角 |
| 114 | + |
| 115 | +```kotlin |
| 116 | +IconButton( |
| 117 | + onClick = { /* 处理点击事件 */ }, |
| 118 | + minWidth = 48.dp, |
| 119 | + minHeight = 48.dp, |
| 120 | + cornerRadius = 12.dp |
| 121 | +) { |
| 122 | + Icon( |
| 123 | + imageVector = MiuixIcons.Useful.Like, |
| 124 | + contentDescription = "点赞" |
| 125 | + ) |
| 126 | +} |
| 127 | +``` |
| 128 | + |
| 129 | +### 结合其他组件使用 |
| 130 | + |
| 131 | +```kotlin |
| 132 | +Surface { |
| 133 | + Row( |
| 134 | + verticalAlignment = Alignment.CenterVertically |
| 135 | + ) { |
| 136 | + IconButton( |
| 137 | + onClick = { /* 处理点击事件 */ } |
| 138 | + ) { |
| 139 | + Icon( |
| 140 | + imageVector = MiuixIcons.Useful.New, |
| 141 | + tint = MiuixTheme.colorScheme.onBackground, |
| 142 | + contentDescription = "添加" |
| 143 | + ) |
| 144 | + } |
| 145 | + Text("添加新项目") |
| 146 | + } |
| 147 | +} |
| 148 | +``` |
| 149 | + |
| 150 | +### 动态图标按钮 |
| 151 | + |
| 152 | +```kotlin |
| 153 | +var isLiked by remember { mutableStateOf(false) } |
| 154 | +IconButton( |
| 155 | + onClick = { isLiked = !isLiked } |
| 156 | +) { |
| 157 | + Icon( |
| 158 | + imageVector = if (isLiked) MiuixIcons.Useful.Like else MiuixIcons.Useful.Unlike, |
| 159 | + contentDescription = if (isLiked) "已点赞" else "点赞", |
| 160 | + tint = if (isLiked) Color.Red else MiuixTheme.colorScheme.onBackground |
| 161 | + ) |
| 162 | +} |
| 163 | +``` |
| 164 | + |
0 commit comments