SuperSpinner

SuperSpinner 是 Miuix 中的下拉选择器组件，提供了标题、摘要和带有图标、文本的选项列表，支持点击交互和多种显示模式，常用于具有视觉辅助的选项设置中。该组件与 SuperDropdown 组件类似，但提供更丰富的功能和交互体验。

使用前提

此组件依赖 Scaffold 提供的 MiuixPopupHost 以显示弹出内容。必须在 Scaffold 中使用，否则弹出内容无法正常渲染。

引入

kotlin

import top.yukonga.miuix.kmp.extra.SuperSpinner
import top.yukonga.miuix.kmp.extra.SpinnerEntry

基本用法

SuperSpinner 组件提供了基础的下拉选择器功能：

kotlin

var selectedIndex by remember { mutableStateOf(0) }
val options = listOf(
    SpinnerEntry(title = "选项 1"),
    SpinnerEntry(title = "选项 2"),
    SpinnerEntry(title = "选项 3"),
)

Scaffold {
    SuperSpinner(
        title = "下拉选择器",
        items = options,
        selectedIndex = selectedIndex,
        onSelectedIndexChange = { selectedIndex = it }
    )
}

带图标和摘要的选项

kotlin

// 创建一个圆角矩形的 Painter
class RoundedRectanglePainter(
    private val cornerRadius: Dp = 6.dp
) : Painter() {
    override val intrinsicSize = Size.Unspecified

    override fun DrawScope.onDraw() {
        drawRoundRect(
            color = Color.White,
            size = Size(size.width, size.height),
            cornerRadius = CornerRadius(cornerRadius.toPx(), cornerRadius.toPx())
        )
    }
}

var selectedIndex by remember { mutableStateOf(0) }
val options = listOf(
    SpinnerEntry(
        icon = { Icon(RoundedRectanglePainter(), "Icon", Modifier.padding(end = 12.dp), Color(0xFFFF5B29)) },
        title = "红色主题",
        summary = "活力四射的红色"
    ),
    SpinnerEntry(
        icon = { Icon(RoundedRectanglePainter(), "Icon", Modifier.padding(end = 12.dp), Color(0xFF3482FF)) },
        title = "蓝色主题",
        summary = "沉稳冷静的蓝色"
    ),
)

Scaffold {
    SuperSpinner(
        title = "功能选择",
        summary = "选择您要执行的操作",
        items = options,
        selectedIndex = selectedIndex,
        onSelectedIndexChange = { selectedIndex = it }
    )
}

组件状态

禁用状态

kotlin

SuperSpinner(
    title = "禁用选择器",
    summary = "此选择器当前不可用",
    items = listOf(SpinnerEntry(title = "选项 1")),
    selectedIndex = 0,
    onSelectedIndexChange = {},
    enabled = false
)

对话框模式

SuperSpinner 还支持对话框模式，适用于显示较多选项或需要更醒目的选择界面时。通过提供 dialogButtonString 参数即可激活此模式。

kotlin

var selectedIndex by remember { mutableStateOf(0) }
val options = listOf(
    SpinnerEntry(title = "选项 A"),
    SpinnerEntry(title = "选项 B"),
    SpinnerEntry(title = "选项 C")
)

Scaffold {
    SuperSpinner(
        title = "对话框模式",
        dialogButtonString = "取消",
        items = options,
        selectedIndex = selectedIndex,
        onSelectedIndexChange = { selectedIndex = it }
    )
}

属性

SuperSpinner 属性（下拉列表模式）

属性名	类型	说明	默认值	是否必须
items	List<SpinnerEntry>	选项列表	-	是
selectedIndex	Int	当前选中项的索引	-	是
title	String	选择器的标题	-	是
modifier	Modifier	应用于组件的修饰符	Modifier	否
titleColor	BasicComponentColors	标题文本的颜色配置	BasicComponentDefaults.titleColor()	否
summary	String?	选择器的摘要说明	null	否
summaryColor	BasicComponentColors	摘要文本的颜色配置	BasicComponentDefaults.summaryColor()	否
spinnerColors	SpinnerColors	选择器的颜色配置	SpinnerDefaults.spinnerColors()	否
startAction	@Composable (() -> Unit)?	左侧显示的自定义内容	null	否
bottomAction	@Composable (() -> Unit)?	底部显示的自定义内容	null	否
insideMargin	PaddingValues	组件内部内容的边距	BasicComponentDefaults.InsideMargin	否
maxHeight	Dp?	下拉菜单的最大高度	null	否
enabled	Boolean	组件是否可交互	true	否
showValue	Boolean	是否显示当前选中的值	true	否
onSelectedIndexChange	((Int) -> Unit)?	选中项变化时的回调	-	否

SuperSpinner 属性（对话框模式）

属性名	类型	说明	默认值	是否必须
items	List<SpinnerEntry>	选项列表	-	是
selectedIndex	Int	当前选中项的索引	-	是
title	String	选择器的标题	-	是
dialogButtonString	String	对话框底部按钮的文本	-	是
modifier	Modifier	应用于组件的修饰符	Modifier	否
popupModifier	Modifier	应用于弹出对话框的修饰符	Modifier	否
titleColor	BasicComponentColors	标题文本的颜色配置	BasicComponentDefaults.titleColor()	否
summary	String?	选择器的摘要说明	null	否
summaryColor	BasicComponentColors	摘要文本的颜色配置	BasicComponentDefaults.summaryColor()	否
spinnerColors	SpinnerColors	选择器的颜色配置	SpinnerDefaults.dialogSpinnerColors()	否
startAction	@Composable (() -> Unit)?	左侧显示的自定义内容	null	否
bottomAction	@Composable (() -> Unit)?	底部显示的自定义内容	null	否
insideMargin	PaddingValues	组件内部内容的边距	BasicComponentDefaults.InsideMargin	否
enabled	Boolean	组件是否可交互	true	否
showValue	Boolean	是否显示当前选中的值	true	否
onSelectedIndexChange	((Int) -> Unit)?	选中项变化时的回调	-	否

SpinnerEntry 属性

属性名	类型	说明
icon	@Composable ((Modifier) -> Unit)?	选项的图标组件
title	String?	选项的标题
summary	String?	选项的摘要描述

SpinnerColors 属性

属性名	类型	说明
contentColor	Color	选项标题颜色
summaryColor	Color	选项摘要颜色
containerColor	Color	选项背景颜色
selectedContentColor	Color	选中项标题颜色
selectedSummaryColor	Color	选中项摘要颜色
selectedContainerColor	Color	选中项背景颜色
selectedIndicatorColor	Color	选中指示图标颜色

变更日志

最后编辑于大约 2 个月前

查看完整变更日志

SuperSpinner ​

引入 ​

基本用法 ​

带图标和摘要的选项 ​

组件状态 ​

禁用状态 ​

对话框模式 ​

属性 ​

SuperSpinner 属性（下拉列表模式） ​

SuperSpinner 属性（对话框模式） ​

SpinnerEntry 属性 ​

SpinnerColors 属性 ​

变更日志

SuperSpinner

引入

基本用法

带图标和摘要的选项

组件状态

禁用状态

对话框模式

属性

SuperSpinner 属性（下拉列表模式）

SuperSpinner 属性（对话框模式）

SpinnerEntry 属性

SpinnerColors 属性