Android 在可滾動/惰性行中編寫修飾符寬度意外行為

Question

我正在構建一個基本布局，它顯示帶有卡片的水平可滾動行。 這些卡片是一個列組件，中間有幾個分隔線：

@Composable
fun TestCard(
  name: String
) {
  Column(
    modifier = Modifier
      .background(MaterialTheme.colors.surface)
      .padding(12.dp),
    horizontalAlignment = Alignment.Start
  ) {
    Text(text = name, style = Typography.h4.bold.black)
    Spacer(modifier = Modifier.height(8.dp))
    Divider(color = Color.Black) //DOES NOT APPEAR IN ROW
    Spacer(modifier = Modifier.height(8.dp))
    Divider(modifier = Modifier.fillMaxWidth(), color = Color.Black) //DOES NOT APPEAR IN ROW
    Spacer(modifier = Modifier.height(8.dp))
    Text(text = "Other text", style = Typography.h4.bold.black)
  }
}

我還有一個可滾動的行，其中包含這些卡片的列表：

@Composable
fun TestComponent() {

  val scrollState = rememberScrollState()
  val names = listOf("Martha", "Erik","Steve","Roy","Pete")

  Column(
    modifier = Modifier
      .fillMaxWidth()
      .background(MaterialTheme.colors.primary),
    horizontalAlignment = Alignment.Start
  ) {
    Row(Modifier.horizontalScroll(scrollState), horizontalArrangement = Arrangement.spacedBy(16.dp)) {
      names.forEach { name ->
        TestCard(name)
      }
    }
  }
}

當我單獨展示卡片時，我可以看到兩個分隔線。 當我顯示包含卡片的行時，分隔線不會出現，因為它們的寬度設置為 0（我可以使用 LayoutInspector 驗證分隔線是否存在）。 視覺表現：

我知道我可以為寬度創建一個 state 變量，該變量將在Modifier.onSizeChanged中更新，但我確信一定有發生這種情況的原因和更好的解決方案。

Answer 1

Divider內部有一個fillMaxWidth()修飾符，但是當您查看文檔時：

如果傳入的最大寬度為Constraints.Infinity ，則此修飾符將無效。

它發生是因為horizontalScroll 。
您必須指定Divider和Spacer的寬度。

解決方法是將width(IntrinsicSize.Max)應用於TestCard中的Column 。 通過這種方式，約束具有Constraints.fixedWidth(width) ：

@Composable
fun TestCard(
    name: String
) {
    Column(
        modifier = Modifier
            .width(IntrinsicSize.Max)
            .background(androidx.compose.material.MaterialTheme.colors.surface)
            .padding(12.dp),
        horizontalAlignment = Alignment.Start
    ) {
        Text(text = name,)
        Spacer(modifier = Modifier.height(8.dp).fillMaxWidth())
        Divider(color = Color.Black, modifier = Modifier.fillMaxWidth()) 
        Spacer(modifier = Modifier.height(8.dp).fillMaxWidth())
        Divider(modifier = Modifier.fillMaxWidth(), color = Color.Black) 
        Spacer(modifier = Modifier.height(8.dp).fillMaxWidth())
        Text(text = "Other text" )
    }

}