flutter - 如何像本例中那样在 flutter 中转换矩形？

Question

我是 Flutter 和 Dart 的初学者，正在设计一个自定义导航栏。我想知道的是如何使用 flutter 将矩形转换成这种形状？

非常感谢任何有关自定义绘制小部件的帮助或教程!

Answer 1

ClipPath 可以成为您的解决方案，您可以像这样创建自定义剪辑器:

class MyClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path myPath = Path();
    myPath.lineTo(0.0, size.height);

    myPath.quadraticBezierTo(
        size.width / 4,
        size.height / 1.2,
        size.width / 2,
        size.height / 1.2
    );
    myPath.quadraticBezierTo(
        size.width - (size.width / 4),
        size.height / 1.2,
        size.width,
        size.height);
    myPath.lineTo(size.width, 0.0);
    return myPath;
  }

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

我在下面发布了我的全部代码，您可以使用它并转换为您需要的:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          child: Center(
              child: ClipPath(
            clipper: MyClipper(),
            child: Container(
              height: 200,
              width: 300,
              color: Colors.black26,
            ),
          )),
        ),
      ),
    );
  }
}

class MyClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path myPath = Path();
    myPath.lineTo(0.0, size.height);

    myPath.quadraticBezierTo(
        size.width / 4,
        size.height / 1.2,
        size.width / 2,
        size.height / 1.2
    );
    myPath.quadraticBezierTo(
        size.width - (size.width / 4),
        size.height / 1.2,
        size.width,
        size.height);
    myPath.lineTo(size.width, 0.0);
    return myPath;
  }

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