如何在 flutter 中使用自定义剪辑器制作弯曲的应用程序栏

Question

嗨，我是 Flutter 的新手，

我正在尝试制作这个应用栏这是我的最终目标

我试着按照一些教程来制作弯曲的应用栏但是我无法得到我想要的结果

谷歌搜索后我可以做这个简单的曲线
这是我使用的剪辑器代码

class CurvedClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var path = Path();
    path.lineTo(0, size.height - 30);
    path.quadraticBezierTo(
        size.width / 2, size.height, size.width, size.height - 30);
    path.lineTo(size.width, 0);

    path.close();
    return path;
  }

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

这是我的问题有没有办法将 svg 曲线转换为这个曲线剪裁器？

Answer 1

要构建类似的东西 - 您至少需要 2 个四方贝塞尔曲线和一个立方贝塞尔曲线。

我已经举了一个例子来说明如何获得与图片上看起来很像的结果，但它可能需要更多 fine-tuning 才能满足您的需求。

该代码没有提供任何注释，但您只需更改变量并刷新应用程序即可了解思路（您至少需要了解贝塞尔曲线工作原理的基本知识）。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.blue,
          shape: CustomShapeBorder(),
          leading: Icon(Icons.menu),
          actions: <Widget>[
            IconButton(icon: Icon(Icons.notifications),onPressed: (){},)
          ],
        ),
        body: Container(),
      ),
    );
  }
}

class CustomShapeBorder extends ContinuousRectangleBorder {
  @override
  Path getOuterPath(Rect rect, {TextDirection textDirection}) {

    final double innerCircleRadius = 150.0;

    Path path = Path();
    path.lineTo(0, rect.height);
    path.quadraticBezierTo(rect.width / 2 - (innerCircleRadius / 2) - 30, rect.height + 15, rect.width / 2 - 75, rect.height + 50);
    path.cubicTo(
        rect.width / 2 - 40, rect.height + innerCircleRadius - 40,
        rect.width / 2 + 40, rect.height + innerCircleRadius - 40,
        rect.width / 2 + 75, rect.height + 50
    );
    path.quadraticBezierTo(rect.width / 2 + (innerCircleRadius / 2) + 30, rect.height + 15, rect.width, rect.height);
    path.lineTo(rect.width, 0.0);
    path.close();

    return path;
  }
}

如何在 flutter 中使用自定义剪辑器制作弯曲的应用程序栏

how to make curved app bar with custom clipper in flutter

flutter

dart

flutter-appbar