【问题标题】:Add shadow to ClipPath created from Container - Flutter为从容器创建的 ClipPath 添加阴影 - Flutter
【发布时间】:2020-12-25 01:12:43
【问题描述】:

我想为从 Container 创建的 ClipPath 添加阴影。 这是我创建的 ClipPath:

              ClipPath(
                clipper: RibbonClipper(),
                child: Container(
                  height: 20,
                  width: 80,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(5.0),
                      bottomLeft: Radius.circular(5.0),
                    ),
                    color: Color(0xFF338D5E),
                  ),
                ),
              ), 

而CustomClipper Path是:

  @override
  Path getClip(Size size) {
    var path = Path();
    path.lineTo(0, size.height);
    path.lineTo(size.width, size.height);
    path.lineTo(size.width * .90, size.height * .5);
    path.lineTo(size.width, 0);
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return true;
  }
}

【问题讨论】:

  • 你不能这样做 - 改用自定义ShapeBorder

标签: flutter flutter-layout shadow clip-path flutter-widget


【解决方案1】:

不久前我不得不这样做。我发现 this very useful gist 结合了 ClipPath 和阴影。或者,好像有人made it a package,但我没有测试。

【讨论】:

  • 不,不,不,如果您想要自定义形状,请使用自定义 ShapeBorder,就像任何其他颤振形状一样 (BeveledRectangleBorder / CircleBorder / ContinuousRectangleBorder / RoundedRectangleBorder / @987654329 @),有关自定义示例,请参见:stackoverflow.com/a/57943257/2252830
  • 你是说不要使用 ClipPath 吗? @pskink
  • @VijayPD 您可以尝试使用他的方法,因为它的样板更少(不要忘记Container 上的clipBehaviour: Clip.antiAlias)。但我个人无法让它在我的用例上工作。它不能像 ClipPath 那样互换。还有一个 ShapeBorderClipper 类,我找不到很好的例子。
猜你喜欢
  • 2021-02-04
  • 2018-12-22
  • 2022-11-23
  • 1970-01-01
  • 2022-12-05
  • 1970-01-01
  • 2014-03-10
  • 2019-09-07
  • 2019-11-06
相关资源
最近更新 更多