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

Question

嗨，我是新来的颤振，

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

我尝试按照一些教程制作弯曲的应用栏，但我无法获得我想要的相同结果

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

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