跳转到内容

LoadingButton

内置加载态的文本按钮,对应 ColorOS 的 COUILoadingButton:加载时标签隐藏,三个小圆点以错峰波浪脉动,并吞掉点击以避免动作被重复触发。

引入

kotlin
import io.github.suqi8.coui.kmp.basic.LoadingButton
import io.github.suqi8.coui.kmp.basic.LoadingButtonDefaults

基本用法

kotlin
var isLoading by remember { mutableStateOf(false) }

LoadingButton(
    text = "Download",
    onClick = { isLoading = true },
    isLoading = isLoading,
    colors = ButtonDefaults.textButtonColorsPrimary(),
)

带加载文案

kotlin
LoadingButton(
    text = "Sign in",
    onClick = { isLoading = true },
    isLoading = isLoading,
    loadingText = "Signing in",
)

组件状态

禁用状态

kotlin
LoadingButton(
    text = "Download",
    onClick = { /* Handle click event */ },
    enabled = false,
)

属性

LoadingButton

属性类型说明默认值是否必须
textString非加载态显示的标签-
onClick() -> Unit点击回调,加载中不会被调用-
modifierModifier应用于按钮的修饰符Modifier
isLoadingBoolean按钮是否处于加载态false
loadingTextString?加载时显示在圆点旁的文案null
enabledBoolean按钮是否启用true
cornerRadiusDp按钮圆角半径ButtonDefaults.CornerRadius
minWidthDp按钮最小宽度ButtonDefaults.MinWidth
minHeightDp按钮最小高度ButtonDefaults.MinHeight
colorsTextButtonColors颜色配置ButtonDefaults.textButtonColors()
insideMarginPaddingValues按钮内部边距ButtonDefaults.InsideMargin
interactionSourceMutableInteractionSource?按钮的交互源null
indicationIndication?按钮的指示效果(COUI 按压反馈已内置)null

LoadingButtonDefaults

常量类型说明默认值
DotRadiusDp每个加载圆点的半径1.dp
DotSpacingDp相邻加载圆点之间的间距2.dp

行为

  • isLoadingtrue 时标签隐藏但仍参与测量,按钮宽度不会跳变;点击被吞掉,COUI 按压反馈(缩放 + 着色)仍会播放。
  • 三个圆点按线性曲线以 20% -> 50% -> 100% -> 50% -> 20% 的透明度脉动;相邻圆点错峰 333ms,整个 1332ms 波浪循环播放,与 COUILoadingButton 的动画器时序一致。
  • 设置 loadingText 后,加载态显示该文案及其后三个逐点动画的 "." 字形,替代纯圆点指示(COUIButton isShowLoadingText)。
  • 圆点使用按钮内容色绘制,与 COUILoadingButton 使用标签画笔一致。

变更日志

基于 Apache-2.0 许可发布