具有相同高度的行 children 无法正确更新高度

Question

我希望行 children 具有相同的高度（和宽度）。在我的示例中，我将文本可组合项设置为 children，并且它们可以具有不同长度的字符串，这些字符串可以在以后更新。问题是当我设置要显示的新字符串时 - children 的高度未更新并且字符串被截断。如果最初设置了较长的字符串，则 children 的高度是正确的。也许我做错了什么。我只想在设置新的更长的字符串时让两个文本更新它们的高度。还有其他方法可以实现吗？

@Composable
fun IssueWithRowHeight() {
    var longerText by remember {
        mutableStateOf("")
    }
    LaunchedEffect(key1 = true) {
        delay(2000)
        longerText =
            "this is long text this is long text this is long text this is long text this is long text"
    }

    //If you use this and comment the launched effect the row has the correct height
//    var longerText by remember {
//        mutableStateOf("this is long text this is long text this is long text this is long text this is long text")
//    }

    Column {
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .height(IntrinsicSize.Min),
        ) {
            //Radius
            Row(
                modifier = Modifier
                    .weight(1f)
                    .fillMaxHeight()
                    .clickable {  }
                    .padding(PaddingValues(start = 16.dp, top = 8.dp, end = 16.dp, bottom = 8.dp))
            ) {
                Text(text = "short text")
            }
            Row(
                modifier = Modifier
                    .weight(1f)
                    .fillMaxHeight()
                    .clickable {  }
                    .padding(PaddingValues(start = 16.dp, top = 8.dp, end = 16.dp, bottom = 8.dp))
            ) {
                Text(text = longerText)
            }
        }

        //Just for reference that the string is actually updating..
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .background(Color.Red)
        ) {
            Text(text = longerText)
        }
    }

}

Answer 1

@Composable
fun IssueWithRowHeight() {
    var longerText by remember {
        mutableStateOf("")
    }
    LaunchedEffect(key1 = true) {
        delay(2000)
        longerText =
            "this is long text this is long text this is long text this is long text this is long text"
    }

    //If you use this and comment the launched effect the row has the correct height
//    var longerText by remember {
//        mutableStateOf("this is long text this is long text this is long text this is long text this is long text")
//    }

    Column {
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .wrapContentHeight(),
        ) {
            //Radius
            Row(
                modifier = Modifier
                    .weight(1f)
                    .clickable {  }
                    .padding(PaddingValues(start = 16.dp, top = 8.dp, end = 16.dp, bottom = 8.dp))
            ) {
                Text(text = "short text")
            }
            Row(
                modifier = Modifier
                    .weight(1f)
                    .clickable {  }
                    .padding(PaddingValues(start = 16.dp, top = 8.dp, end = 16.dp, bottom = 8.dp))
            ) {
                Text(text = longerText)
            }
        }

        //Just for reference that the string is actually updating..
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .background(Color.Red)
        ) {
            Text(text = longerText)
        }
    }
}

Answer 2

这是一个 known bug，它已修复但目前尚未发布。

作为临时解决方法，您可以使用 key:

强制重新测量

key(longerText) {
    // your Row with Text
}

具有相同高度的行 children 无法正确更新高度

Row children with equal heights can't update height correctly

android

android-jetpack-compose