如何让Scaffold内容内边距可复用?解决参数报错问题
解决Scaffold内容内边距复用问题
核心问题是MyReusableScaffold里的scaffoldContent参数定义成了无参可组合函数,没法接收Scaffold提供的contentPadding,同时MyHomeScreen里不知道如何传递这个参数。按以下步骤修改:
修正后的完整代码
1. 重构复用Scaffold组件
@Composable fun MyReusableScaffold( scaffoldTitle: String, // 修改参数类型,让它接收PaddingValues scaffoldContent: @Composable (PaddingValues) -> Unit ) { val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior() Scaffold( modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection), topBar = { LargeTopAppBar( title = { Text(text = scaffoldTitle) }, scrollBehavior = scrollBehavior ) }, content = { contentPadding -> // 现在可以正常传递contentPadding给scaffoldContent scaffoldContent(contentPadding) } ) }
2. 修正内容组件(修复未定义的item变量)
@Composable fun MyScaffoldContent( modifier: Modifier = Modifier, contentPadding: PaddingValues = PaddingValues() ) { Text( text = "Header", // 去掉未定义的$item modifier = modifier .fillMaxWidth() // 记得应用contentPadding,不然内边距不会生效 .padding(contentPadding) ) } @Composable fun MyScreenContent( modifier: Modifier = Modifier, contentPadding: PaddingValues = PaddingValues() ) { Text( text = "Header", modifier = modifier .fillMaxWidth() .padding(contentPadding) ) }
3. 正确调用复用Scaffold
@Composable fun MyHomeScreen(navController: NavController) { MyReusableScaffold( scaffoldTitle = "Hello Android", // 用lambda接收contentPadding,再传给MyScreenContent scaffoldContent = { contentPadding -> MyScreenContent(contentPadding = contentPadding) } ) }
关键修改说明
- 把
MyReusableScaffold的scaffoldContent参数从无参函数改为接收PaddingValues的函数,这样才能承接Scaffold自动计算的内边距(比如避开TopAppBar的高度)。 - 在
MyHomeScreen中,不能直接传MyScreenContent的函数引用,因为它需要contentPadding参数,必须用lambda表达式把Scaffold传递的参数转递给内容组件。 - 内容组件里记得用
modifier.padding(contentPadding)把内边距应用到UI上,不然设置了也不会生效。
内容的提问来源于stack exchange,提问作者wbk727
相关产品推荐
相关产品推荐

