Android Compose Material3 - 如何在同一布局中同时添加 TopAppBar 和选项卡？

Question

我正在使用带有 Jetpack Compose 和 Material 3 的 Android Studio。我想为机器人创建一个 topappbar 并在其下方创建多个选项卡。在材料 3 中，支架定义为：

@Composable
fun Scaffold(
    modifier: Modifier = Modifier,
    topBar: @Composable () -> Unit = {},
    bottomBar: @Composable () -> Unit = {},
    snackbarHost: @Composable () -> Unit = {},
    floatingActionButton: @Composable () -> Unit = {},
    floatingActionButtonPosition: FabPosition = FabPosition.End,
    containerColor: Color = MaterialTheme.colorScheme.background,
    contentColor: Color = contentColorFor(containerColor),
    contentWindowInsets: WindowInsets = ScaffoldDefaults.contentWindowInsets,
    content: @Composable (PaddingValues) -> Unit
): Unit

当我将 TopAppBar 分配给 topBar 参数时，它起作用了。同样，如果我将带有选项卡的 TopRow 添加到 topBar 参数，这也有效。但是我如何添加一个 TopAppBar 及其下方的选项卡。

谢谢

Answer 1

也许你可以试试这个：

 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun CustomTopBarWithTabs(
     title: String,
     selectedTabIndex: Int,
     changeTabIndex: (Int) -> Unit,
     modifier: Modifier = Modifier,
     behavior: TopAppBarScrollBehavior = 
 TopAppBarDefaults.pinnedScrollBehavior(),
 ) {
     val tabs = listOf("Home", "Settings", "Profile")
     Column(
         modifier = modifier.fillMaxWidth()
     ) {
         CenterAlignedTopAppBar(
             scrollBehavior = behavior,
             title = {Text(title)}
         )
         TabRow(
             selectedTabIndex = selectedTabIndex,
         ) {
             tabs.forEachIndexed { index, tabTitle ->
                 Tab(
                     modifier = Modifier.height(36.dp),
                     selected = selectedTabIndex == index,
                     onClick = { changeTabIndex(index) }
                 ) {
                     Text(text = tabTitle)
                 }
             }
         }
     }
 }

创建新文件，并将函数放入topBar参数中。

希望它有效！ :)

Answer 2

我通常这样做：

val scrollState = rememberScrollState()

Scaffold(
    modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
    topBar = { CenterAlignedTopAppBar() },
    content = {
        innerPadding ->
        Column(
            modifier = Modifier.padding(innerPadding)
        ) {
            TabRow(scrollState)
            Content(scrollState)
        }
    
    }
)

如果你想像内容滚动时的

topBar

一样提高它的高度，也许你可以写一个动画并听

scrollState

的变化

Answer 3

Scaffold(
        topBar = {
            Column(modifier = Modifier.fillMaxWidth()) {
                TopAppBarCustom()
                TabsCustom()
            }
        },
        bottomBar = {
            BottomBarCustom()
        }
    ) { 
    }