脚手架 TopAppBar 的 TopAppBarScrollBehavior 在非 LazyColumn 时不起作用

Question

我正在尝试将

TopAppBarScrollBehavior

用于

TopAppBar

内的

Scaffold

。但我的内容不是

LazyColumn

。这是一个常规的

Column

和

scrollstate

。 这是我的代码

Scaffold(
    modifier = Modifier
        .fillMaxSize()
        .background(backgroundColor),
    topBar = {
        TopAppBar(
            title = {
                Text(
                    text = "About",
                    color = colorResource(id = R.color.black)
                )
            },
            colors = TopAppBarDefaults.smallTopAppBarColors(
                containerColor = Color.Red,
                titleContentColor = Color.Black,
            ),
            modifier = Modifier
                .fillMaxWidth(),
            navigationIcon = {
                Button(onClick = { }) {
                    Text(text = "B1")
                }
            }, actions = {
                Button(onClick = {}) {
                    Text(text = "B2")
                }
            },
            scrollBehavior = scrollBehaviour
        )
    },
    content = {
        val scrollState = rememberScrollState()
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(it)
                .verticalScroll(scrollState)
        ) {
            // Header
            Text(
                text = "Header",
                modifier = Modifier
                    .padding(horizontal = 30.dp)
                    .wrapContentWidth()
                    .semantics { heading() },
                fontSize = 26.sp,
                color = colorResource(id = R.color.black)
            )

            //Many other components in between

            Text(
                text = "Some text",
                modifier = Modifier
                    .padding(start = 30.dp, end = 30.dp, top = 38.dp)
                    .wrapContentWidth()
                    .semantics { heading() },
                fontSize = 21.sp,
                color = colorResource(id = R.color.black)
            )
        }
    }
)

TopAppBar

不会根据滚动而折叠或展开。 我需要对

TopAppBar

进行哪些更改才能按预期运行。

Answer 1

如doc中所述：

滚动行为旨在与滚动内容结合使用，以在内容滚动时更改顶部应用栏的外观。

用途：

    val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior()
    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
        topBar = {
            TopAppBar(
                //....
                scrollBehavior = scrollBehavior
            )
        },
        content = { innerPadding ->
            Column(
                modifier = Modifier
                    .padding(innerPadding)
                    .verticalScroll(state = rememberScrollState())
            ) {
                  //column content
            }
        }
    )

Answer 2

如果您的内容不是 ScrollabeColumn 或 LazyColumn，那么您需要将内容包装在 ScrollableColumn 中才能正常工作

确保在 ScrollableColumn 的修饰符中使用 topAppBarScrollBehavior

Answer 3

对于在脚手架内容中使可滚动列工作遇到困难的任何人，您必须将脚手架内容包装在非内联可组合项中（意味着不是列/行等的自定义可组合项），即：

@Composable
fun ScaffoldContent(
    content: @Composable ColumnScope.() -> Unit,
    modifier: Modifier = Modifier
) {
    Column(
        modifier = modifier,
        content = content
    )
}

然后将其传递给 Scaffold 内容：

val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior()
    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
        topBar = {
            TopAppBar(
                //....
                scrollBehavior = scrollBehavior
            )
        },
        content = { innerPadding ->
            ScaffoldContent(
                modifier = Modifier
                    .padding(innerPadding)
                    .verticalScroll(state = rememberScrollState())
            ) {
                  //column content
            }
        }
    )

发生这种情况是因为 Column 是一个内联可组合项，并且它的溢出被切断。