TabRow
TabRow 是 Miuix 中的导航组件，用于创建可横向滚动的标签页。提供了标准样式和带轮廓（Contour）样式两种变体，适用于内容分类和导航场景。
引入
kotlin
import top.yukonga.miuix.kmp.basic.TabRow // 标准样式
import top.yukonga.miuix.kmp.basic.TabRowWithContour // 带轮廓样式基本用法
标准样式
kotlin
val tabs = listOf("推荐", "关注", "热门", "精选")
var selectedTabIndex by remember { mutableStateOf(0) }
TabRow(
tabs = tabs,
selectedTabIndex = selectedTabIndex,
onTabSelected = { selectedTabIndex = it }
)带轮廓样式
kotlin
val tabs = listOf("全部", "照片", "视频", "文档")
var selectedTabIndex by remember { mutableStateOf(0) }
TabRowWithContour(
tabs = tabs,
selectedTabIndex = selectedTabIndex,
onTabSelected = { selectedTabIndex = it }
)记住滚动位置
kotlin
val tabs = listOf("标签1", "标签2", "标签3", "标签4", "标签5")
var selectedTabIndex by remember { mutableStateOf(3) }
val tabListState = rememberLazyListState()
TabRowWithContour(
tabs = tabs,
selectedTabIndex = selectedTabIndex,
onTabSelected = { selectedTabIndex = it },
listState = tabListState,
)属性
TabRow 属性
| 属性名 | 类型 | 说明 | 默认值 | 是否必须 |
|---|---|---|---|---|
| tabs | List<String> | 标签文本列表 | - | 是 |
| selectedTabIndex | Int | 当前选中的标签索引 | - | 是 |
| onTabSelected | (Int) -> Unit | 标签选中时的回调函数 | - | 是 |
| modifier | Modifier | 应用于标签行的修饰符 | Modifier | 否 |
| colors | TabRowColors | 标签行的颜色配置 | TabRowDefaults.tabRowColors() | 否 |
| minWidth | Dp | 每个标签的最小宽度 | TabRowDefaults.TabRowMinWidth | 否 |
| maxWidth | Dp | 每个标签的最大宽度 | TabRowDefaults.TabRowMaxWidth | 否 |
| height | Dp | 标签行的高度 | TabRowDefaults.TabRowHeight | 否 |
| cornerRadius | Dp | 标签的圆角半径 | TabRowDefaults.TabRowCornerRadius | 否 |
| itemSpacing | Dp | 标签之间的间距 | 9.dp | 否 |
| contentAlignment | Alignment | 标签内容的对齐方式 | Alignment.Center | 否 |
| listState | LazyListState? | 标签列表的外部滚动状态 | null | 否 |
| interactionSource | MutableInteractionSource? | 标签项的交互源 | null | 否 |
| indication | Indication? | 标签项的点击反馈效果 | null | 否 |
TabRowWithContour 属性
| 属性名 | 类型 | 说明 | 默认值 | 是否必须 |
|---|---|---|---|---|
| tabs | List<String> | 标签文本列表 | - | 是 |
| selectedTabIndex | Int | 当前选中的标签索引 | - | 是 |
| onTabSelected | (Int) -> Unit | 标签选中时的回调函数 | - | 是 |
| modifier | Modifier | 应用于标签行的修饰符 | Modifier | 否 |
| colors | TabRowColors | 标签行的颜色配置 | TabRowDefaults.tabRowColors() | 否 |
| minWidth | Dp | 每个标签的最小宽度 | TabRowDefaults.TabRowWithContourMinWidth | 否 |
| maxWidth | Dp | 每个标签的最大宽度 | TabRowDefaults.TabRowWithContourMaxWidth | 否 |
| height | Dp | 标签行的高度 | TabRowDefaults.TabRowWithContourHeight | 否 |
| cornerRadius | Dp | 标签的圆角半径 | TabRowDefaults.TabRowWithContourCornerRadius | 否 |
| itemSpacing | Dp | 标签之间的间距 | 5.dp | 否 |
| contentAlignment | Alignment | 标签内容的对齐方式 | Alignment.Center | 否 |
| listState | LazyListState? | 标签列表的外部滚动状态 | null | 否 |
| interactionSource | MutableInteractionSource? | 标签项的交互源 | null | 否 |
| indication | Indication? | 标签项的点击反馈效果 | null | 否 |
TabRowDefaults 对象
TabRowDefaults 对象提供了 TabRow 组件的默认配置。
常量
| 常量名 | 类型 | 值 | 说明 |
|---|---|---|---|
| TabRowHeight | Dp | 42.dp | 标准样式的默认高度 |
| TabRowWithContourHeight | Dp | 45.dp | 带轮廓样式的默认高度 |
| TabRowCornerRadius | Dp | 12.dp | 标准样式的默认圆角半径 |
| TabRowWithContourCornerRadius | Dp | 8.dp | 带轮廓样式的默认圆角半径 |
| TabRowMinWidth | Dp | 76.dp | 标准样式的每个标签最小宽度 |
| TabRowWithContourMinWidth | Dp | 62.dp | 带轮廓样式的每个标签最小宽度 |
| TabRowMaxWidth | Dp | 98.dp | 标准样式的每个标签最大宽度 |
| TabRowWithContourMaxWidth | Dp | 84.dp | 带轮廓样式的每个标签最大宽度 |
方法
| 方法名 | 类型 | 说明 |
|---|---|---|
| tabRowColors() | TabRowColors | 创建标签行的默认颜色配置 |
TabRowColors 类
| 属性名 | 类型 | 说明 |
|---|---|---|
| backgroundColor | Color | 标签的默认背景色 |
| contentColor | Color | 标签的默认内容色 |
| selectedBackgroundColor | Color | 选中状态时标签的背景色 |
| selectedContentColor | Color | 选中状态时标签的内容色 |
进阶用法
自定义颜色
kotlin
val tabs = listOf("最新", "热门", "关注")
var selectedTabIndex by remember { mutableStateOf(0) }
TabRow(
tabs = tabs,
selectedTabIndex = selectedTabIndex,
onTabSelected = { selectedTabIndex = it },
colors = TabRowDefaults.tabRowColors(
backgroundColor = Color.LightGray.copy(alpha = 0.5f),
contentColor = Color.Gray,
selectedBackgroundColor = MiuixTheme.colorScheme.primary,
selectedContentColor = Color.White
)
)自定义尺寸
kotlin
val tabs = listOf("短视频", "直播", "图文")
var selectedTabIndex by remember { mutableStateOf(0) }
TabRowWithContour(
tabs = tabs,
selectedTabIndex = selectedTabIndex,
onTabSelected = { selectedTabIndex = it },
minWidth = 100.dp,
height = 50.dp,
cornerRadius = 15.dp
)与 Pager 结合使用
kotlin
val tabs = listOf("页面1", "页面2", "页面3")
val pagerState = rememberPagerState { tabs.size }
val scope = rememberCoroutineScope()
Surface {
Column {
TabRow(
tabs = tabs,
selectedTabIndex = pagerState.currentPage,
onTabSelected = { index ->
scope.launch { pagerState.animateScrollToPage(index) }
}
)
HorizontalPager(
state = pagerState,
modifier = Modifier.fillMaxSize()
) { page ->
Box(
modifier = Modifier.fillMaxSize(),
contentAlignment = Alignment.Center
) {
Text("页面内容 ${page + 1}")
}
}
}
}
