自定义弧形卡片形状 Flutter

Posted 2023-02-23

【中文标题】自定义弧形卡片形状 Flutter

【英文标题】：Custom curved card shape Flutter

【发布时间】：2022-01-04 12:44:31

【问题描述】：

我已尝试创建此形状，但找不到弯曲卡片角的方法。这是我想要实现的目标 What I want to achieve

相反，我得到了这个形状： What I have achieved

这是我的示例代码：

    Container(
      child: Center(
        child: CustomPaint(
          painter: Chevron(),
          child: Container(
            width: 120.0,
            height: 140.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, 30);
    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;

知道如何解决这个问题吗？谢谢

【参考方案1】：

您必须使用来自here 的flutter_custom_clippers 包。 在你的 pubspec.yaml 文件中添加这个依赖，你也可以参考我的答案here

试试下面的代码希望对你有帮助

在您的文件中导入包

import 'package:flutter_custom_clippers/flutter_custom_clippers.dart';

您的小部件：

 ClipPath(
            clipper: RoundedDiagonalPathClipper(),
            child: Container(
              height: 320,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.all(
                  Radius.circular(
                    50.0,
                  ),
                ),
                color: Colors.grey[300],
              ),
              child: Center(
                child: Text("Your Shape"),//put your widget here
              ),
            ),
          ),

您的结果屏幕->