android 喷气背包组成行中的元件的布置

snz8szmq  于 2023-04-18  发布在  Android
关注(0)|答案(1)|浏览(109)

我需要在屏幕的中心定位加载圆,但现在我得到这样的:

圈码:

@Composable
fun CircularProgressBar(isLoading: Boolean) {
    if(isLoading) {
        CircularProgressIndicator(
            modifier = Modifier
                .padding(top = 10.dp),
            color = Color.Gray
        )
    }
}

行代码:

Row(
            modifier = Modifier.fillMaxSize(),
            horizontalArrangement = Arrangement.SpaceBetween
        ) {
            IconButton(
                onClick = {
                    navController.popBackStack()
                },
                modifier = Modifier
                    .padding(start = 15.dp, bottom = 15.dp),
            ) {
                Icon(
                    painter = painterResource(id = R.drawable.ic_baseline_arrow_back_24),
                    contentDescription = "back",
                    modifier = Modifier.size(35.dp)
                )
            }

            CircularProgressBar(isLoading = true)
        }

我想实现下图所示的效果,其中装载指示器位于中心:

我该怎么做?

mzillmmw

mzillmmw1#

首先,你不能居中的指标,因为这个安排线。horizontalArrangement = Arrangement.SpaceBetween。它会影响所有的查尔兹在你的情况行。我建议你使用Box而不是Row这里是一个例子。

Box(
    modifier = Modifier
        .fillMaxWidth()
        .background(Color.Yellow)

) {
    IconButton(
        onClick = { /*Do Something*/ },
        modifier = Modifier
            .background(Color.Cyan)
            .align(Alignment.CenterStart),
    ) {
        Icon(
            painter = painterResource(id = R.drawable.baseline_arrow_back_24),
            contentDescription = "back",
            modifier = Modifier.size(35.dp)
        )
    }

    CircularProgressBar(
        isLoading = true,
        modifier = Modifier
            .background(Color.Red)
            .align(Alignment.Center),
    )
}

@Composable
fun CircularProgressBar(isLoading: Boolean, modifier: Modifier = Modifier){
   if (isLoading) {
    // Use your indicator here
    Box(modifier = modifier.size(40.dp).background(Color.Red))
 }
}

这就是它的样子

相关问题