在Jetpack compose中Imageview的基础上调整Texview答案

【问题标题】：Adjust Texview on the basis of Imageview in Jetpack compose在Jetpack compose中Imageview的基础上调整Texview
【发布时间】：2021-10-07 17:18:46
【问题描述】：

在左对齐 Imageview 和在右对齐 3 textview，这样图像的高度取决于纵横比，第一个文本视图应与 imageview 的顶部对齐，第三个 textview 的底部应与底部对齐的图像。这两个文本视图之间的空间应该给第二个文本视图。

预期：


@Preview
@Composable
fun ShowUi() {
    Row
        modifier = Modifier
            .padding(10.dp)
            .wrapContentHeight()
            .fillMaxWidth()
    ) {
        Box(
            modifier = Modifier
                .weight(7f)
                .aspectRatio(1.77f)
                .background(Color.Yellow)
        ) {
        }
        Column(
            modifier = Modifier
                .weight(3f)
                .background(Color.Green)
        ) {
            Text(
                text = "Title 1",
                fontSize = 20.sp,
                maxLines = 1,
                modifier = Modifier.background(Color.Green)
            )

            Text(
                text = "You can use '--warning-mode all' to show the individual deprecation warnings and determine if they come from your own scripts or plugins.Deprecated Gradle features were used in this build, making it incompatible with Gradle 8.0.",
                overflow = TextOverflow.Ellipsis,
                modifier = Modifier.background(Color.Gray),
            )

            Text(
                text = "PLAY NOW",
                modifier = Modifier.background(Color.Green),
                maxLines = 1
            )
        }
    }
}

上述sn-p的输出：

注意：不能在第二个 TextView 中使用 maxLines，因为可以显示的行数是动态的，即取决于第一和第三个 textview 之间的可用空间。

【问题讨论】：

标签： kotlin android-layout android-jetpack-compose android-jetpack

【解决方案1】：

您可以考虑使用 Compose ConstraintLayout 来实现这一点。

https://developer.android.com/jetpack/compose/layouts/constraintlayout

【讨论】：

【解决方案2】：

您可以阻止Row 与.height(IntrinsicSize.Min) 一起成长：它不会让孩子长到超过最大固有高度。

下一步是为您的Column 覆盖最小固有高度：但默认情况下它将根据文本大小的总和计算。为此，您可以创建以下修饰符：

fun Modifier.zeroMinIntrinsicHeight() = then(
    object : LayoutModifier {
        override fun MeasureScope.measure(
            measurable: Measurable,
            constraints: Constraints
        ) = measurable
            .measure(constraints)
            .run {
                layout(width, height) {
                    placeRelative(0, 0)
                }
            }

        override fun IntrinsicMeasureScope.minIntrinsicHeight(
            measurable: IntrinsicMeasurable,
            width: Int
        ): Int {
            return 0
        }
    }
)

为了压缩你的中间文本，你需要应用.weight(1f)修饰符：这样Column内的所有其他视图大小将在长文本之前计算。
还有一个bug会阻止TextOverflow.Ellipsis在有限的大小下正常工作，一定要给它加星以引起更多的关注。因此，我删除了这个论点。

结果代码：

Row(
    modifier = Modifier
        .padding(10.dp)
        .fillMaxWidth()
        .background(Color.Red)
        .height(IntrinsicSize.Min)
) {
    Box(
        modifier = Modifier
            .weight(7f)
            .aspectRatio(1.77f)
            .background(Color.Yellow)
    ) {
    }
    Column(
        modifier = Modifier
            .weight(3f)
            .background(Color.Green)
            .zeroMinIntrinsicHeight()
    ) {
        Text(
            text = "Title 1",
            fontSize = 20.sp,
            maxLines = 1,
            modifier = Modifier.background(Color.Green)
        )

        Text(
            text = "You can use '--warning-mode all' to show the individual deprecation warnings and determine if they come from your own scripts or plugins.Deprecated Gradle features were used in this build, making it incompatible with Gradle 8.0.",
            modifier = Modifier
                .background(Color.Gray)
                .weight(1f)
        )

        Text(
            text = "PLAY NOW",
            modifier = Modifier.background(Color.Green),
            maxLines = 1
        )
    }
}

输出：

【讨论】：