Question

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

我想在每个卡片中显示一个图像和一个文本，使用垂直堆叠列小部件

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

图像宽度未满
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 { } 不能滚动，它会在屏幕上的可用空间中布置内容。

所以你的最后一张图片发生了什么，它缩小了它的高度，导致它缩小了它的宽度以保持纵横比。这导致绿色背景出现。因此，使顶部 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 卡片中的图像宽度未正确显示

1 个答案: