Android Jetpack Compose 的卡中的圖像寬度顯示不正確

Question

我正在嘗試使用Jetpack Compose進行布局。

我想在每個Card中顯示一個Image和一個Text ，使用Column 小部件垂直堆疊

我可以使用Composable function成功編寫代碼，但我在最后一張卡片中遇到問題，如下所述：

• 圖像寬度不完整
• 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)
            }
        }
    }

}

Output：

最后一張卡片的圖像 (img2) 與中間卡片的圖像相同，但僅在最后一個索引處出現問題

誰能幫助我的可組合 Function 出了什么問題？

參考：

我正在關注 Hyper Coder 社區的教程

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
)