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

Posted 2023-02-23

【中文标题】如何在颤动中制作自定义按钮形状

【英文标题】：How to make a custom button shape in flutter

【发布时间】：2021-02-08 13:18:12

【问题描述】：

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

我怎样才能轻松做出这个形状。

【参考方案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;
  

结果：

【参考方案2】：

要么使用代表此按钮的图像并用GestureDetector 包裹它（不推荐，但有时 UI 太复杂以至于纯粹在 Flutter 中制作它可能会过大，所以记住这个选项也不错）或玩CustomClipper!

您要做的是创建一个Container 或FlatButton 并用ClipPath 包装它，您提供一个CustomClipper 作为clipper 的ClipPath 属性。在CustomClipper 的实现中，您可以按照自己的意愿塑造小部件。查看这篇很棒的 Medium 帖子（不是我写的，感谢 Kinjal Dhamat），她解释了如何使用 CustomClipper 并塑造你想要的一切的各种方式：

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

根据 pskink 的建议，创建一个自定义的 ShapeBorder 类，例如将其设置为 FlatButton 的 shape 属性，有相当多的好处，但需要一些额外的知识，看看这个帖子：

Flutter - ClipPath

【讨论】：

FlatButton 具有 shape 属性 - 无需自定义剪辑

据我所知，如果你想使用FlatButton 的shape 属性，你必须提供一个ShapeBorder 实例，因为这是一个自定义形状，你必须扩展 ShapeBorder 并自己实现功能，ShapeBorder 有很多功能要实现 - 采用 CustomClipper / CustomPainter 方式似乎更容易

在这两种情况下，您都需要Path - 从getOuterPath 返回 - 仅此而已

是的，在这两种情况下我们都需要Path，但正如我之前写的，您仍然需要在ShapeBorder 中实现其他功能，例如，它们比CustomClipper 中的功能要多得多。但最后两者都工作得很好:)

“您仍然需要在 ShapeBorder 中实现其他功能，这些功能比在 CustomClipper 中要多得多。” - 我不知道您使用的是什么 IDE，但两者都是 android studio并且 vs 代码只需单击鼠标即可完成 - shape 属性由于某种原因存在于每个按钮中 - 如果你想要一个圆形按钮，你真的会添加 CustomClipper 小部件还是简单地添加 shape: CircleBorder()？ shape 属性也支持形状变形 - 尝试例如 CircleBorder 并在调用 setState 后将其更改为 RoundedRectangleBorder，您将看到“神奇”的形状变形