如何调整Jetpack Compose中GenericShape的尺寸？

我用SVG路径定义了约20个GenericShape，想把它们做成可点击、独立且位置统一的按钮。每个GenericShape的定义如下：

val shape_0 = GenericShape { size, layoutDirection ->
    val width: Float = size.width // not used here
    val height: Float = size.height // not used here

    moveTo(147.5f, 320f)
    cubicTo(150f, 335f, 170f, 335f, 172.5f, 320f)
    cubicTo(180f, 245f, 186f, 213f, 175f, 180f)
    cubicTo(165f, 140f, 155f, 140f, 145f, 180f)
    cubicTo(134f, 213f, 140f, 245f, 147.5f, 320f)
    close()
}

按钮定义如下：

Button(
    colors = ButtonDefaults.buttonColors(backgroundColor = Color.Red),
    border = BorderStroke(1.dp, Color.Black),
    onClick = {},
    shape = shape_0
) {}

单个按钮显示正常，但存在两个问题：

1. 边框显示不一致（无论设置何种elevation）
2. 将所有按钮放入设置了fillMaxSize的Box中后，按钮尺寸并未随父容器变化，我希望避免手动根据父容器宽高调整路径的数百个参数。

尝试过使用Surface、调整Modifier或clipToBounds，但偶尔会导致按钮行为异常。请问是否可以在同一Box（或其他组件）中统一调整所有按钮的尺寸？

一、统一适配按钮尺寸（解决不随父容器变化问题） #

你的GenericShape使用了绝对坐标，完全忽略了传入的size参数，因此无法随父容器缩放。要解决这个问题，需要将路径坐标转换为相对坐标，基于父容器尺寸动态缩放：

步骤1：计算原始SVG路径的边界范围 #

先找出当前shape_0路径的最小/最大X、Y坐标：

• 最小X：134f，最大X：186f → 原始宽度 = 186f - 134f = 52f
• 最小Y：140f，最大Y：335f → 原始高度 = 335f - 140f = 195f

步骤2：修改GenericShape实现动态缩放 #

在GenericShape中，基于父容器的size计算缩放比例，将所有绝对坐标转换为相对坐标：

val shape_0 = GenericShape { size, layoutDirection ->
    val originalWidth = 52f // 186-134
    val originalHeight = 195f // 335-140
    val minX = 134f
    val minY = 140f

    // 计算缩放比例（保持原始宽高比，避免拉伸变形）
    val scale = min(size.width / originalWidth, size.height / originalHeight)
    val offsetX = (size.width - originalWidth * scale) / 2 // 居中偏移
    val offsetY = (size.height - originalHeight * scale) / 2

    // 坐标转换工具函数
    fun translateX(x: Float) = (x - minX) * scale + offsetX
    fun translateY(y: Float) = (y - minY) * scale + offsetY

    moveTo(translateX(147.5f), translateY(320f))
    cubicTo(translateX(150f), translateY(335f), translateX(170f), translateY(335f), translateX(172.5f), translateY(320f))
    cubicTo(translateX(180f), translateY(245f), translateX(186f), translateY(213f), translateX(175f), translateY(180f))
    cubicTo(translateX(165f), translateY(140f), translateX(155f), translateY(140f), translateX(145f), translateY(180f))
    cubicTo(translateX(134f), translateY(213f), translateX(140f), translateY(245f), translateX(147.5f), translateY(320f))
    close()
}

步骤3：让按钮占满父容器空间 #

在Button上添加Modifier.fillMaxSize()，让按钮继承父容器尺寸，GenericShape会自动适配：

Button(
    colors = ButtonDefaults.buttonColors(backgroundColor = Color.Red),
    border = BorderStroke(1.dp, Color.Black),
    onClick = {},
    shape = shape_0,
    modifier = Modifier.fillMaxSize() // 关键：让按钮占满父容器
) {}

二、修复边框显示不一致问题 #

边框异常通常是elevation阴影与边框重叠，或Shape路径未适配导致的渲染错误：

1. 禁用Button自带的elevation：将elevation设为ButtonDefaults.buttonElevation(0.dp)，避免阴影覆盖边框
2. 用Modifier添加独立阴影：如果需要阴影效果，改用Modifier.shadow()单独控制，与边框分离：

   Button(
       colors = ButtonDefaults.buttonColors(backgroundColor = Color.Red),
       border = BorderStroke(1.dp, Color.Black),
       onClick = {},
       shape = shape_0,
       elevation = ButtonDefaults.buttonElevation(0.dp), // 禁用自带elevation
       modifier = Modifier
           .fillMaxSize()
           .shadow(4.dp, shape_0) // 单独添加阴影，使用相同Shape
   ) {}
   

3. 确保路径闭合：你的shape_0已经调用close()，若其他Shape有问题，检查是否闭合路径。

三、批量处理多个Shape #

如果有20个Shape，可以封装通用缩放函数，避免重复代码：

fun createScaledShape(
    originalMinX: Float,
    originalMaxX: Float,
    originalMinY: Float,
    originalMaxY: Float,
    pathBuilder: (translateX: (Float) -> Float, translateY: (Float) -> Float) -> Unit
): GenericShape {
    val originalWidth = originalMaxX - originalMinX
    val originalHeight = originalMaxY - originalMinY
    return GenericShape { size, _ ->
        val scale = min(size.width / originalWidth, size.height / originalHeight)
        val offsetX = (size.width - originalWidth * scale) / 2
        val offsetY = (size.height - originalHeight * scale) / 2

        fun translateX(x: Float) = (x - originalMinX) * scale + offsetX
        fun translateY(y: Float) = (y - originalMinY) * scale + offsetY

        pathBuilder(translateX, translateY)
    }
}

// 用该函数创建shape_0
val shape_0 = createScaledShape(
    originalMinX = 134f,
    originalMaxX = 186f,
    originalMinY = 140f,
    originalMaxY = 335f
) { translateX, translateY ->
    moveTo(translateX(147.5f), translateY(320f))
    cubicTo(translateX(150f), translateY(335f), translateX(170f), translateY(335f), translateX(172.5f), translateY(320f))
    cubicTo(translateX(180f), translateY(245f), translateX(186f), translateY(213f), translateX(175f), translateY(180f))
    cubicTo(translateX(165f), translateY(140f), translateX(155f), translateY(140f), translateX(145f), translateY(180f))
    cubicTo(translateX(134f), translateY(213f), translateX(140f), translateY(245f), translateX(147.5f), translateY(320f))
    close()
}

内容的提问来源于stack exchange，提问作者pierre.b