位于屏幕中央的中心可组合项

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
)