Flutter：需要帮助来实现带有图像的卡片

Posted 2023-02-23

【中文标题】Flutter：需要帮助来实现带有图像的卡片

【英文标题】：Flutter : Need help to implement card with image

【发布时间】：2020-07-07 02:12:39

【问题描述】：

我需要实现类似于下图所示的设计：

【问题讨论】：

我会使用 CustomPainter 和 Path 来生成绘图。看看这个：medium.com/flutter-community/…

@Manuel 实际上我尝试使用 CustomPainter 来实现这一点，但无法正确获取，需要再试一次。无论如何谢谢:)

【参考方案1】：

这是一个可能的解决方案，使用CustomPainter 和生成绘图的路径。我使用了 Path 类的 cubicTo 和 addRect 函数。关于这些函数和路径绘制的更多信息，我参考这个：Paths in Flutter: A Visual Guide

这是扩展CustomPainter的类

class CardPainter extends CustomPainter 
  final Color color;
  final double strokeWidth;

  CardPainter(this.color = Colors.black, this.strokeWidth = 3);

  @override
  void paint(Canvas canvas, Size size) 
    Paint paint = Paint()
      ..color = color
      ..strokeWidth = this.strokeWidth
      ..style = PaintingStyle.stroke;
    canvas.drawPath(getShapePath(size.width, size.height), paint);
  

  // This is the path of the shape we want to draw
  Path getShapePath(double x, double y) 
    return Path()
      ..moveTo(2 * x / 3, y)
      ..cubicTo(x / 1.5, y, 0, y / 3, x, 0) // draw cubic curve
      ..addRect(Rect.fromLTRB(0, 0, x, y)); // draw rectangle
  

  @override
  bool shouldRepaint(CardPainter oldDelegate) 
    return oldDelegate.color != color;
  

这里是CustomPainter的实现

class CustomCard extends StatelessWidget 
  CustomCard(Key key) : super(key: key);

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(title: Text('Custom Card Demo')),
      body: Center(
        child: Container(
          color: Colors.grey[300],
          width: 250,
          height: 120,
          padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
          child: CustomPaint(
            painter: CardPainter(color: Colors.blueAccent, strokeWidth: 3), // this is your custom painter
            child: Stack(
              children: <Widget>[
                Positioned(
                  top: 25,
                  left: 30,
                  child: Text('Text1'),
                ),
                Positioned(
                  top: 55,
                  left: 150,
                  child: Text('Text2'),
                ),
              ],
            ),
          ),
        ),
      ),
    );