如何在 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

这可能会帮助您确定角度

例如：

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

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

Answer 2

尝试使用这些值：

 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 3

使用Alignment.topLeft和Alignment.bottomRight

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

Answer 4

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

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

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

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

无论对象的尺寸如何，使用transform始终会产生相同的梯度。

---

不要忘记导入数学库：

import 'dart:math' as math;

Answer 5

作为triple7 答案的一个选项，您可以使用弧度值而不是 pi 表达式：

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

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

Answer 6

如果要按角度使用渐变，最好使用SweepGradient 。 您可以使用center 、 startAngle和endAngle 。 这是您正在寻找的解决方案：

BoxDecoration(
        gradient: SweepGradient(
          center: AlignmentDirectional(1, -1),
          startAngle: 1.7,
          endAngle: 3
          ,
          colors: const <Color>[
            Color(0xFF148535),
            Color(0xFF148535),
            Color(0XFF0D6630),
            Color(0XFF0D6630),
            Color(0xFF148535),
            Color(0xFF148535),              ],
          stops: const <double>[0.0,0.3,0.3,0.7,0.7,1.0]),),

这是一个非常简单的示例，供其他想要了解和使用Gradient和Angles 的人使用：

 Container(
      height: 400,
      decoration: BoxDecoration(
        gradient: SweepGradient(
          center: FractionalOffset.topRight,
          startAngle: 2,
          endAngle: 5
          ,
          colors: const <Color>[
            Colors.red, // blue
            Colors.blue 
          ],
          stops: const <double>[0.0, 0.5],
        ),
      ),
    ),

Answer 7

示例 CSS：

background: linear-gradient(20deg, #ff0000 20%, #000000 60%);

使用GradientRotation ：

Container(
   height: 300,
   width: 300,
   decoration: const BoxDecoration(
      gradient: LinearGradient(
         begin: Alignment.bottomCenter,
         end: Alignment.topCenter,
         colors: [
            Color(0xFFFF0000),
            Color(0xFF000000),
         ],
         stops: [0.2, 0.6],
         transform: GradientRotation(20 * pi / 180),
     ),
   ),
);

使用手动计算 对齐方式：

Alignment getGradientRotate(num degree) {
  degree -= 90;
  final x = cos(degree * pi / 180);
  final y = sin(degree * pi / 180);
  final xAbs = x.abs();
  final yAbs = y.abs();

  if ((0.0 < xAbs && xAbs < 1.0) || (0.0 < yAbs && yAbs < 1.0)) {
    final magnification = (1 / xAbs) < (1 / yAbs) ? (1 / xAbs) : (1 / yAbs);
    return Alignment(x, y) * magnification;
  } else {
    return Alignment(x, y);
  }
}

然后使用：

Container(
   height: 300,
   width: 300,
   decoration: BoxDecoration(
      gradient: LinearGradient(
         begin: -getGradientRotate(20),
         end: getGradientRotate(20),
         colors: const [
            Color(0xFFFF0000),
            Color(0xFF000000),
          ],
         stops: const [0.2, 0.6],
     ),
   ),
);