如何在Kotlin和Jetpack Compose中可视化选择枚举值？

方法一：使用Material3的SegmentedButtonRow（推荐） #

这是Jetpack Compose中对应SwiftUI SegmentedPickerStyle 的官方组件，适配Material3设计规范，视觉和交互效果与你需要的完全一致。

1. 定义Kotlin枚举类 #

先将iOS端的枚举转换为Kotlin枚举，可选添加友好显示文本：

enum class Categories {
    Womens, Mens, Mixed;

    // 自定义显示文本（如果需要和枚举原始名称区分）
    val displayName: String
        get() = when(this) {
            Womens -> "女装"
            Mens -> "男装"
            Mixed -> "混合"
        }
}

2. 实现分段选择器 #

结合mutableStateOf管理选中状态，用SegmentedButtonRow和SegmentedButton构建组件：

import androidx.compose.foundation.layout.padding
import androidx.compose.material3.SegmentedButton
import androidx.compose.material3.SegmentedButtonRow
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.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun CategorySegmentedPicker() {
    // 管理选中的枚举状态
    var selectedCategory by remember { mutableStateOf(Categories.Womens) }

    SegmentedButtonRow(modifier = Modifier.padding(16.dp)) {
        Categories.values().forEach { category ->
            SegmentedButton(
                selected = selectedCategory == category,
                onClick = { selectedCategory = category }
            ) {
                Text(text = category.displayName)
            }
        }
    }

    // 可选：展示当前选中结果
    Text(
        text = "当前选中：${selectedCategory.displayName}",
        modifier = Modifier.padding(16.dp)
    )
}

方法二：使用Material2的TabRow（兼容旧版） #

如果项目仍使用Material2，可通过TabRow实现类似效果：

import androidx.compose.foundation.layout.padding
import androidx.compose.material.Tab
import androidx.compose.material.TabRow
import androidx.compose.material.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.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun CategoryTabPicker() {
    var selectedIndex by remember { mutableStateOf(0) }
    val categories = Categories.values()

    TabRow(selectedTabIndex = selectedIndex) {
        categories.forEachIndexed { index, category ->
            Tab(
                selected = selectedIndex == index,
                onClick = { selectedIndex = index },
                text = { Text(category.displayName) }
            )
        }
    }

    // 可选：展示当前选中结果
    Text(
        text = "当前选中：${categories[selectedIndex].displayName}",
        modifier = Modifier.padding(16.dp)
    )
}

复用适配其他枚举 #

上述逻辑可直接复用给Leagues、Divisions等其他枚举，比如：

enum class Leagues {
    Premier, Championship, LeagueOne;

    val displayName: String
        get() = when(this) {
            Premier -> "英超"
            Championship -> "英冠"
            LeagueOne -> "英甲"
        }
}

@Composable
fun LeagueSegmentedPicker() {
    var selectedLeague by remember { mutableStateOf(Leagues.Premier) }

    SegmentedButtonRow(modifier = Modifier.padding(16.dp)) {
        Leagues.values().forEach { league ->
            SegmentedButton(
                selected = selectedLeague == league,
                onClick = { selectedLeague = league }
            ) {
                Text(text = league.displayName)
            }
        }
    }
}

实现后，你只需在选中状态变化时，用当前枚举值过滤数据数组即可完成业务逻辑。

内容的提问来源于stack exchange，提问作者Zonker.in.Geneva