图片宽度未在 Android Jetpack Compose 的卡片中正确显示

Question

我正在尝试使用 Jetpack Compose 进行布局。

我想在每个 Card 中显示一个 Image 和一个 Text，堆叠垂直使用列小部件

我可以使用 可组合函数 成功编写代码，但我在最后一张卡片中遇到如下问题：

图像宽度未满
TextView 未显示 在图像

代码：

    @Composable
fun Dashboard(name1: String, name2: String, name3: String) {
    Column(
        modifier =
        Modifier.background(color = Color(0, 255, 0, 255))
    ) {
        Card() {
            Column(modifier = Modifier.padding(10.dp)) {
                Image(painter = painterResource(id = R.drawable.img1),
                    contentDescription = "Image 1")
                Text(text = name1)
            }
        }
        Card() {
            Column(modifier = Modifier.padding(10.dp)) {
                Image(painter = painterResource(id = R.drawable.img2),
                    contentDescription = "Image 2")
                Text(text = name2)
            }
        }
        Card() {
            Column(modifier = Modifier.padding(10.dp)) {
                Image(painter = painterResource(id = R.drawable.img2),
                    contentDescription = "Image 3")
                Text(text = name3)
            }
        }
    }

}

输出：

最后一张卡片的图像 (img2) 与中间卡片的图像相同，但仅在最后一个索引处出现问题

谁能帮助我的可组合函数出了什么问题？

参考:

我正在关注 Hyper Coder 社区的教程 this one

Answer 1

此答案基于 Jetpack Compose Beta 3。默认情况下 Column { } 不可滚动，它会在屏幕上显示可用 space 中的内容。

所以你最后一张图片的情况是，它缩减了高度，导致缩减了宽度以保持纵横比。这导致出现绿色背景。因此，让您的顶部 Column { } 可滚动应该可以解决这个问题。

Column(
    modifier =  Modifier
    .background(color = Color(0, 255, 0, 255))
    .verticalScroll(state = rememberScrollState(0))
) {
    Card { ... }
    Card { ... }
    Card { ... }
  }

更新： 处理此类情况的更好解决方案是使用 LazyColum 处理此类特定用例的性能要好得多

@Composable
fun Dashboard(images: List<ImageData>) {
  LazyColumn(
    modifier = Modifier.background(color = Color(0, 255, 0, 255))
  ) {
    images.forEach {
      item { ImageCard(image = it) }
    }
  }
}

@Composable
fun ImageCard(image: ImageData) {
  Card {
    Column(modifier = Modifier.padding(10.dp)) {
      Image(
        painter = painterResource(id = image.drawable),
        contentDescription = image.text
      )
      Text(text = image.text)
    }
  }
}

val images = listOf(
  ImageData("Image 1", R.drawable.img1),
  ImageData("Image 2", R.drawable.img2),
  ImageData("Image 3", R.drawable.img2)
)

data class ImageData(
  val text: String,
  @DrawableRes val drawable: Int
)

图片宽度未在 Android Jetpack Compose 的卡片中正确显示

Image width is not showing properly in Card of Android Jetpack Compose

android

android-layout

kotlin

android-jetpack

android-jetpack-compose