Как сеттить высоту UI элемента в зависимости от высоты его субкомпоузабла

Question

Всем привет!

Есть баннер. Состоит из картинки (зеленый прямоугольник), текста и кнопки. И за ними всеми находится другая фоновая картинка.

Необходимо, чтобы высота баннера всегда нижней границей кнопки. А у меня если фоновая картинка больше всего остального вместе взятого, то внизу остается пустое место. А надо, чтобы фон обрезался.

Как сделать так, чтобы высота баннера всегда подстраивалась не под высоту фоновой картинки, а под высоту остального содержимого?

@Composable
fun BannerPrimary() {

    Box(
        modifier = Modifier.background(Color.LightGray)
    ) {
        Image( // фоновая картинка
            modifier = Modifier
                .fillMaxSize(),
            painter = painterResource(id = R.drawable.check_status_icon),
            contentScale = ContentScale.None,
            contentDescription = null
        )

        Column( // мне надо, чтобы высота родителя подстраивалась под высоту этой Column
            modifier = Modifier
                .background(Color.Transparent)
                .padding(16.dp)
        ) { 
            Box( // зеленый прямоугольник
                modifier = Modifier
                    .align(Alignment.CenterHorizontally)
                    .background(Color.Green)
                    .height(100.dp)
                    .fillMaxWidth(),
            )

            Text(text = bannerState.title)

            ButtonPrimary(buttonText = bannerState.buttonState?.text, onButtonClick = { })
        }
    }
}

Answer 1

Немного помучившись, я вот что придумал:

В onSizeChanged надо считать высоту Column (так как именно она должна ограничивать высоту всего баннера), а потом это значение задаю фоновой картинке. И в итоге она всегда по высоте как нужно.

@Composable
fun BannerPrimary() {
    val context = LocalContext.current
    var bannerHeight by remember { mutableStateOf(0) }

    Box(
        modifier = modifier
            .background(Color.LightGray)
    ) {
        Image(
            modifier = Modifier
                .height(
                    convertPixelsToDp(
                        context,
                        bannerHeight.toFloat()
                    ).dp
                )
                .fillMaxSize(),
            painter = painterResource(id = R.drawable.check_status_icon),
            contentScale = ContentScale.None,
            contentDescription = null
        )

        Column(
            modifier = Modifier
                .onSizeChanged {
                    bannerHeight = it.height
                }
                .background(Color.Transparent)
                .padding(16.dp)
        ) {
            Box(
                modifier = Modifier
                    .align(Alignment.CenterHorizontally)
                    .background(Color.Green)
                    .height(10.dp)
                    .fillMaxWidth(),
            )

            Text(text = bannerState.title)

            ButtonPrimary(buttonText = bannerState.buttonState?.text, onButtonClick = { })
        }
    }
}

private fun convertPixelsToDp(context: Context, pixels: Float): Float {
    val screenPixelDensity = context.resources.displayMetrics.density
    val dpValue = pixels / screenPixelDensity
    return dpValue
}

БЛОГ НА HUSL

Как сеттить высоту UI элемента в зависимости от высоты его субкомпоузабла

Ответы (1 шт):