flutter - 如何在 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 个四边形贝塞尔曲线和一个立方体。

我已经举了一个例子来说明如何获得与图像上看起来很像的结果，但它可能需要进行一些微调才能满足您的需求。

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

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;
  }
}