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" )
    }

}