Расположение элементов в ряду реактивного ранца

Мне нужно расположить круг загрузки в центре экрана, но сейчас у меня получается так:

Расположение элементов в ряду реактивного ранца

Код круга:

@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)
        }

Я хочу добиться того, что показано на следующем изображении с индикатором загрузки в центре:

Расположение элементов в ряду реактивного ранца

Как я могу это сделать?

0
0
75
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Во-первых, вы не могли центрировать индикатор из-за этой линии расположения. 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))
 }
}

вот как это выглядит

Другие вопросы по теме