3 
@Composable
fun LayoutsCodelab() {
    Scaffold(
        topBar = {
            TopAppBar(
                title = {
                    Text(text = "LayoutsCodelab")
                }
            )
        }
    ) { innerPadding ->
        BodyContent(Modifier.padding(innerPadding))
    }
}

删除innerPadding不会改变任何东西。

请注意，我是Compose的新手。
如果您有任何困惑，请在评论中提问

4

1 回答 1

1

仅当您设置了 bottomBar 参数时，才会设置为您的内容提供的填充值。不幸的是，这没有记录。如果设置bottomBar，Scaffold会将PaddingValues的底部填充设置为bottomBar内容使用的内容高度。其他填充值（开始、顶部、结束）当前设置为零。不确定将来是否会改变。

如果您的内容包含可滚动列表并且您希望将列表底部偏移底部栏内容的高度，则提供底部填充很有用。如果您不包含任何 bottomBar 内容，则 PaddingValues 将始终保持设置为零。

下面是一个示例，展示了当 bottomBar 使用 BottomAppBar 时如何将 PaddingValues 参数传递到您的内容中。它显示 50 个项目的列表。将填充添加到 Column 后，您可以滚动到底部并查看最后一项。如果您删除 Column 的填充并重复测试，当您滚动到底部时，最后几个项目不可见，因为 Column 一直延伸到脚手架的底部，没有任何底部填充，底部应用栏覆盖了最后几个项目：

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        startActivity(intent)

        setContent {

            Scaffold(
                topBar = {
                    TopAppBar(
                        title = {
                            Text(text = "Padding values in a scaffold")
                        }
                    )
                },
                bottomBar = {
                    BottomAppBar() {
                        CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.high) {
                            IconButton(onClick = { /* doSomething() */ }) {
                                Icon(Icons.Filled.Menu, contentDescription = "Localized description")
                            }
                        }
                        Spacer(Modifier.weight(1f, true))
                        IconButton(onClick = { /* doSomething() */ }) {
                            Icon(Icons.Filled.Favorite, contentDescription = "Localized description")
                        }
                        IconButton(onClick = { /* doSomething() */ }) {
                            Icon(Icons.Filled.Favorite, contentDescription = "Localized description")
                        }
                    }
                }
            ) { paddingValues ->
                Column(modifier = Modifier
                    .fillMaxSize()
                    .padding(bottom = paddingValues.calculateBottomPadding())
                    .verticalScroll(rememberScrollState())) {

                    Text("Bottom app bar padding:  $paddingValues")

                    repeat(50) {
                        Text(it.toString())
                    }
                }
            }
        }
    }
}

我不明白为什么谷歌不包括顶部填充。毕竟，如果包含顶部的应用栏，它也会占用空间。我认为原因与顶部栏倒塌有关。如果顶部应用栏在滚动时折叠，则内容区域需要扩展 - 因此在顶部添加填充可能没有意义。如果顶部应用栏保持固定，这确实有意义。

于 2021-12-03T07:08:03.470 回答