Я пытаюсь добавить ProgressIndicator к кнопке. Я бы хотел, чтобы индикатор выполнения занимал всю высоту кнопки с вертикальным заполнением 5.dp, где высота кнопки определяется содержимым.
Поэтому я добавил параметр isLoading: Boolean и на его основе обновляю contentPadding. Я решил оставить контент в композиции и просто установил для него .alpha(0f), чтобы размер кнопки остался прежним. Но я не могу добиться правильного размера индикатора прогресса. Если я добавлю к нему модификатор .matchParentHeight(), он наследует высоту самого содержимого (не заполняет всю высоту кнопки до заполнения) или просто переполняется за пределами кнопки . Альтернативно, если я удалю этот модификатор, индикатор увеличит высоту кнопки при нажатии.
Как это сделать?
@Composable
fun Button(
onClick: () -> Unit,
modifier: Modifier = Modifier,
enabled: Boolean = true,
isLoading: Boolean = false,
shape: Shape = ButtonDefaults.shape,
colors: ButtonColors = ButtonDefaults.buttonColors(),
elevation: ButtonElevation? = ButtonDefaults.buttonElevation(),
border: BorderStroke? = null,
contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
interactionSource: MutableInteractionSource? = null,
content: @Composable BoxScope.() -> Unit,
) {
val layoutDirection = LocalLayoutDirection.current
androidx.compose.material3.Button(
onClick = onClick,
modifier = modifier
,enabled = enabled,
shape = shape,
colors = colors,
elevation = elevation,
border = border,
contentPadding = if(!isLoading) {
contentPadding
} else {
PaddingValues(
start = contentPadding.calculateStartPadding(layoutDirection),
end = contentPadding.calculateEndPadding(layoutDirection),
top = 5.dp,
bottom = 5.dp
)
},
interactionSource = interactionSource,
) {
Box(
contentAlignment = Alignment.Center,
) {
val contentAlpha = if (isLoading) { 0f } else { 1f }
Box(
modifier = Modifier
.alpha(contentAlpha)
) {
content()
}
if (isLoading) {
CircularProgressIndicator(
color = if (enabled) {
colors.contentColor
} else {
colors.disabledContentColor
},
modifier = Modifier
.matchParentSize()
.background(Color.Yellow)
)
}
}
}
}
Редактировать: Я использую это для предварительного просмотра:
@Preview
@Composable
fun ButtonPreview() {
Column {
Button(
onClick = {},
isLoading = false,
) {
Text("Test")
}
Button(
onClick = {},
isLoading = true,
) {
Text("Test")
}
androidx.compose.material3.Button(
onClick = {},
) {
Text("Test")
}
}
}
Подробнее здесь: https://stackoverflow.com/questions/791 ... in-jetpack
Как запретить дочернему элементу CircularProgressIndicator расширять родительский элемент в Jetpack Compose? ⇐ Android
-
- Похожие темы
- Ответы
- Просмотры
- Последнее сообщение