【-Flutter-绘制指南-】那个男人带着小册来了

在Flutter中，绘制一个指南针可以通过自定义CustomPainter来实现。以下是一个简单的指南针绘制示例：

import 'package:flutter/material.dart';
 
class CompassPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.blue
      ..style = PaintingStyle.stroke
      ..strokeWidth = 3;
 
    final center = Offset(size.width / 2, size.height / 2);
    final radius = min(size.width / 2, size.height / 2) - paint.strokeWidth / 2;
 
    // Draw the background
    canvas.drawCircle(center, radius, paint..color = Colors.grey.shade300);
 
    // Draw the border
    canvas.drawCircle(center, radius, paint..color = Colors.black.withOpacity(0.1));
 
    // Draw the arrow
    final theta = 2 * pi / 30 * 6; // 6 degrees for each notch
    final arrowLength = 10.0;
    final arrowPoints = [
      center + polarToCartesian(radius - arrowLength, theta * 15),
      center,
      center + polarToCartesian(radius - arrowLength, theta * 30),
    ];
    canvas.drawLine(center, arrowPoints[0], paint..color = Colors.blue);
    canvas.drawLine(center, arrowPoints[2], paint..color = Colors.blue);
    canvas.drawLine(arrowPoints[0], arrowPoints[1], paint..color = Colors.blue);
    canvas.drawLine(arrowPoints[1], arrowPoints[2], paint..color = Colors.blue);
  }
 
  Offset polarToCartesian(double radius, double theta) {
    return Offset(radius * cos(theta), radius * sin(theta));
  }
 
  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}
 
class CompassPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Compass'),
      ),
      body: Center(
        child: SizedBox.fromSize(
          size: Size(200, 200),
          child: CustomPaint(
            painter: CompassPainter(),
          ),
        ),
      ),
    );
  }
}
 
void main() {
  runApp(MaterialApp(home: CompassPage()));
}

这段代码定义了一个CompassPainter类，它继承自CustomPainter。在paint方法中，我们首先设置了Paint对象的样式、颜色和线宽。然后，我们计算指南针的中心和半径