Мне нужно расположить круг загрузки в центре экрана, но сейчас у меня получается так:
Код круга:
@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)
}
Я хочу добиться того, что показано на следующем изображении с индикатором загрузки в центре:
Как я могу это сделать?
Во-первых, вы не могли центрировать индикатор из-за этой линии расположения. 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))
}
}
вот как это выглядит