翩翩起舞定制矩形

Posted 2021-03-31

我如何使用 CustomPainter 类在Flutter?

忽略中间的 "Batch "标签。我只是想实现边界线之间有空格的边框形状。

答案

试试这个

你可以在 Github

或者试穿 DartPad

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: ScanPainter(
            size: 200,
            color: Colors.grey,
          ),
        ),
      ),
    );
  }
}

class ScanPainter extends StatelessWidget {
  final double size;
  final Color color;

  ScanPainter({
    @required this.size,
    this.color = Colors.grey,
  }) : assert(size != null);

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: size,
      width: size,
      child: Stack(
        children: [
          Positioned(
            top: 0.0,
            left: 0.0,
            child: _buildRotatedPart(
              0,
              size * .2,
            ),
          ),
          Positioned(
            top: 0.0,
            right: 0.0,
            child: _buildRotatedPart(
              1.5708,
              size * .2,
            ),
          ),
          Positioned(
            bottom: 0.0,
            right: 0.0,
            child: _buildRotatedPart(
              3.14159,
              size * .2,
            ),
          ),
          Positioned(
            bottom: 0.0,
            left: 0.0,
            child: _buildRotatedPart(
              4.71239,
              size * .2,
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildRotatedPart(double radians, double size) {
    return Transform.rotate(
      angle: radians,
      child: CustomPaint(
        painter: ScanCustomPainter(color: this.color),
        size: Size(size, size),
      ),
    );
  }
}

class ScanCustomPainter extends CustomPainter {
  final Color color;

  ScanCustomPainter({
    @required this.color,
  }) : assert(color != null);

  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()..color = this.color;
    var path = Path();
    double baseHeight = size.height;
    double baseWidth = size.width;

    path.moveTo(0, baseHeight);
    path.lineTo(0, baseHeight * .5);
    path.quadraticBezierTo(0, 0, baseWidth * .5, 0);
    path.lineTo(baseWidth, 0);
    path.lineTo(baseWidth, baseHeight * .3);
    path.lineTo(baseWidth * .6, baseHeight * .3);
    path.quadraticBezierTo(
        baseWidth * .3, baseHeight * .3, baseWidth * .3, baseHeight * .6);
    path.lineTo(baseWidth * .3, baseHeight);

    path.close();

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(ScanCustomPainter oldDelegate) => false;
}