如何使用clipPath在颤动中绘制这个按钮？

Posted 2023-02-23

【中文标题】如何使用clipPath在颤动中绘制这个按钮？

【英文标题】：how to draw this button in flutter using clipPath?

【发布时间】：2021-03-22 11:43:33

【问题描述】：

早安

请问如何在颤动中绘制像this 这样的按钮？ 搜索后我发现我会使用clipathi多次尝试但我没有这样做所以如何绘制它。

提前致谢

【参考方案1】：

在创建任何CustomClipper 之前，我强烈建议您先将其画在一张纸上并尝试准确了解您想要做什么。

标记近似坐标，就像我在 X 轴上的 0.7 和 Y 轴上的 0.3 一样。

然后试着想想我们应该如何移动剪子，以便我们可以创建以下形状。

步骤：

移至(size.width, 0) 打个电话到(size.width * 0.7, size.height * 0.3) 绘制贝塞尔曲线到(size.width * 0.7, size.height * 0.7)，控制点为(size.width * 0.5, size.height * 0.5) 给(size.width, size.height)打个电话 通过向(size.width, 0) 写一行来关闭我们的路径。

所以，通过上述步骤创建您的CustomClipper：

这是最终结果：

这里是实现：

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() 
  runApp(MyApp());


class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  


class MyWidget extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return Column(
      crossAxisAlignment: CrossAxisAlignment.end,
      children: [
        Placeholder(),
        const SizedBox(height: 20),
        Center(
          child: Text(
            'Heading',
            style: TextStyle(
              fontWeight: FontWeight.bold,
              fontSize: 24,
            ),
          ),
        ),
        Center(
          child: Text(
            'Description',
            style: TextStyle(
              color: Colors.white,
            ),
          ),
        ),
        ClipPath(
          clipper: MyClipper(),
          child: RaisedButton(
            onPressed: () ,
            color: Colors.indigo,
            child: Container(
            width: MediaQuery.of(context).size.width / 2,
            height: 150,
            alignment: Alignment.centerRight,
            padding: const EdgeInsets.only(right: 10),
            child: Text(
              'Next',
              style: TextStyle(fontSize: 18),
            ),
          ),
        ),),
      ],
    );
  


class MyClipper extends CustomClipper<Path> 
  @override
  Path getClip(Size size) 
    var path = new Path();
    path.moveTo(size.width, 0);
    path.lineTo(size.width * 0.7, size.height * 0.3);
    path.quadraticBezierTo(size.width * 0.5, size.height * 0.5, size.width * 0.7,
        size.height * 0.7);
    path.lineTo(size.width, size.height);
    path.lineTo(size.width, 0);
    return path;
  

  @override
  bool shouldReclip(CustomClipper oldClipper) 
    return false;
  

【讨论】：

惊人的答案，我的代码几乎完成了，但是您的示例和解释比我发布的要好得多。

不，不，不 - ClipPath 不是创建自定义凸起按钮的好方法 - 而是使用 shape 属性 - 文档说：“按钮材质的形状。按钮的高亮和飞溅被剪辑到这个形状。如果按钮有一个高度，那么它的阴影也由这个形状定义。默认为当前 ButtonTheme 的值，ButtonThemeData.shape。"跨度>

抱歉，没听懂。你能详细说明一下吗？对于这样的自定义形状，我认为使用ClipPath 是可以的。你能展示如何使用按钮的shape 属性来实现这个自定义形状吗？

另外，问题本身要求使用ClipPath 创建按钮。所以，我想我的解决方案回答了这个问题。评论将不胜感激，但投反对票有点过分。

"你能展示如何使用按钮的 shape 属性来实现这个自定义形状吗？" - 像任何其他现有的 ShapeBorder 类一样 - 参见 CircleBorder 的来源/ ContinuousRectangleBorder / RoundedRectangleBorder - 例如圆形按钮使用shape: CircleBorder()