Question

我在容器上涂了带有linearGradient的颜色。

Container(
  padding: EdgeInsets.only(left: 7.0),
  decoration: BoxDecoration(
    border: Border.all(
      width: 1,
      color: Colors.black12,
    ),
    borderRadius: BorderRadius.all(
      Radius.circular(7.0)
    ),
    boxShadow: [
      BoxShadow(
        offset: Offset(1, 3),
        blurRadius: 5.0,
        color: Colors.grey,
      )
    ],
    gradient: LinearGradient(
      colors: [
        _changeColorBrightness(widget.item.color, 0.1),
        _changeColorBrightness(widget.item.color, -0.1),
      ],
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
    ),
  ),
),

要获得渐变的颜色，我要使侧面的颜色变亮/变暗：

Color _changeColorBrightness(Color color, double deltaValue) {
  HSVColor hsvColor = HSVColor.fromColor(color);
  double newValue = hsvColor.value + deltaValue;
  if (newValue < 0.0) {
    newValue = 0.0;
  } else if (newValue > 1.0) {
    newValue = 1.0;
  }
  return hsvColor.withValue(newValue).toColor();
}

除黑色外，所有颜色渐变均符合预期：

我的第一个想法是，必须考虑这样的事实：黑色的颜色渐变不像其他颜色那样大（我不能在右侧使黑色变暗）。但是，当我查看黑色渐变的颜色时，它们分别是0xff1a1a1a和0xff000000。而且，如果我增大渐变，即使有更多条纹，条纹也会保留在黑色项目中。

为什么会这样，我该如何避免呢？

Answer 1

如果适合您的设计，请尝试

Padding(
        padding: EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 0.0),
        child: Card(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(15.0),
          ),
          child: Container(
            padding: new EdgeInsets.only(top: 0.0),
            child: new Container(
                padding: new EdgeInsets.fromLTRB(10.0, 5.0, 10.0, 5.0),
                child: ListTile(
                  subtitle: Text("This is Dummy Data",style: TextStyle(
                    color: Colors.white
                  ),),
                  title: Text("Hello World",style: TextStyle(
                      color: Colors.white
                  ),),
                )),
            decoration: new BoxDecoration(
              gradient: new LinearGradient(
                  colors: [
                    Colors.black,
                    Colors.black54,
                    /*AppColours.appgradientfirstColour,
                    AppColours.appgradientsecondColour*/
                  ],
                  begin: const FractionalOffset(0.0, 0.0),
                  end: const FractionalOffset(0.5, 0.0),
                  stops: [0.0, 1.0],
                  tileMode: TileMode.clamp),
              borderRadius: BorderRadius.circular(12.0),
            ),
          ),
        ),
      )

颤动的黑色渐变不平滑

1 个答案: