kotlin - 在Jetpack compose中Imageview的基础上调整Texview

问题描述

在左侧对齐 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
            )
        }
    }
}

上述代码段的输出：

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

标签： kotlinandroid-layoutandroid-jetpack-composeandroid-jetpack

kotlin - 在Jetpack compose中Imageview的基础上调整Texview

问题描述

解决方案

推荐阅读