Flutter

Question

我想在设计中剪掉这条路径：

但代码是这样工作的：

return Scaffold(
      body: Center(
        child: Container(
          child: CustomPaint(
            painter: CurvePainter(),
            child: Container(
              child: Center(child: Text("TEST")),
            ),
          ),
        ),
      ),
    );
  }
}

class CurvePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = new Paint()..color = AppColors.colorPrimary;
    // create a path

    Path path = Path();
    path.lineTo(0, size.height * 0.75);
    path.quadraticBezierTo(size.height, size.height * 0.75, size.width, size.width * 0.30);
    path.lineTo(size.width, 0);
    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

我从网上看到的源代码复制代码时遇到了同样的问题。

我该如何解决这个问题？

谢谢。

Answer 1

尝试放入具有反向属性的 ListView。

Answer 2

您可以复制粘贴运行下面的完整代码
对于屏幕，起点（0,0）是屏幕的左上角
您可以先移动到 path.moveTo(0, size.height); 并开始绘图
可以参考https://medium.com/flutter-community/paths-in-flutter-a-visual-guide-6c906464dcd0

代码片段

class CurvePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = new Paint()..color = Colors.pink;
    // create a path

    Path path = Path();
    path.moveTo(0, size.height);
    path.lineTo(0, size.height * 0.6);
    /*path.quadraticBezierTo(
        size.height, size.height * 0.10, size.width, size.width * 0.5);*/
    path.quadraticBezierTo(
        size.width / 3, size.height * 0.45, size.width, size.height * 0.45);
    path.lineTo(size.width, size.height);
    canvas.drawPath(path, paint);
  }

工作演示

完整代码

import 'package:flutter/material.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(MyApp());
}

class CurvePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = new Paint()..color = Colors.pink;
    // create a path

    Path path = Path();
    path.moveTo(0, size.height);
    path.lineTo(0, size.height * 0.6);
    /*path.quadraticBezierTo(
        size.height, size.height * 0.10, size.width, size.width * 0.5);*/
    path.quadraticBezierTo(
        size.width / 3, size.height * 0.45, size.width, size.height * 0.45);
    path.lineTo(size.width, size.height);
    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          child: CustomPaint(
            painter: CurvePainter(),
            child: Container(
              child: Center(
                  child: Padding(
                padding: const EdgeInsets.only(top: 120.0),
                child: Text("TEST"),
              )),
            ),
          ),
        ),
      ),
    );
  }
}

Flutter - 我绘制的剪切路径看起来是相反的

Flutter - Clipping Path I draw looks reverse

curve

clipping

path