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

aoyhnmkz  于 2022-11-03  发布在  Android
关注(0)|答案(3)|浏览(325)

我想通过放大的中心点而不是原始的未修改的圆的中心点来对齐放大的合成CircularProgressIndicator
以下内容与CircularProgressIndicator完全未修改的情况一致,如随附的屏幕截图所示。

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

第一次
我尝试了对齐修饰符的各种组合/顺序都没有用。有没有办法在不使用手动偏移的情况下修复这个问题?

3bygqnnd

3bygqnnd1#

您可以使用Modifier.aspectRatio()来拥有一个具有任意定义比率的Composable。在获得一个用于进度指示器的方形容器后,您可以使用Box的contentAlignment字段将其居中。

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

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

mwg9r5ms2#

您正在将大小应用于CircularProgressIndicator(),而不是Box()
尝试

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

ufj5ltwl3#

似乎将最大可能的CircularProgress大小居中是为了确保widthheight具有相同的值。
我放置了一个全球定位监听器,使用fillMaxWidthfillMaxSize或基于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()修饰符调用将产生下面的输出。

相关问题