Android Compose Material3：如何在同一布局中添加TopAppBar及下方Tabs

要在Material3的Scaffold里实现TopAppBar下方紧跟Tabs的效果，核心思路是把TopAppBar和TabRow组合成一个整体，赋值给Scaffold的topBar参数。下面是完整的实现示例：

步骤1：定义Tab状态与数据 #

先准备Tab的标题数据，并用状态变量跟踪选中的Tab索引：

// Tab标题列表
val tabTitles = listOf("首页", "发现", "我的")
// 记住选中的Tab索引，用于状态更新
val selectedTabIndex = remember { mutableStateOf(0) }

步骤2：组合TopAppBar与TabRow作为顶部栏 #

直接在Scaffold的topBar参数中用Column包裹TopAppBar和TabRow，让两者上下排列：

Scaffold(
    topBar = {
        Column {
            // 顶部的TopAppBar
            TopAppBar(
                title = { Text("我的应用") },
                navigationIcon = {
                    IconButton(onClick = { /* 这里写导航按钮逻辑 */ }) {
                        Icon(Icons.Default.Menu, contentDescription = "菜单")
                    }
                }
            )
            // TopAppBar下方的TabRow
            TabRow(
                selectedTabIndex = selectedTabIndex.value,
                containerColor = MaterialTheme.colorScheme.surface,
                contentColor = MaterialTheme.colorScheme.primary
            ) {
                tabTitles.forEachIndexed { index, title ->
                    Tab(
                        selected = selectedTabIndex.value == index,
                        onClick = { selectedTabIndex.value = index },
                        text = { Text(title) }
                    )
                }
            }
        }
    },
    content = { paddingValues ->
        // 根据选中的Tab切换显示内容
        Box(modifier = Modifier.padding(paddingValues)) {
            when(selectedTabIndex.value) {
                0 -> Text("首页内容区域")
                1 -> Text("发现内容区域")
                2 -> Text("我的内容区域")
            }
        }
    }
)

关键说明 #

• Scaffold的topBar参数支持任意@Composable组件，所以可以自由组合TopAppBar和TabRow作为整体顶部区域。
• TabRow的selectedTabIndex与状态变量绑定，点击Tab时更新状态，同步切换选中样式和内容区域。
• 记得给content区域添加paddingValues，避免内容被顶部栏遮挡。

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