Flutter如何绘制自定义渐变？

Question

最近我在尝试创建带有渐变效果的AppBar时遇到了一个问题。

我尝试在Flutter中使用以下三种颜色：rose = Color(0xFFec15ee)，purple = Color(0xFF8561f5)和blue = Color(0xFF1eaefc)，并相应地设置对齐属性，但它给出的结果与我的预期不符。

BoxDecoration(
      gradient: LinearGradient(
        colors: [
          AppColors.roseGradientColor,
          AppColors.purpleInAppGradientColor,
          AppColors.blueInAppGradientColor
        ],
        stops: [
          0.0,
          0.05,
          1.0
        ],
        begin: Alignment.bottomLeft,
        end: Alignment.topRight
      ),
        borderRadius: BorderRadius.only(bottomLeft: Radius.circular(25),bottomRight: Radius.circular(25))
    )

想象一下没有不透明度。正如您所看到的，我只希望玫瑰在左下角对齐，而不是像示例中显示的那样扩展到左上角。

我的问题是如何做到这一点。肯定有一种方法可以在CustomPainter中实现，但我还没有找到正确的方法。

- Christian X

---

使用Alignment(double, double)构造函数中远高于top的Alignment，而不是Alignment.topRight。 - pskink

Answer 1

pskinks的评论是正确的，我完全忽略了这个选项。使用Alignment(x,y)是关键。

下面是解决我上述问题的方法。

BoxDecoration(
      gradient: LinearGradient(
        colors: [
          AppColors.roseGradientColor,
          AppColors.purpleInAppGradientColor,
          AppColors.blueInAppGradientColor
        ],
        begin: Alignment(-0.7,12),
        end: Alignment(1,-2),
      ),
        borderRadius: BorderRadius.only(bottomLeft: Radius.circular(25),bottomRight: Radius.circular(25))
    )

- Christian X

---

好的，但是为什么在“开始”对齐中使用“-0.7”？ 为什么不用“-1”？ “-1”是用于“左对齐”的。 - pskink

老实说，我用-1、-5、-10、-0.2、-0.5等数值测试了设计，最终发现-0.7是最接近我想要的设计的。这个值是通过反复试验得到的，百分之百准确哦 ;) - Christian X

最重要的是最终结果看起来不错;-) - pskink