如何在Compose UI中实现内容覆盖TopBar？

之前在XML里靠设置elevation和负内边距就能实现内容覆盖TopBar的效果，但换到Compose UI就卡壳了。下面是我目前的实现代码：

Scaffold(topBar = {
    LargeTopAppBar(
        colors = TopAppBarDefaults.largeTopAppBarColors(
            containerColor = Color.Blue,
            titleContentColor = Color.White
        ),
        title = {
            Row(
                modifier = Modifier.fillMaxWidth(),
                horizontalArrangement = Arrangement.SpaceBetween
            ) {
                Text(
                    "Title here",
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis
                )
                Row(
                    verticalAlignment = Alignment.CenterVertically,
                    horizontalArrangement = spacedBy(8.dp),
                    modifier = Modifier.padding(10.dp)
                ) {
                    Icon(
                        modifier = Modifier.size(size = 16.dp),
                        painter = painterResource(R.drawable.ic_share_white),
                        contentDescription = stringResource(id = R.string.share)
                    )
                    Text(
                        stringResource(R.string.share),
                        maxLines = 1,
                        fontSize = 16.sp,
                        overflow = TextOverflow.Ellipsis
                    )
                }
            }
        },
        navigationIcon = {
            IconButton(onClick = { /* doSomething() */ }) {
                Image(
                    painter = painterResource(R.drawable.ic_back),
                    contentDescription = stringResource(id = R.string.back),
                    contentScale = ContentScale.Crop
                )
            }
        },
        actions = {
            IconButton(onClick = { /* doSomething() */ }) {
                Text(
                    text = "asd",
                    color = Color.White,
                    fontSize = 17.sp
                )
            }
        },
        scrollBehavior = scrollBehavior
    )
}, content = { padding ->
    var offset by remember { mutableStateOf(0f) }

    Box(
        modifier = Modifier
            .padding(padding)
            .fillMaxSize()
    ) {
        Column(
            verticalArrangement = Arrangement.SpaceEvenly,
            horizontalAlignment = Alignment.CenterHorizontally,
            modifier = Modifier
                .fillMaxSize()
                .scrollable(
                    orientation = Orientation.Vertical,
                    state = rememberScrollableState { delta ->
                        offset += delta
                        delta
                    }
                )
                .padding(16.dp)
        ) {
            Box(
                modifier = Modifier
                    .fillMaxSize()
                    .shadow(
                        elevation = dimensionResource(
                            id = R.dimen.card_background_elevation
                        )
                    )
                    .background(
                        color = Color.White,
                        shape = RoundedCornerShape(size = 12.dp)
                    )
                    .padding(
                        all = dimensionResource(
                            id = R.dimen.card_background_top_margin
                        )
                    ),

            ){
                Text(text = "Hello World")
            }

        }
    }
})

预期效果：

解决方法 #

要在Compose里实现这个效果，核心就是绕开Scaffold默认的顶部内边距限制，让内容向上偏移，同时保证内容的阴影层级压过TopBar。具体改法如下：

关键修改点 #

1. 取消TopBar的阴影（或让内容阴影层级更高）：把TopBar的elevation设为0.dp，避免它的阴影挡住下方内容；或者让内容的shadow值比TopBar大。
2. 调整内容区的内边距：Scaffold的content默认会自动添加TopBar高度的顶部内边距，我们只保留水平和底部内边距，让内容能向上延伸。
3. 给内容加负的上边距：让内容向上偏移，覆盖TopBar底部区域，偏移量可以根据TopBar高度或视觉需求调整。

修改后的完整代码 #

val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior(rememberTopAppBarState())

Scaffold(topBar = {
    LargeTopAppBar(
        colors = TopAppBarDefaults.largeTopAppBarColors(
            containerColor = Color.Blue,
            titleContentColor = Color.White
        ),
        title = {
            Row(
                modifier = Modifier.fillMaxWidth(),
                horizontalArrangement = Arrangement.SpaceBetween
            ) {
                Text(
                    "Title here",
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis
                )
                Row(
                    verticalAlignment = Alignment.CenterVertically,
                    horizontalArrangement = spacedBy(8.dp),
                    modifier = Modifier.padding(10.dp)
                ) {
                    Icon(
                        modifier = Modifier.size(size = 16.dp),
                        painter = painterResource(R.drawable.ic_share_white),
                        contentDescription = stringResource(id = R.string.share)
                    )
                    Text(
                        stringResource(R.string.share),
                        maxLines = 1,
                        fontSize = 16.sp,
                        overflow = TextOverflow.Ellipsis
                    )
                }
            }
        },
        navigationIcon = {
            IconButton(onClick = { /* doSomething() */ }) {
                Image(
                    painter = painterResource(R.drawable.ic_back),
                    contentDescription = stringResource(id = R.string.back),
                    contentScale = ContentScale.Crop
                )
            }
        },
        actions = {
            IconButton(onClick = { /* doSomething() */ }) {
                Text(
                    text = "asd",
                    color = Color.White,
                    fontSize = 17.sp
                )
            }
        },
        scrollBehavior = scrollBehavior,
        elevation = 0.dp // 取消TopBar阴影，避免遮挡内容
    )
}, content = { padding ->
    var offset by remember { mutableStateOf(0f) }

    Box(
        modifier = Modifier
            // 只保留水平和底部内边距，去掉默认顶部内边距
            .padding(horizontal = padding.calculateHorizontalPadding(), bottom = padding.calculateBottomPadding())
            .fillMaxSize()
    ) {
        Column(
            verticalArrangement = Arrangement.SpaceEvenly,
            horizontalAlignment = Alignment.CenterHorizontally,
            modifier = Modifier
                .fillMaxSize()
                .scrollable(
                    orientation = Orientation.Vertical,
                    state = rememberScrollableState { delta ->
                        offset += delta
                        delta
                    }
                )
                .padding(16.dp)
        ) {
            Box(
                modifier = Modifier
                    .fillMaxSize()
                    // 负上边距让内容向上偏移，覆盖TopBar底部，数值可按需调整
                    .padding(top = -(dimensionResource(id = R.dimen.card_background_top_margin) + 32.dp))
                    .shadow(
                        elevation = dimensionResource(id = R.dimen.card_background_elevation),
                        shape = RoundedCornerShape(12.dp)
                    )
                    .background(
                        color = Color.White,
                        shape = RoundedCornerShape(size = 12.dp)
                    )
                    .padding(
                        all = dimensionResource(id = R.dimen.card_background_top_margin)
                    ),

            ){
                Text(text = "Hello World")
            }

        }
    }
})

额外说明 #

如果用的是LazyColumn这类滚动组件，逻辑也是一样的：要么调整padding，要么用Modifier.offset(y = -xxx.dp)让内容向上偏移，同时保证阴影层级正确即可。

内容的提问来源于stack exchange，提问作者Farooq Arshed