如何在 JetPack Compose 中将横幅广告对齐到屏幕底部

Question

我正在尝试将 position 一个可组合项保留在屏幕底部。 在我的例子中是横幅广告。

我试着把它放在一个柱子里，并给它一个垂直排列的底部，仍然没有区别。

...
    Column(
            verticalArrangement = Arrangement.Bottom,
            modifier = Modifier
                .fillMaxWidth()
        ) {
            // calling method to display banner UI
            AdvertView()
        }
...

由于某种原因，这不显示横幅广告。

我什至尝试使用重量（我不熟悉）仍然没有区别。

AdvertView(Modifier.weight(1f))

@Composable
fun HomeText() {
    Column(
        modifier = Modifier.fillMaxWidth()
    ) {
        Column(
            modifier = Modifier
                .fillMaxWidth()
                //.fillMaxHeight()
        ) {
            Text(
                text = stringResource(R.string.home_text),
                style = MaterialTheme.typography.h2,
                modifier = Modifier
                    .paddingFromBaseline(top = 24.dp, bottom = 18.dp)
                    .padding(horizontal = 18.dp)
                    .heightIn(min = 56.dp)

            )
        }
        AdvertView(Modifier.weight(1f))
    }
}

出于某种原因，这实际上使横幅广告下降了一点，但仍然没有。

我想认为我是那个不包括某些东西或做错事的人。 如果是这样，我将不胜感激您的更正。 或者，如果没有，我想知道如何 position 屏幕底部的横幅。

请记住这是一个横幅广告，所以我想它会覆盖底部的内容。 （这是我第一次..我被纠正了）

感谢您提前提供帮助。我衷心感谢。 谢谢。

Answer 1

您必须使用Column ，然后将主要内容的修饰符设置为使用weight(1f) ，然后在主要内容之后添加横幅。 使用weight将确保在测量横幅后内容占据所有可用空间。

@Preview(widthDp = 420)
@Preview(widthDp = 420, uiMode = UI_MODE_NIGHT_YES)
@Composable
private fun ComposeSandboxPreview() {
    Theme {
        Surface(color = Theme.colors.background) {
            Column(
                modifier = Modifier.fillMaxSize(),
            ) {
                Content(
                    modifier = Modifier
                       .fillMaxWidth()
                        .weight(1f),
                )
                AdvertView(modifier = Modifier.fillMaxWidth())
            }
        }
    }
}

@Composable
fun Content(modifier: Modifier = Modifier) {
    Box(
        modifier = modifier.background(Color.Red),
        contentAlignment = Alignment.Center
    ) {
        Text(
            text = "This is the content"
        )
    }
}

@Composable
fun AdvertView(modifier: Modifier = Modifier) {
    Text(
        text = "This is the banner",
        textAlign = TextAlign.Center,
        modifier = modifier.background(Color.Blue),
    )
}