如何在Compose中实现分隔线衔接的圆形边框，解决圆形边框变虚线问题

1. Modifier 执行顺序错误：Jetpack Compose 的 Modifier 按照书写顺序从左到右执行测量、布局逻辑，从右到左执行绘制逻辑。你的代码里圆形控件的 Modifier 顺序完全不符合规范：
   • 左侧圆形将位移offset放在了绘制类属性之后，且border未指定圆形形状，会默认按矩形绘制边框再被裁剪
   • 右侧圆形将尺寸设置size放在了 Modifier 末尾，导致前面的裁剪、边框绘制都没有正确的尺寸依据，绘制逻辑混乱
2. 子元素绘制层级错误：Row 的子元素按声明顺序从先到后绘制，后声明的元素会覆盖在先声明的元素上方。你的代码把中间虚线放在左侧圆形之后、右侧圆形之前，导致左侧圆形的右侧区域被中间的虚线覆盖，看起来边框像是断开的虚线
3. 中间虚线属性冲突：同时给中间虚线设置requiredWidth和weight，两个属性作用冲突，weight会让控件占满行内剩余空间，requiredWidth完全不会生效

调整 Modifier 顺序、子元素声明顺序，清理冲突属性即可，正确实现代码如下：

@Preview
@Composable
private fun ReceiptSeparator() {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(horizontal = 8.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        // 中间虚线先声明，绘制在最底层
        Box(
            modifier = Modifier
                .height(1.dp)
                .weight(1f)
                .background(Color.Gray, shape = DottedShape(step = 20.dp))
        )

        // 左侧圆形，后声明绘制在虚线上层
        Box(
            modifier = Modifier
                .requiredSize(50.dp)
                .offset(x = (-40).dp)
                .clip(CircleShape)
                .background(Color.White)
                .border(
                    width = 2.dp,
                    color = Color.Gray,
                    shape = CircleShape
                )
        )

        // 右侧圆形，绘制在虚线上层
        Box(
            modifier = Modifier
                .requiredSize(50.dp)
                .offset(x = 40.dp)
                .clip(CircleShape)
                .background(Color.White)
                .border(
                    width = 2.dp,
                    color = Color.Gray,
                    shape = CircleShape
                )
        )
    }
}

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