Flutter 自定义 Painter 设计 UI答案

【问题标题】：Flutter Custom Painter Design UIFlutter 自定义 Painter 设计 UI
【发布时间】：2021-09-14 18:43:32
【问题描述】：

在过去的两天里，我正在尝试使用 Custom Painter 实现这样的 UI，但我仍然无法实现。有人可以帮我解决这个问题。如何在自定义painter中编写我的paint函数来实现这样的UI？

【问题讨论】：

你需要利用Path()对象来绘制形状来解决这个问题。这并不难，只是计算正确的偏移量以创建图层很耗时。
@eyoeldefare，我一直在使用 Path() 对象，但我不知道如何制作该形状。

标签： flutter user-interface flutter-layout custom-painter

【解决方案1】：

您可以使用形状制作工具，fluttershapemaker

import 'dart:ui' as ui;

child: CustomPaint(
  size: Size(WIDTH,(WIDTH*0.5833333333333334).toDouble()), //You can Replace [WIDTH] with your desired width for Custom Paint and height will be calculated automatically
  painter: RPSCustomPainter(),
),

class RPSCustomPainter extends CustomPainter{
  
  @override
  void paint(Canvas canvas, Size size) {
    
    

  Paint paint_0 = new Paint()
      ..color = Color.fromARGB(255, 33, 150, 243)
      ..style = PaintingStyle.stroke
      ..strokeWidth = 1;
     
         
    Path path_0 = Path();
    path_0.moveTo(size.width*0.2498333,size.height*0.6431429);
    path_0.quadraticBezierTo(size.width*0.3126667,size.height*0.6487857,size.width*0.3318333,size.height*0.6125714);
    path_0.quadraticBezierTo(size.width*0.3334583,size.height*0.5638571,size.width*0.3763333,size.height*0.5537143);
    path_0.quadraticBezierTo(size.width*0.4162083,size.height*0.5637143,size.width*0.4181667,size.height*0.6108571);
    path_0.quadraticBezierTo(size.width*0.4385833,size.height*0.6505714,size.width*0.4998333,size.height*0.6417143);

    canvas.drawPath(path_0, paint_0);
  
    
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
  
}

【讨论】：