如何为Compose Canvas圆点添加2.dp内边距（ConstraintLayout场景）

有两种简单方式可实现圆点周围留出2dp空白的需求：

方法一：调整绘制圆的半径 #

在Canvas的onDraw方法中，计算圆的半径时减去2dp的空白距离，让圆的四周与Canvas边缘保持间隙：

Canvas(modifier = Modifier
    .size(11.dp)
    .constrainAs(chargerDot) {
        end.linkTo(chargerIcon.end)
        bottom.linkTo(chargerIcon.bottom)
    }, onDraw = {
    // 将2dp转换为像素值，作为空白间隙
    val gap = 2.dp.toPx()
    // 计算圆的半径：Canvas最小尺寸的一半减去间隙
    val circleRadius = (size.minDimension / 2) - gap
    drawCircle(
        color = dotColor,
        radius = circleRadius
    )
})

方法二：给Canvas添加内边距 #

利用Modifier.padding()在Canvas内部留出2dp空白，再让圆填充满剩余绘制区域：

Canvas(modifier = Modifier
    .size(11.dp)
    // padding需放在size之后，确保在11dp尺寸内部留白
    .padding(2.dp)
    .constrainAs(chargerDot) {
        end.linkTo(chargerIcon.end)
        bottom.linkTo(chargerIcon.bottom)
    }, onDraw = {
    // 此时绘制区域为11dp - 2dp*2 = 7dp，直接绘制圆即可占满留白后的区域
    drawCircle(color = dotColor)
})

额外优化（可选） #

若需要圆点与图标之间也保持间隙，可调整chargerDot的约束添加偏移量：

.constrainAs(chargerDot) {
    end.linkTo(chargerIcon.end, margin = 2.dp)
    bottom.linkTo(chargerIcon.bottom, margin = 2.dp)
}

结合上面的方法，就能同时实现圆点自身周围、圆点与图标之间都有空白的效果。

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