Android compose, проблема с размером индикатора с катушкой

Недавно я пытаюсь перейти на Jetpack compose.

Итак, я хочу показать «карту», где есть «индикатор» при загрузке но я не могу изменить размер "индикатора" в "SubcomposeAsyncImage"

@Composable
private fun SponsorDialogContent(
    imgUrl: String,
) {
    Card(
        modifier = Modifier
            .width(300.dp)
            .wrapContentHeight(),
        elevation = CardDefaults.cardElevation(0.dp),
        shape = RoundedCornerShape(10.dp)
    ) {
        Box() {
            SubcomposeAsyncImage(
                modifier = Modifier
                    .fillMaxWidth()
                    .wrapContentHeight()
                    .heightIn(min = 200.dp),
                model = imgUrl,
                contentDescription = null,
                loading = {
                    CircularProgressIndicator(modifier = Modifier.size(30.dp).align(Alignment.Center), progress = 1f)
                },
                alignment = Alignment.Center,
                contentScale = ContentScale.FillWidth
            )

            CircularProgressIndicator(1f, Modifier.width(30.dp).align(Alignment.Center))
        }
    }
}

Так. Я попробовал код ниже

@Composable
private fun SponsorDialogContent(
    imgUrl: String,
) {
    Card(
        modifier = Modifier
            .width(300.dp)
            .wrapContentHeight(),
        elevation = CardDefaults.cardElevation(0.dp),
        shape = RoundedCornerShape(10.dp)
    ) {
        Box() {
            SubcomposeAsyncImage(
                modifier = Modifier
                    .fillMaxWidth()
                    .wrapContentHeight()
                    .heightIn(min = 200.dp),
                model = imgUrl,
                contentDescription = null,
                loading = {
                    Box(contentAlignment = Alignment.Center) {
                        CircularProgressIndicator()
                    }
                },
                alignment = Alignment.Center,
                contentScale = ContentScale.FillWidth
            )
        }
    }
}

Затем работает хорошо, но я не знаю, почему Кто-нибудь знает, почему?

Я пытался найти, как работать с этим кодом, но не смог

android android-jetpack-compose coil asyncimageview

18.11.2022 07:50

[JS за 1 час] - 9. Асинхронный

JavaScript является однопоточным, то есть он может обрабатывать только одну задачу за раз. Для обработки длительных задач, таких как сетевые запросы,...

Топ-10 компаний-разработчиков PHP

Если вы ищете надежных разработчиков PHP рядом с вами, вот список лучших компаний по разработке PHP.

Скраппинг поиска Apple App Store с помощью Python

📌Примечание: В этой статье я покажу вам, как скрапировать поиск Apple App Store и получить точно такой же результат, как на Apple iMac, потому что...

Редкие достижения на Github ✨

Редкая коллекция доступна в профиле на GitHub ✨

Подъем в javascript

Hoisting - это поведение в JavaScript, при котором переменные и объявления функций автоматически "перемещаются" в верхнюю часть соответствующих...

Улучшение генерации файлов Angular

Angular - это фреймворк. Вы можете создать практически любое приложение без использования сторонних библиотек.

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

Ответы 2

Если вы просмотрите исходный код SubcomposeAsyncImage, вы дойдете до того места, где увидите это:

BoxWithConstraints(
    modifier = modifier, // this is the modifier you passed to SubcomposeAsyncImage
    contentAlignment = alignment,
    propagateMinConstraints = true,
) {
    // image or your loading content based on state
}

Таким образом, поведение, которое вы описываете, связано с вашим модификатором, который имеет heightIn(min = 200.dp), и вашим индикатором прогресса, который в конечном итоге становится прямым потомком этого Box, который имеет propagateMinConstraints = true.

18.11.2022 10:57

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

Как упомянул @Jan Bina, у него есть propagateMinConstraints = true, что означает, что он накладывает минимальные ограничения только на своего прямого потомка. Я объяснил в этом ответе, как это влияет на Surface, потому что Surface — это коробка с propagateMinConstraints = true. Вы можете попробовать это с Box, и вы увидите те же результаты.

Surface(
    modifier = Modifier.size(200.dp),
    onClick = {}) {
    Column(
        modifier = Modifier
            .size(50.dp)
            .background(Color.Red, RoundedCornerShape(6.dp))
    ) {}
}

Spacer(modifier = Modifier.height(20.dp))

Surface(
    modifier = Modifier.size(200.dp),
    onClick = {}) {
    Column(
        modifier = Modifier
            .size(50.dp)
            .background(Color.Red, RoundedCornerShape(6.dp))
    ) {
        Column(
            modifier = Modifier
                .size(50.dp)
                .background(Color.Green, RoundedCornerShape(6.dp))
        ) {}

    }
}

Spacer(modifier = Modifier.height(20.dp))

Box(
    modifier = Modifier.size(200.dp)
) {
    Column(
        modifier = Modifier
            .size(50.dp)
            .background(Color.Red, RoundedCornerShape(6.dp))
    ) {
        Column(
            modifier = Modifier
                .size(50.dp)
                .background(Color.Green, RoundedCornerShape(6.dp))
        ) {}

    }
}

В первом примере на Surface Force Column имеет размер 200.dp, даже если он имеет Modifier.size(50.dp).

Во втором примере Box внутри Column имеет размер 50.dp, потому что он не является прямым потомком Surface.

В третьем примере, если мы заменим Surface (Box с propagateMinConstraints true) на Box, это позволит прямому потомку использовать свои собственные ограничения или размеры.

И когда вы устанавливаете Modifier.fillMaxWidth, вы устанавливаете ограничения как minWidth = родительская ширина, maxWidth = parentWidth

Я ответил о типах ограничений здесь

18.11.2022 16:14