Android Jetpack Compose实现垂直TabView的方案咨询

没错，ScrollableTabRow 和 TabRow 确实仅支持水平布局，没有直接设置垂直方向的属性。用可滚动的 Column 是实现垂直Tab栏的可行方案，下面是具体实现代码：

完整实现示例 #

@Composable
fun VerticalTabView(
    tabs: List<String>,
    selectedTabIndex: Int,
    onTabClick: (Int) -> Unit,
    content: @Composable (Int) -> Unit
) {
    Row(modifier = Modifier.fillMaxSize()) {
        // 垂直可滚动Tab栏
        Column(
            modifier = Modifier
                .fillMaxHeight()
                .width(120.dp)
                .verticalScroll(rememberScrollState()),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            tabs.forEachIndexed { tabIndex, tab ->
                val isSelected = selectedTabIndex == tabIndex
                Tab(
                    selected = isSelected,
                    onClick = { onTabClick(tabIndex) },
                    modifier = Modifier
                        .fillMaxWidth()
                        .background(if (isSelected) Color.Gray.copy(alpha = 0.3f) else Color.Transparent),
                    text = {
                        Text(
                            text = tab,
                            color = if (isSelected) Color.Blue else Color.Black,
                            modifier = Modifier.padding(vertical = 16.dp)
                        )
                    }
                )
            }
        }

        // 内容区域
        Box(modifier = Modifier.fillMaxSize()) {
            content(selectedTabIndex)
        }
    }
}

// 使用示例
@Composable
fun UsageExample() {
    val tabs = listOf("标签1", "标签2", "标签3", "标签4", "标签5", "标签6")
    var selectedTabIndex by remember { mutableStateOf(0) }

    VerticalTabView(
        tabs = tabs,
        selectedTabIndex = selectedTabIndex,
        onTabClick = { selectedTabIndex = it }
    ) { index ->
        Text(
            text = "当前显示标签${index + 1}的内容",
            modifier = Modifier.fillMaxSize(),
            textAlign = TextAlign.Center,
            fontSize = 20.sp
        )
    }
}

关键说明 #

• 用 Column 配合 verticalScroll(rememberScrollState()) 实现垂直滚动的Tab列表
• 自定义Tab选中样式：通过判断 isSelected 切换背景色、文字颜色，强化视觉区分
• 整体用 Row 拆分Tab栏与内容区域，保证左右布局的合理性
• 可根据需求调整Tab栏宽度、内边距、选中样式等细节

内容的提问来源于stack exchange，提问作者kedark