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

iyr7buue  于 2022-12-24  发布在  Flutter
关注(0)|答案(6)|浏览(193)

我不能理解如何操作线性梯度度。我有以下代码:

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],因为这只是示例)

o0lyfsai

o0lyfsai1#

这可能有助于确定Angular
例如:

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

有关梯度的更多详细信息:How to improve your Flutter application with gradient designs by Varun Chilukuri

sg2wtvxw

sg2wtvxw2#

对于任何想知道答案的人来说,正确的方法是在线性梯度上使用transform,如下所示:

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

我们在这里做的是绘制一个垂直渐变(在X轴上从-1.01.0),并将其旋转45度pi/4)以创建对角渐变的效果。
使用Alignment可能会在对象大小不同时产生不同的对角线(您可以通过在两个不同的框(一个纵向框和一个横向框)上应用相同的渐变来自己测试)。
无论对象的尺寸如何,使用transform始终会产生相同的渐变。

  • 不要忘记导入数学库:*
import 'dart:math' as math;
2ledvvac

2ledvvac3#

请尝试使用以下值:

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的值///表示位置在底部以下。

ui7jx7zq

ui7jx7zq4#

使用Alignment.topLeftAlignment.bottomRight

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

83qze16e5#

作为triple7答案的一个选项,你可以使用弧度值代替pi表达式:

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

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

yzuktlbb

yzuktlbb6#

如果你想使用Angular 渐变,最好使用SweepGradient。你可以使用centerstartAngle,和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]),),

以下是一个非常简单的示例,供希望了解和使用渐变和**Angular **的其他人使用:

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],
        ),
      ),
    ),

相关问题