Divider在设置horizontalScroll修饰符的父组件中不可见，是Bug吗？

问题原因 #

该现象符合Compose的测量规则，不属于框架Bug：

• 为父组件添加horizontalScroll修饰符后，父组件的水平方向测量约束变为无界，此时子组件调用fillMaxWidth()时没有可用的最大宽度参考，最终测量得到的宽度为0。而Compose默认的Divider组件的宽度修饰符就是fillMaxWidth()，因此会因为宽度为0变为不可见状态。
• 当父组件使用verticalScroll修饰符时，仅垂直方向为无界约束，水平方向仍然继承父容器的宽度上限，所以Divider的fillMaxWidth()可以正常获取到有效宽度，因此可以正常显示。

解决方法 #

只需要手动为Divider指定明确的宽度即可解决，常见的实现方案如下：

方案1：匹配容器可视宽度 #

如果你需要Divider始终占满滚动容器的可视宽度，可以先获取容器的宽度值，再传给Divider：

fun main() = application {
    Window(onCloseRequest = ::exitApplication) {
        // 获取当前窗口的宽度，也可以通过外层Box的onSizeChanged修饰符获取实际容器宽度
        val containerWidth = LocalConfiguration.current.screenWidthDp.dp
        Box(
            Modifier.fillMaxSize()
                .background(Color.Green)
                .horizontalScroll(rememberScrollState())
        ) {
            Divider(
                thickness = 10.dp,
                color = Color.Red,
                // 手动指定宽度
                modifier = Modifier.width(containerWidth)
            )
        }
    }
}

方案2：匹配滚动内容宽度 #

如果你的滚动区域内的内容宽度是固定的，或者需要Divider和内部其他内容宽度保持一致，可以给内容的父容器设置width(IntrinsicSize.Max)，Divider会自动匹配内容的最大宽度：

Box(
    Modifier.fillMaxSize()
        .background(Color.Green)
        .horizontalScroll(rememberScrollState())
) {
    Column(Modifier.width(IntrinsicSize.Max)) {
        // 你的LazyColumn等内容
        LazyColumn(modifier = Modifier.width(800.dp)) {
            // 列表项
        }
        // Divider会自动匹配Column的最大宽度，不需要额外设置宽度
        Divider(thickness = 10.dp, color = Color.Red)
    }
}

内容的提问来源于stack exchange，提问作者Om Kumar