Android Jetpack Compose 中 AppBar 后面的脚手架主体？

Question

由于右下角的曲线，我想将脚手架主体延伸到 AppBar 后面：

我尝试过

Modifier.offset(y = (-25).dp)

。它工作正常，但 BG 图像不再填充底部导航栏后面的区域：

 Scaffold( topBar = { ... }, ) 
        { padding ->
            Box(
                Modifier.padding(padding),
                contentAlignment = Alignment.TopCenter
            ) {
                Box(
                    modifier = Modifier
                        .fillMaxSize()
                        .offset(y = (-25).dp),  // BG image behind AppBar
                ) {
                    Image(
                        modifier = Modifier.fillMaxSize(),
                        painter = painterResource(R.drawable.bg),
                        contentDescription = null,
                        contentScale = ContentScale.FillBounds
                    )
                }

我怎样才能同时做到这两点？

Answer 1

您可以使用

Modifier.graphicsLayer {scaleY = // scale ratio greater than 1f}

但是此选项要求您能够找到精确的比率（脚手架的高度/带有图像的盒子的高度），您需要使用一种方法来查找脚手架和盒子的高度，然后您可以精确缩放。

@Composable
private fun BoxSample() {
    BoxWithConstraints(modifier = Modifier.fillMaxSize()) {

        val parentHeight = maxHeight
        Scaffold(
            topBar = {
                Box(
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(50.dp)
                        .background(Color.Black),
                    contentAlignment = Alignment.Center
                ) {
                    Text("TITLE", fontSize = 20.sp, color = Color.White)
                }
            }
        )
        { padding ->
            BoxWithConstraints(
                Modifier.padding(padding),
                contentAlignment = Alignment.TopCenter
            ) {
                val childHeight = this.maxHeight

                val scaleY = parentHeight.value / childHeight.value
                Box(
                    modifier = Modifier
                        .fillMaxSize()
                        .graphicsLayer {
                            this.scaleY = scaleY
                        }
                ) {
                    Image(
                        modifier = Modifier.fillMaxSize(),
                        painter = painterResource(R.drawable.bg),
                        contentDescription = null,
                        contentScale = ContentScale.FillBounds
                    )
                }
            }
        }
    }
}

第二个选项是将应用栏放置在内容中的 Box 内，而不是放在

topBar

的

Scaffold

属性内。

@Composable
private fun Sample() {
    Box(
        Modifier.padding(padding),
        contentAlignment = Alignment.TopCenter
    ) {
        Box(
            modifier = Modifier
                .fillMaxSize(),
        contentAlignment = Alignment.TopStart

        ) {
            Image(
                modifier = Modifier.fillMaxSize(),
                painter = painterResource(R.drawable.bg),
                contentDescription = null,
                contentScale = ContentScale.FillBounds
            )
        }
        TopAppbar()
    }
}

第三个选项是将带有图像的 Box 放在 Scaffold 的 topBar 中

Answer 2

只需使用“it:paddingValues” 将顶部填充设置为 it.calculateTopPadding()