Jetpack Compose 中的中心可组合项

Question

旧版本的 Jetpack compose dev-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())

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

Answer 1

使用容器。
例如：

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

或：

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

Jetpack Compose 中的中心可组合项

Center composable in Jetpack compose

android

android-jetpack-compose