Jetpack Compose如何将自定义Loading composable居中显示在屏幕中央

你可以根据实际使用场景选择对应方案： #

方案1：全屏居中（最常用） #

直接用Box布局包裹加载组件，设置占满全屏+子元素居中对齐即可，不需要额外嵌套Row/Column：

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier

@Composable
fun Loading() {
    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        CircularProgressIndicator()
    }
}

只要这个Loading组件挂载在页面根布局下，就会显示在整个屏幕的正中心。 #

方案2：在现有父布局内居中 #

如果你的加载组件需要放在现有Column/Row/Box布局内，不需要占满全屏，可以直接给加载组件添加对齐修饰符：

// 父布局为Column的示例
@Composable
fun PageContent() {
    Column(Modifier.fillMaxSize()) {
        // 页面其他内容
        Text("页面标题")
        
        // 加载控件在Column内水平居中
        CircularProgressIndicator(
            modifier = Modifier.align(Alignment.CenterHorizontally)
        )
        
        // 页面其他内容
        LazyColumn {
            // 列表内容
        }
    }
}

方案3：弹窗形式居中 #

如果需要加载组件覆盖所有页面内容，不影响现有布局层级，配合Dialog使用即可，Dialog默认内容位置就是屏幕居中：

import androidx.compose.material3.Dialog

@Composable
fun LoadingDialog(isShow: Boolean, onDismiss: () -> Unit = {}) {
    if (isShow) {
        Dialog(onDismissRequest = onDismiss) {
            CircularProgressIndicator()
        }
    }
}

内容的提问来源于stack exchange，提问作者svprdga