Question

我不明白如何以度为单位线性渐变。我有以下代码：

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

有关渐变的更多详细信息：How to improve your Flutter application with gradient designs by Varun Chilukuri

Answer 2

使用Alignment.topLeft和Alignment.bottomRight

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

Answer 3

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

response["Cache-Control"] = "no-cache, no-store, must-revalidate" # HTTP 1.1.
response["Pragma"] = "no-cache" # HTTP 1.0.
response["Expires"] = "0" # Proxies.

在这种情况下不需要 LinearGradient( begin: Alignment(-1.0, 0.0), end: Alignment(1.0, 0.0, transform: GradientRotation(0.7853982), ),。

Answer 4

尝试使用以下值：

static navigationOptions = () => {
  return {
    title: <ScreenTitle path="privacyPolicy:title" />,
  }
}

或者活动更好

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

Y：参数说明

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

Answer 5

如果要按角度使用渐变，最好使用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 6

对于来到这里寻求答案的任何人，正确的方法是在线性渐变上使用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;

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

6 个答案: