Compose - 两个 Composables 重叠并约束它们

Question

场景

绿框的最小宽度与黑框的宽度相同，所以黑框有点WRAP_CONTENT.

如果绿框需要更多space（因为文本比宽度长，所以要做的是，将绿框和黑框一起变大。

我所做的是，把黑框 width = Dimensions.fillToConstraints 发生的事情是绿框可以使黑框变小，这不是预期的。

只是缺少这种情况，不要让绿框改变黑框的宽度（它只会碰巧像第二张图片一样变大，但永远不会发生相反的情况，让它变小，让我们说最小宽度总是黑框的WRAP_CONTENT)

我有的是：

ConstraintLayout {
        val (label, fixed) = createRefs()

        
            Box(
                modifier = Modifier
                    .height(24.dp)
                    .padding(start = 4.dp)
                    .background(color = Colors.Green)
                    .constrainAs(label) {
                        top.linkTo(parent.top)
                        start.linkTo(parent.start)
                        end.linkTo(fixed.end)

                    },
            ) {
                Label(
                    modifier = Modifier
                        .align(Alignment.TopCenter)
                        .padding(horizontal = 4.dp),
                    labelText = "whatever",
                    textStyle = myStyle,
                    colors,
                )
            }
       

        Text(
            modifier = Modifier
                .constrainAs(fixed) {
                    top.linkTo(label.top, margin = 15.dp)
                    start.linkTo(parent.start)
                    end.linkTo(parent.end)
                    bottom.linkTo(parent.bottom)
                    width = Dimension.fillToConstraints
                },
            text = "fixed",
        )

而Label是：

@Composable
fun Label(
    modifier: Modifier = Modifier,
    labelText: String,
) {
    Text(
        maxLines = 1,
        modifier = modifier,
        text = labelText,
    )
}

Answer 1

当你需要所有的子元素根据内容大小相同时，你可以使用intrinsic measurements:

Box(Modifier.width(IntrinsicSize.Max)) {
    Box(
        modifier = Modifier
            .height(24.dp)
            .padding(start = 4.dp)
            .background(color = Color.Green)
            .fillMaxWidth()
    ) {
        Label(
            modifier = Modifier
                .align(Alignment.TopCenter)
                .padding(horizontal = 4.dp),
            labelText = "whatever",
        )
    }

    Text(
        text = "fixed",
        color = Color.White,
        textAlign = TextAlign.Center,
        modifier = Modifier
            .padding(top = 15.dp)
            .padding(end = 4.dp)
            .fillMaxWidth()
            .background(Color.Black)
    )
}

Compose - 两个 Composables 重叠并约束它们

Compose - Two Composables overlaped and constraint with them

android

kotlin

android-jetpack

android-jetpack-compose