将可组合项置于屏幕中央

Question

我有一个简单的加载可组合项：

@Composable
fun Loading() {
    CircularProgressIndicator()
}

我希望它位于屏幕中央。我搜索了文档，找到了用于构建行和列的布局，但我没有找到任何可以将视图居中于屏幕绝对中间的内容。

如何实现？

Answer 1

首先您需要一个占据整个屏幕的视图，为此您需要

fillMaxSize

修饰符。在这种情况下，它可以是透明的

Box

。然后您可以将视图置于该容器内：

Box(
    contentAlignment = Alignment.Center, // you apply alignment to all children
    modifier = Modifier.fillMaxSize()
) {
    CircularProgressIndicator(
        modifier = Modifier.align(Alignment.Center) // or to a specific child
    )
}

在这种情况下，您可以选择两种方式来设置

align

，我刚刚提到过它，以便您知道将来当您在容器内有多个视图时。

---

如果您只需要布局单个视图，则更简单的解决方案是使用

Modifier.wrapContentSize

。

在下面的情况下，其结果与第一个解决方案相同，父级将采用完整的可用大小（与上面的框相同），但进度指示器不会遵循此大小，并且只会采用尽可能多的大小需要，会根据

align

参数放置在中心。

CircularProgressIndicator(
    modifier = Modifier
        .fillMaxSize()
        .wrapContentSize(align = Alignment.Center) // center is the default value so you can skip it
)