Android Jetpack Compose：如何绘制填充父布局的圆角矩形

你的代码里有几个关键问题，导致画出来的矩形填不满Box：

• 没用到Canvas组件——drawRect、drawRoundRect这类绘制方法必须放在Canvas的作用域里才会生效，直接写在Box里根本不会执行绘制逻辑
• 手动通过onGloballyPositioned拿宽高转DP完全没必要，Canvas内部能直接拿到父布局给的可用尺寸
• 你要画圆角矩形，得用drawRoundRect，不是drawRect

下面是修正后的代码，能自动填满整个Box的宽高画圆角矩形，直接适配Column/Row的网格布局：

Box(modifier = modifier) {
    // 让Canvas占满整个Box的空间
    Canvas(modifier = Modifier.fillMaxSize()) {
        // 直接用Canvas自带的size，就是Box的实际宽高
        drawRoundRect(
            color = Color.Green,
            size = size,
            // 自定义圆角大小，把DP转成Canvas需要的像素值
            cornerRadius = CornerRadius(16.dp.toPx())
        )
        
        // 如需显示宽高，直接用当前Canvas的size转换即可
        val dpHeight = size.height.toDp()
        val dpWidth = size.width.toDp()
        Column {
            Text(text = "H $dpHeight")
            Text(text = "W $dpWidth")
        }
    }
}

重点说明： #

• Modifier.fillMaxSize()让Canvas完全填充Box，这样Canvas的size就是Box的真实尺寸，不用手动监听位置
• drawRoundRect是专门画圆角矩形的API，cornerRadius需要传像素值，用dp.toPx()转换就行
• 不用额外维护宽高状态，Canvas会自动跟着Box的尺寸变化，完美适配网格布局的需求

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