Android Jetpack Compose中如何将TabLayout改为左侧垂直布局

TabRow 是Jetpack Compose中专门用于水平顶部排列标签的组件，仅设置 align(Alignment.Start) 只会让它在水平方向靠左，但无法改变其水平布局的本质，所以没法实现垂直排列的效果。要实现屏幕左侧垂直排列的标签，需要自定义垂直布局的标签栏，具体修改如下：

修改后的完整代码 #

@Composable
fun VerticalTabLayout() {
    var tabIndex by remember { mutableStateOf(0) }
    val tabs = listOf("Basic", "Medium", "Hard")

    // 根布局用Row，分为左侧垂直标签区和右侧内容区
    Row(modifier = Modifier.fillMaxSize()) {
        // 左侧垂直标签栏
        Column(
            modifier = Modifier
                .fillMaxHeight()
                .background(Color.LightGray.copy(alpha = 0.1f))
        ) {
            tabs.forEachIndexed { index, title ->
                val isSelected = tabIndex == index
                // 自定义可点击的标签项
                Text(
                    text = title,
                    modifier = Modifier
                        .fillMaxWidth()
                        .background(if (isSelected) Color.Blue.copy(alpha = 0.2f) else Color.Transparent)
                        .clickable { tabIndex = index }
                        .padding(horizontal = 16.dp, vertical = 12.dp),
                    color = if (isSelected) Color.Blue else Color.Black,
                    fontWeight = if (isSelected) FontWeight.Bold else FontWeight.Normal
                )
            }
        }

        // 右侧内容区域，根据选中标签切换内容
        Box(
            modifier = Modifier
                .fillMaxSize()
                .padding(16.dp),
            contentAlignment = Alignment.Center
        ) {
            Text(
                text = "当前选中：${tabs[tabIndex]}",
                fontSize = 20.sp
            )
        }
    }
}

关键修改说明 #

• 根布局从 Column 改为 Row，实现左右分栏布局
• 左侧用 Column 承载垂直排列的标签，通过 clickable 处理选中切换逻辑
• 自定义选中状态的视觉反馈：通过背景色、文字颜色、字体粗细区分选中/未选中标签
• 右侧区域填充剩余屏幕空间，根据 tabIndex 展示对应内容

如果需要和 Pager 组件配合使用（比如原来的 @ExperimentalPagerApi 场景），只需要把右侧的 Box 替换为 HorizontalPager 即可，逻辑保持一致。

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