Flutter中创建角度渐变

小鱼儿 2022-12-24 06:00 115阅读 0赞

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

**我不明白如何以度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\]，因为这只是示例）**

![aHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS8zUGNZRi5wbmc][]

**尝试使用以下值：**

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

## ##

**如果[要按][Link 1]角度使用渐变，最好使用[SweepGradient][Link 1] 。** **您可以玩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 and 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],
            ),
          ),
        ),

[Flutter_45]: https://www.thinbug.com/q/53488064
[aHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS8zUGNZRi5wbmc]: https://stackoom.com/link/aHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS8zUGNZRi5wbmc=
[Link 1]: https://stackoom.com/link/aHR0cHM6Ly9kb2NzLmZsdXR0ZXIuaW8vZmx1dHRlci9wYWludGluZy9Td2VlcEdyYWRpZW50LWNsYXNzLmh0bWw=