Flutter Cards：如何在 Flutter 中创建自定义卡片小部件

Posted 2023-02-23

【中文标题】Flutter Cards：如何在 Flutter 中创建自定义卡片小部件

【英文标题】：Flutter Cards : How can i create a custom card widget in flutter

【发布时间】：2019-04-10 06:38:48

【问题描述】：

我正在尝试在 Flutter 中创建一个自定义卡片，如下所示：

如何在颤振中实现这一点？

这就是我想要实现的目标：

【问题讨论】：

到目前为止你做了什么？

【参考方案1】：

您可以使用ClipPath 自定义剪辑您的小部件

ClipPath(clipper: _CustomClipper(), child: Container(width: 200.0, height: 100.0, color: Colors.grey,),)

（仅以灰色容器为例）

const double _topPadding = 20.0;
const double _arcRadius = 8.0;
class _CustomClipper extends CustomClipper<Path> 
  @override
  Path getClip(Size size) 
    double point = size.width / 3 * 2;
    final path = Path()
      ..moveTo(0.0, _topPadding)
      ..lineTo(point, _topPadding)
      ..lineTo(point, _arcRadius)
      ..lineTo(point + _arcRadius, 0.0)
      ..lineTo(size.width - _arcRadius, 0.0)
      ..lineTo(size.width, _arcRadius)
      ..lineTo(size.width, size.height)
      ..lineTo(0.0, size.height)
      ..lineTo(0.0, _topPadding)
      ..addOval(Rect.fromLTRB(
          point, 0.0, point + 2 * _arcRadius, 2 * _arcRadius))
      ..addOval(Rect.fromLTRB(
          size.width - 2 * _arcRadius, 0.0, size.width, 2 * _arcRadius));

    path.close();
    return path;
  

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;

UPD - 提升解决方案

Material(
    color: Colors.yellow,
    clipBehavior: Clip.antiAlias,
    shape: _CustomBorder(),
    elevation: 16.0, child: Container(width: 200.0, height: 100.0, child: Stack(
        children: <Widget>[
            Positioned(child: FittedBox(fit: BoxFit.scaleDown, child: Text('and a text here too'),),left: 140.0, right: 4.0, top: 4.0,),
            Positioned(child: Text('I want a text here', style: TextStyle(fontSize: 24.0),), top: 40.0, left: 4.0,)
        ],
    ),),)
...
class _CustomBorder extends BorderDirectional 
  @override
  Path getOuterPath(ui.Rect rect, ui.TextDirection textDirection) 
    Size size = rect.size;
    double point = size.width / 3 * 2;
    final path = Path()
      ..moveTo(0.0, _topPadding)
      ..lineTo(point, _topPadding)
      ..lineTo(point, _arcRadius)
      ..lineTo(point + _arcRadius, 0.0)
      ..lineTo(size.width - _arcRadius, 0.0)
      ..lineTo(size.width, _arcRadius)
      ..lineTo(size.width, size.height)
      ..lineTo(0.0, size.height)
      ..lineTo(0.0, _topPadding)
      ..addOval(Rect.fromLTRB(
          point, 0.0, point + 2 * _arcRadius, 2 * _arcRadius))
      ..addOval(Rect.fromLTRB(
          size.width - 2 * _arcRadius, 0.0, size.width, 2 * _arcRadius));

    path.close();
    return path;
  

【讨论】：

可以像普通的卡片高程一样添加高程吗？

对不起，如果我打扰了，但最后是否可以在新卡的正文和高架区域添加文本或其他小部件

我不明白你的问题。 Material 是 child - 你可以用其他东西代替 Container。或者你可以把你的小部件放在这个Container

我已经更新了图片，所以你会更好地理解我的问题

正如我所说 - 您可以将任何小部件放入容器中。好的，我已经更新了答案 - 现在它准确地显示了你图片中的内容