Question

我正在一个项目上，我想实现一个按钮

我如何轻松地制作这种形状。

Answer 1

您可以使用CustomPainter。看看this great example上的用法。

这是您要实现的目标的一个小示例（尽管我没有做圆角边框，但是您可以轻松扩展：

import 'package:flutter/material.dart';

main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Drawing Paths',
      home: Scaffold(
        body: Center(
          child: GestureDetector(
            onTap: () => print('Do Something'),
            child: CustomPaint(
              size: Size(200, 50),
              painter: CurvePainter(),
            ),
          ),
        ),
      ),
    );
  }
}

class CurvePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()
      ..color = Color(0xFFE32087)
      ..style = PaintingStyle.fill;

    var path = Path()
      ..moveTo(size.width*0.2, 0)
      ..lineTo(size.width, size.height*0.2)
      ..lineTo(size.width, size.height)
      ..lineTo(0, size.height);

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

结果：

Answer 2

使用代表该按钮的图像并将其用GestureDetector包裹起来（不建议这样做，但有时用户界面非常复杂，以至于仅在Flutter中制作它可能会过大，因此牢记此选项还不错）或和CustomClipper一起玩！

您要做的是创建一个Container或FlatButton并用ClipPath包裹起来，在其中您提供一个CustomClipper作为{的clipper属性{1}}。在ClipPath的实现中，您可以按照自己的意愿来调整小部件的形状。查看这篇出色的中型帖子（不是我写的，鸣谢于Kinjal Dhamat），她在其中解释了如何使用CustomClipper和塑造所需内容的各种方式：

https://medium.com/flutter-community/flutter-custom-clipper-28c6d380fdd6

如pskink所建议的那样，创建一个自定义CustomClipper类（例如将其设置为ShapeBorder的{{1}}属性），虽然有很多好处，但还需要一些其他知识，例如看看这篇文章：

Flutter - ClipPath

如何在Flutter中制作自定义按钮形状

2 个答案: