AndroidView与TopAppBar叠加问题：内容被遮挡如何解决？

问题根源是你没利用Scaffold提供的布局偏移参数。Scaffold的content lambda会传入一个PaddingValues对象，它包含了TopAppBar等组件占用的空间，把这个padding应用到AndroidView上就能避免内容被遮挡。

修改步骤 #

1. 在Scaffold的content块中接收PaddingValues参数，传递给GreetingX
2. 给GreetingX添加Modifier参数，将padding应用到AndroidView上

修改后的完整代码 #

class MainActivity : ComponentActivity() {
    @OptIn(ExperimentalMaterial3Api::class)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            RecyclverTestTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    Scaffold(topBar = {
                        TopAppBar(title = {
                            Text(text = "sadsd")
                        })
                    }) { paddingValues ->
                        GreetingX(modifier = Modifier.padding(paddingValues))
                    }
                }
            }
        }
    }
}

@Composable
fun GreetingX(modifier: Modifier = Modifier) {
    AndroidView(
        factory = { context ->
            val cl = ConstraintLayout(context)
            cl.layoutParams = ViewGroup.LayoutParams(
                ViewGroup.LayoutParams.MATCH_PARENT,
                ViewGroup.LayoutParams.MATCH_PARENT
            )
            cl.setBackgroundColor(context.getColor(android.R.color.holo_red_dark))
            cl
        },
        modifier = modifier.fillMaxSize()
    )
}

原理说明 #

Scaffold会自动计算TopAppBar的高度并封装到PaddingValues中，通过Modifier.padding(paddingValues)给AndroidView设置顶部内边距，让内容从TopAppBar下方开始渲染，彻底解决遮挡问题。这种方式符合Jetpack Compose的布局规范，比直接在Android View中手动设置margin更灵活统一。

内容的提问来源于stack exchange，提问作者J. Doe