如何在 Flutter 中创建 45 度的线性渐变？

Question

我无法理解如何以度数 LinearGradient 进行操作。我有以下代码：

Container(
        height: 100.0,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(6.0),
          gradient: LinearGradient(begin: FractionalOffset.topLeft, end: FractionalOffset.bottomRight, colors: [
            Color(0xFF148535),
            Color(0xFF148535),
            Color(0XFF0D6630),
            Color(0XFF0D6630),
            Color(0xFF148535),
            Color(0xFF148535),
          ], stops: [
            0.0,
            0.3,
            0.3,
            0.7,
            0.7,
            1.0
          ]),
        ),
      );

但是.topLeft'.bottomRight' 不需要这样做。下面的图片显示了我想要得到的东西。（图片有偏移，不适合 [0.0, 0.3, 0.3, 0.7, 0.7, 1.0] 因为这只是示例）

Answer 1

对于来这里寻求答案的人来说，正确的方法是使用transform线性渐变，如下所示：

LinearGradient(
  begin: Alignment(-1.0, 0.0),
  end: Alignment(1.0, 0.0),
  colors: [],
  stops: [],
  transform: GradientRotation(math.pi / 4),
),

我们在这里所做的是绘制一个垂直渐变（X 轴上从-1.0到）并将其旋转 45 度( ) 以创建对角渐变的错觉。1.0pi/4

当您有不同大小的对象时，使用Alignment可能会导致不同的对角线。（您可以通过在两个不同的盒子（一个纵向和一个横向）上应用相同的渐变来亲自测试这一点。）

transform无论对象的尺寸如何，始终使用相同的渐变结果。

不要忘记导入数学库：

import 'dart:math' as math;

Answer 2

这可能会帮助您确定角度

例如：

LinearGradient(
          begin: Alignment(-1.0, -1),
          end: Alignment(-1.0, 1),

有关渐变的更多详细信息：Varun Chilukuri 撰写的如何使用渐变设计改进您的 Flutter 应用程序

Answer 3

尝试使用这些值：

 LinearGradient(
          begin: Alignment(-1.0, -2.0),
          end: Alignment(1.0, 2.0),

或者活动更好

   LinearGradient(
          begin: Alignment(-1.0, -4.0),
          end: Alignment(1.0, 4.0),

Y：参数说明

垂直方向的距离分数。
-1.0 的值对应于最顶端的边缘。值 1.0
对应于最底部的边缘。值不限于该范围；
/// 小于 -1.0 的值表示顶部上方的位置， /// 大于 1.0 的值表示底部下方的位置。

Answer 4

使用Alignment.topLeft和Alignment.bottomRight

LinearGradient(
      colors: [Colors.cyanAccent, Colors.amberAccent],
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
      tileMode: TileMode.clamp),

Answer 5

作为 Triple7 答案的一个选项，您可以使用弧度值代替 pi 表达式：

LinearGradient(
  begin: Alignment(-1.0, 0.0),
  end: Alignment(1.0, 0.0),
  transform: GradientRotation(0.7853982),
),

在这种情况下不需要dart:math。