Flutter drawArc 没有中心点

Question

在颤振文档中，它的状态，

如果 useCenter 为真，则圆弧闭合回到中心，形成一个圆扇形。否则，圆弧不闭合，形成一个圆弧段。

我不想使用其中任何一个，我只想绘制曲线的外周长（路径）。为了更好地解释它，我想要实现的是根据右侧的图像。

我知道我可以做一个填充，但我想要一个透明的中心。我可以使用另一种技术吗？

Answer 1

使用，Path.arcTo或者更简单地说，Canvas.arcTo使用stroke样式Paint

import 'dart:math';

import 'package:flutter/material.dart';

class _ArcPainter extends CustomPainter {
  _ArcPainter();

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

  @override
  void paint(Canvas canvas, Size size) {
    Rect rect = Rect.fromLTWH(0.0, 0.0, size.width, size.height);

    Path path = Path()..arcTo(rect, 0.0, -pi / 2, true);
    canvas.drawPath(
        path,
        Paint()
          ..color = Colors.orange
          ..strokeWidth = 3.0
          ..style = PaintingStyle.stroke);

    canvas.drawArc(
        rect,
        0.0,
        pi / 2,
        false,
        Paint()
          ..color = Colors.teal
          ..strokeWidth = 3.0
          ..style = PaintingStyle.stroke);
  }
}

class ArcWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new SizedBox(
      width: 250.0,
      height: 250.0,
      child: new CustomPaint(
        painter: new _ArcPainter(),
      ),
    );
  }
}

class SegmentDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(title: const Text('Arcs etc')),
      body: ArcWidget(),
    );
  }
}

void main() {
  runApp(
    MaterialApp(
      home: SegmentDemo(),
    ),
  );
}