Flutter 自定义 View 全面指南：从入门到进阶

2023-09-18 09:06:49

深入探索 Flutter 中自定义 View 的奥秘

理解自定义 View 的本质

在 Flutter 的世界里，View 是构建用户界面的基石。对于特定需求，默认提供的 View 可能不够用，这时自定义 View 便闪亮登场。顾名思义，自定义 View 就是扩展现有 View，为其增添或修改功能。通过继承机制，既能复用已有代码，又能根据需要量身定制。

创建自定义 View 的两种途径

继承现有 View： 继承 Container 或 Text 等现有 View 类，在保留其大部分功能的基础上，自由添加或修改行为。
从头开始构建： 跳过继承，从零开始构建自定义 View。这种方法灵活度最高，但需要处理底层实现。

打造一个变色圆形自定义 View

为了加深对自定义 View 的理解，我们动手创建一个自动变色的圆形 View。随着时间的推移，这个 View 会动态改变它的颜色。

步骤指南：

定义自定义 View 类： 新建一个 ColorChangingCircle 类作为自定义 View 的基础。
继承 CustomPainter： 继承 CustomPainter 类，赋予自定义 View 绘制能力。
重写 paint 方法： 在 paint 方法中绘制一个圆形，并设置其颜色。
引入 Tween 动画： 使用 Tween 动画实现圆形颜色的自动变化，在给定时间段内平滑过渡两个颜色值。
在 build 方法中使用自定义 View： 在 build 方法中使用 ColorChangingCircle 自定义 View，设置其大小和位置，并用 Tween 动画更新颜色。

代码示例：

import 'dart:math';

import 'package:flutter/material.dart';

class ColorChangingCircle extends CustomPainter {
  final Tween<Color> colorTween;

  ColorChangingCircle(this.colorTween);

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = colorTween.evaluate(AnimationController(vsync: this))
      ..style = PaintingStyle.fill;

    canvas.drawCircle(Offset(size.width / 2, size.height / 2), size.width / 2, paint);
  }

  @override
  bool shouldRepaint(ColorChangingCircle oldDelegate) => true;
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Tween<Color> _colorTween;

  @override
  void initState() {
    super.initState();

    _controller = AnimationController(vsync: this, duration: Duration(seconds: 3))
      ..repeat();
    _colorTween = ColorTween(begin: Colors.red, end: Colors.blue);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: CustomPaint(
          painter: ColorChangingCircle(_colorTween),
          size: Size(200, 200),
        ),
      ),
    );
  }
}