时间戳

首页 > 解决方案 > 颤振漆之字形

flutter - 颤振漆之字形

问题描述

帮助我绘制 zigZag 线/边框，如底部图像所示。我在颤振文档https://api.flutter.dev/flutter/painting/paintZigZag.html中找到了一个之字形绘制功能，但不知道如何使用它。在此处输入图像描述

标签： flutterflutter-layout

解决方案

您需要使用CustomPaint()小部件。

创建您自己的 CustomerPainter，例如 MyPainter，并将其放置在您的小部件树中：

CustomPaint(
    size: MediaQuery.of(context).size,
    painter: MyPainter(),
),

MyPainter 类应该扩展CustomPainter并且还应该覆盖您指定要在画布上绘制的路径的 paint() 方法。

所以你可以把上面的“paintZigZag”代码放在那里，或者像下面这样调用它以及适当的参数。

import 'package:flutter/material.dart';
import 'dart:math' as math;

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint();
    paint.color = Colors.blue;
    paint.style = PaintingStyle.fill; 

    paintZigZag(canvas, paint, Offset(0, 100), Offset(200, 100), 100, 5);
  }

  void paintZigZag(Canvas canvas, Paint paint, Offset start, Offset end,
      int zigs, double width) {
    assert(zigs.isFinite);
    assert(zigs > 0);
    canvas.save();
    canvas.translate(start.dx, start.dy);
    end = end - start;
    canvas.rotate(math.atan2(end.dy, end.dx));
    final double length = end.distance;
    final double spacing = length / (zigs * 2.0);
    final Path path = Path()..moveTo(0.0, 0.0);
    for (int index = 0; index < zigs; index += 1) {
      final double x = (index * 2.0 + 1.0) * spacing;
      final double y = width * ((index % 2.0) * 2.0 - 1.0);
      path.lineTo(x, y);
    }
    path.lineTo(length, 0.0);
    canvas.drawPath(path, paint);
    canvas.restore();
  }

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

推荐阅读