如何将放大的CircularProgressIndicator与放大的圆心对齐？

Question

我想通过其放大的中心点而不是原始未修改圆的中心点来对齐放大的 Compose

CircularProgressIndicator

。

以下对齐方式就好像

CircularProgressIndicator

根本没有修改一样，如所附的屏幕截图所示。

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

我尝试了对齐修饰符的各种组合/顺序，但没有成功。有没有办法在不使用手动偏移的情况下解决这个问题？

Answer 1

您可以使用

Modifier.aspectRatio()

获得具有任何定义比率的可组合项。获得用于进度指示器的方形容器后，您可以使用 Box 的 contentAlignment 字段将其居中。

Box(
    modifier = Modifier
        .background(Color.Black)
        .fillMaxSize(),
    contentAlignment = Alignment.Center
) {

    CircularProgressIndicator(
        modifier = Modifier
            .fillMaxWidth()
            .aspectRatio(1f)
    )
}

Answer 2

您正在将尺寸应用于

CircularProgressIndicator()

，而不是

Box()

尝试

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

Answer 3

似乎将最大可能的

CircularProgress

尺寸居中是为了确保

width

和

height

具有相同的值。

我放置了一个全局位置侦听器，使用

fillMaxWidth

、

fillMaxSize

或基于

screenWidth

的手动大小来检查其大小，但输出值基于我手机的分辨率。

fillMaxSize

没有任何意义，因为没有什么可以居中，高度已经填满了整个屏幕，而

fillMaxWidth

具有非常小的高度值，其行为也与没有任何东西可以垂直居中相同，看起来像居中测量期望宽度和高度相同。

 val configuration = LocalConfiguration.current
 val screenWidth = configuration.screenWidthDp.dp

 Box(
    modifier = Modifier
         .background(Color.Gray)
         .fillMaxSize(),
        contentAlignment = Alignment.Center
 ) {
     CircularProgressIndicator(
         modifier = Modifier
             // .fillMaxSize()     =  Width:[1080] : Height:[2195]
             // .fillMaxWidth()    =  Width:[1080] : Height:[105]
             // .size(screenWidth) =  Width:[1079] : Height:[1079]
             .align(Alignment.Center)
             .onGloballyPositioned {
                 Log.e("CircularProgress", "Width:[${it.size.width}] : Height:[${it.size.height}]")
             }
     )
 }

因此，使用

screenWidth

指定大小将确保

CircularProgress

占据最大可能的空间，它可以均匀地（w，h）调整到正确居中的位置。

上面取消注释

.size()

修饰符调用的代码将产生下面的输出。

Answer 4

这对我有用：

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