如何让Jetpack Compose中CircularProgressIndicator背景透明

问题根源是你给CircularProgressIndicator添加了.fillMaxSize()，导致它占据整个屏幕区域，若父容器默认带白色背景就会完全覆盖下方的登录界面。要实现透明背景且保留登录界面可见性，只需调整布局结构和modifier：

1. 用Box层叠登录界面内容和加载指示器，确保两者在同一层级显示
2. 移除指示器的.fillMaxSize()，改用.align(Alignment.Center)让它居中，仅占据自身大小

示例代码：

Box(modifier = Modifier.fillMaxSize()) {
    // 登录界面原有内容：输入框、按钮等
    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        // 用户名输入框
        OutlinedTextField(
            value = username,
            onValueChange = { username = it },
            label = { Text("用户名") }
        )
        // 密码输入框
        OutlinedTextField(
            value = password,
            onValueChange = { password = it },
            label = { Text("密码") },
            visualTransformation = PasswordVisualTransformation()
        )
        // 登录按钮
        Button(onClick = { isLoading = true }) {
            Text("登录")
        }
    }

    // 加载状态下显示的指示器
    if (isLoading) {
        CircularProgressIndicator(
            modifier = Modifier
                .align(Alignment.Center)
        )
    }
}

如果需要给指示器添加一层半透明遮罩（可选，不影响登录界面可见性），可以用额外的Box包裹：

if (isLoading) {
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.Black.copy(alpha = 0.2f)),
        contentAlignment = Alignment.Center
    ) {
        CircularProgressIndicator()
    }
}

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