如何在 Flutter 中实现自定义形状的容器答案

【问题标题】：How to achieve a custom shaped container in Flutter如何在 Flutter 中实现自定义形状的容器
【发布时间】：2019-10-03 19:49:33
【问题描述】：

我想实现一个自定义形状的容器，如下图所示。有没有办法在 Flutter 中构建自定义形状的容器？

【问题讨论】：

标签： flutter

【解决方案1】：

卡罗尔的回答有点含糊。我决定用一些实际的代码来扩展它。

我认为这就是您要寻找的。最后一节课对这个问题特别感兴趣：

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: CustomPaint(
          painter: Chevron(),
          child: Container(
            width: 100.0,
            height: 120.0,
            child: Padding(
              padding: EdgeInsets.only(top: 30.0),
              child: Align(
                alignment: Alignment.topCenter,
                child: Text("1", style: TextStyle(fontSize: 24.0)),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

class Chevron extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final Gradient gradient = new LinearGradient(
      begin: Alignment.topCenter,
      end: Alignment.bottomCenter,
      colors: [Colors.orangeAccent, Colors.yellow],
      tileMode: TileMode.clamp,
    );

    final Rect colorBounds = Rect.fromLTRB(0, 0, size.width, size.height);
    final Paint paint = new Paint()
      ..shader = gradient.createShader(colorBounds);

    Path path = Path();
    path.moveTo(0, 0);
    path.lineTo(0, size.height);
    path.lineTo(size.width / 2, size.height - size.height / 3);
    path.lineTo(size.width, size.height);
    path.lineTo(size.width, 0);
    path.close();

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}

【讨论】：

我认为容器仍然是一个矩形。我们与客户画家一起粉刷。 BoxShadow 不会围绕曲线和角度工作。他们将跟随一个矩形容器。是否可以将容器实际裁剪到这个大小，而不是只绘制我们想要看到的区域而让其他所有内容透明

【解决方案2】：

您可以使用CustomPainter 实现此目的。

【讨论】：