一統天下 flutter - widget 自定義: 通過 CustomPaint 實現自定義組件

源碼 https://github.com/webabcd/flutter_demo
作者 webabcd

一統天下 flutter - widget 自定義: 通過 CustomPaint 實現自定義組件

示例如下:

lib\widget\custom\custom_paint.dart

/*
 * 通過 CustomPaint 實現自定義組件
 *
 * CustomPaint 繼承自 SingleChildRenderObjectWidget
 * 關於 SingleChildRenderObjectWidget 的說明請參見 single_child_render_object_widget.dart
 *
 * CustomPaint 通過 CustomPainter 實現自定義的繪製邏輯，關於 CustomPainter 的說明請參見 /lib/widget/shape/paint.dart
 */

import 'package:flutter/material.dart';

import '../../helper.dart';

class CustomPaintDemo extends StatefulWidget {
  const CustomPaintDemo({Key? key}) : super(key: key);

  @override
  _CustomPaintDemoState createState() => _CustomPaintDemoState();
}

class _CustomPaintDemoState extends State<CustomPaintDemo> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("title"),),
      backgroundColor: Colors.orange,
      body: const Center(
        /// 使用自定義組件
        child: BorderWidget(
          child: MyText("我是 CustomPaint 的 child"),
          borderWidth: 2,
        ),
      ),
    );
  }
}

/// 繼承 CustomPaint 實現一個自帶邊框效果的自定義組件
/// 先繪製 painter，然後在 painter 的前面渲染 child, 然後在 child 的前面繪製 foregroundPainter
class BorderWidget extends CustomPaint {
  final double borderWidth;
  const BorderWidget({super.key, super.child, required this.borderWidth});

  /// 如果不指定 child 則 CustomPaint 使用 size 作爲自己的尺寸
  /// 如果指定了 child 則 CustomPaint 使用 child 的尺寸作爲自己的尺寸
  @override
  Size get size => Size.zero;

  @override
  CustomPainter? get painter => MyCustomPainter(borderWidth: borderWidth);

  @override
  CustomPainter? get foregroundPainter => null;
}

/// CustomPainter - 自定義繪製邏輯
/// 原點在左上角，右爲 x 軸正方向，下爲 y 軸正方向，順時針爲旋轉正方向
/// 弧度是弧的長度與弧的半徑的比值，所以弧度 π 就是 180 度
class MyCustomPainter extends CustomPainter {
  double borderWidth;
  MyCustomPainter({required this.borderWidth});

  /// 自定義繪製
  ///   canvas - 畫布，所有 canvas 的操作都是調用的 native 方法
  ///   size - 繪製區域（即 CustomPaint 的尺寸，參見上面 CustomPaint 的 size 的說明）
  @override
  void paint(Canvas canvas, Size size) {
    /// 創建一個畫筆
    final paint = Paint()..color = Colors.white..strokeWidth = borderWidth..style = PaintingStyle.stroke;
    /// 通過 Offset & Size 生成一個 Rect
    final rect = Offset.zero & size;
    /// 繪製一個邊框
    canvas.drawRect(rect, paint);
  }

  /// 如果之後 widget 重新 build 了，就會執行到這裏
  /// 一般通過判斷 MyCustomPainter 新舊實例的與 UI 相關的參數是否發生變化來決定是否需要重繪
  @override
  bool shouldRepaint(MyCustomPainter oldDelegate) {
    /// 新舊 MyCustomPainter 實例的 borderWidth 不同時，則重繪
    return borderWidth != oldDelegate.borderWidth;
  }
}

源碼 https://github.com/webabcd/flutter_demo
作者 webabcd