如何在Jetpack Compose中实现与Figma一致的线性渐变按钮

你当前代码的问题在于使用了固定像素值的Offset，这会导致在不同尺寸的按钮或屏幕上，渐变的位置和比例跟Figma设计不符——Figma里的渐变坐标是基于按钮自身尺寸的相对比例，而非绝对像素。

修正方案 #

改用相对比例的偏移值定义渐变起止位置，无论按钮尺寸如何变化，渐变效果都能和Figma保持一致：

// 匹配Figma设计的按钮尺寸（宽315dp、高60dp）
Button(
    onClick = { /* 处理点击逻辑 */ },
    modifier = Modifier
        .width(315.dp)
        .height(60.dp),
    // 隐藏默认按钮背景与边框
    colors = ButtonDefaults.buttonColors(containerColor = Color.Transparent),
    border = null
) {
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(
                brush = Brush.linearGradient(
                    colors = listOf(Color(0xFF92A3FD), Color(0xFF9DCEFF)),
                    // 用相对比例替代固定像素：起点在宽度25%、高度中点，终点在宽度75%、高度中点
                    start = Offset(x = 0.25f, y = 0.5f),
                    end = Offset(x = 0.75f, y = 0.5f)
                )
            ),
        contentAlignment = Alignment.Center
    ) {
        Text(text = "按钮文本", color = Color.White)
    }
}

关键说明 #

• 相对比例的Offset取值范围是0f到1f，对应控件宽/高的0%到100%，完美匹配Figma的相对坐标逻辑
• 通过Box承载渐变背景和按钮文本，确保渐变完全覆盖按钮区域
• 如果Figma设计中有中间颜色过渡节点，可添加colorStops参数精确匹配，示例：

  colorStops = arrayOf(
      0.0f to Color(0xFF92A3FD),
      0.5f to Color(0xFF96BFFD),
      1.0f to Color(0xFF9DCEFF)
  )
  

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