如何在 Compose UI 的 topBar 上显示内容

Question

嗨，我想实现内容应该与顶部栏重叠。在 XML 中，我使用了高程和负填充，并且效果很好。我正在努力在 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")
            }

        }
    }
})

我想要的（截图和代码不一样）

Answer 1

添加 zIndex 用于在 LargeTopAppBar 上绘制 Box 并使用 Modifier.offset 将 Box 的位置更改为

modifier = Modifier
    .zIndex(10f)
    .offset(x= 0.dp, y = (-50).dp)