Jetpack compose 中可组合的中心

Question

旧版本的 Jetpack composedev-0.x曾经有一个Center可组合的小部件居中。

但是，在该alpha版本中它已被删除，并且没有专门的可组合来处理此任务。

在我的情况下，我想在中心显示一个进度指示器，直到获取数据：

Surface(color = MaterialTheme.colors.background) {
    val state = viewModel.userState
    if (state == null) {
        CircularProgressIndicator()
    } else {
        UserDigest(state = state)
    }
}

结果显然是这样的：

指示器在拐角处。

---

添加fillMaxSize()到指标也无济于事：

CircularProgressIndicator(modifier = Modifier.fillMaxSize())

那么，我如何将它（通常是 a composable）移动到一个区域的中心？

Answer 1

使用容器。
例如：

Box(
   contentAlignment = Alignment.Center,
   modifier = Modifier.fillMaxSize() ){
        CircularProgressIndicator(progress = 0.5f)
}

或者：

Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
) {
    CircularProgressIndicator(progress = 0.5f)
}