Flutter笔记-自定义控件

自定义控件

使用过android自定义view的话，我们知道要实现它，需要3个步骤：测量（measure）、摆放（layout）、绘制（draw）
而flutter的widget也有3个步骤：构建（build）、摆放（layout）、绘制（paint）
flutter的layout包含了android中测量和摆放（performResize()：测量，performLayout()：摆放，后续会额外说明）

android中要自定义一个view需要继承一个view控件，同理，flutter也是有套路的。flutter需要继承RenderObjectWidget控件，实现createRenderObject()方法，具体关系如下：

Widget、Element和RenderObject的关系

1. Widget:存放渲染内容、视图布局信息,widget的属性最好都是immutable
2. Element:存放上下文，通过Element遍历视图树，Element同时持有Widget和RenderObject
3. RenderObject:根据Widget的布局属性进行layout，paint Widget传入的内容

Widget (createElement())-> Element (createRenderObject())-> RenderObject

流程图

Widget、Element和RenderObject成树状向下（子widget）传递

---

这里先只说绘制（paint），后面会研究摆放（layout）过程

RenderObjectWidget关系图

RenderObjectWidget的子类比较多，这里我们只考虑绘制，所以我们使用一个最常用的SingleChildRenderObjectWidget,从命名就可以知道控件内部最多只有一个孩子，当然我们只需要绘制，内部不需要孩子
OK,我们来绘制一个六芒星，看下效果图

六芒星效果图

概念不多说，开始撸码：

//flutter导包不太智能，实在不行手动导入下
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
class CircleView extends SingleChildRenderObjectWidget{
  @override
  RenderObject createRenderObject(BuildContext context) {
    return RenderCircle();
  }
}
class RenderCircle extends RenderBox {
  //布局设置为最大，相当于android的match_parent
  @override
  void performLayout() {
    size = constraints.biggest;
  }
}

这里我们用RenderBox，省去测量和摆放过程。RenderBox是RenderObject的子类，多了约束布局和size等
一些初始化的数据放在构造函数中,然后我们开始绘制，绘制和android的api是类似的，先来绘制一个坐标

class RenderCircle extends RenderBox{
  Paint _paint;
  Path _path;
  
  RenderCircle(){
    _paint = Paint();
    _paint.isAntiAlias = true;
    _paint.style = PaintingStyle.fill;
    _path = Path();
  }

  @override
  void performLayout() {
    size = constraints.biggest;
  }

  @override
  void paint(PaintingContext context, Offset offset) {
    var canvas = context.canvas;
    //平移画布移至屏幕中心点
    canvas.translate(size.width/2, size.height/2);
    //绘制表格
    double width = 160;
      for(double i = -width; i<= width; i+=10){
      _paint.strokeWidth = 1;
      _paint.color = Colors.grey;
      canvas.drawLine(Offset(width, i), Offset(-width, i), _paint);
      canvas.drawLine(Offset(i, -width), Offset(i, width), _paint);
    }
    //绘制坐标
    _paint.strokeWidth = 2;
    _paint.color = Colors.black;
    canvas.drawLine(Offset(width, 0), Offset(-width, 0), _paint);
    canvas.drawLine(Offset(0, -width), Offset(0, width), _paint);
  }
}

看下效果：

坐标

注释掉坐标和网格代码，同样，然后我们绘制一个六芒星

class RenderCircle extends RenderBox{
  ... //省略重复内容
  @override
  void paint(PaintingContext context, Offset offset) {
    ...
    //绘制外圈
    _paint.strokeWidth = 1.5;
    _paint.color = Colors.blueAccent;
    _paint.style = PaintingStyle.stroke;
    canvas.drawCircle(Offset(0, 0), 100, _paint);
    canvas.drawCircle(Offset(0, 0), 120, _paint);

    //绘制六芒星
    _paint.color = Colors.redAccent;
    _path.moveTo(0, -100);
    _path.lineTo(0.85*100, 0.5*100);
    _path.lineTo(-0.85*100, 0.5*100);
    _path.lineTo(0, -100);
    _path.moveTo(0, 100);
    _path.lineTo(0.85*100, -0.5*100);
    _path.lineTo(-0.85*100, -0.5*100);
    _path.lineTo(0, 100);
    canvas.drawPath(_path, _paint);
  }
}

然后我们在中心绘制文字，和android有些不同，并没有drawText这个api

import 'dart:ui' as ui; //这里用as取个别名，有库名冲突
class RenderCircle extends RenderBox{
  ...

  RenderCircle(){
    ...
    ui.ParagraphBuilder paragraphBuilder = ui.ParagraphBuilder(
      ui.ParagraphStyle(
        textAlign: TextAlign.center,
        fontSize: textFontSize,
        textDirection: TextDirection.ltr,
        maxLines: 1,
      ),
    )..pushStyle(
        ui.TextStyle(
            color: Colors.black87, textBaseline: ui.TextBaseline.alphabetic),
      )
      ..addText("六芒星咒符"); //..级联操作符

    paragraph = paragraphBuilder.build()
      ..layout(ui.ParagraphConstraints(width: textWidth));
  }

  @override
  void paint(PaintingContext context, Offset offset) {
    ...
    //绘制文字
    canvas.drawParagraph(paragraph, Offset(-textWidth/2,-textFontSize/2));
  }
}

至此就完成了一个自定义的控件，当然了，flutter官方提供了一个封装好的控件CustomPaint，其实基础实现和这一样

class CustomPaint extends SingleChildRenderObjectWidget {
  const CustomPaint({
    Key key,
    this.painter,
    this.foregroundPainter,
    this.size = Size.zero,
    this.isComplex = false,
    this.willChange = false,
    Widget child,
  }) : assert(size != null),
       assert(isComplex != null),
       assert(willChange != null),
       super(key: key, child: child);

 
  final CustomPainter painter;
  final CustomPainter foregroundPainter;
  final Size size;
  final bool isComplex;
  final bool willChange;

  @override
  RenderCustomPaint createRenderObject(BuildContext context) {
    return RenderCustomPaint(
      painter: painter,
      foregroundPainter: foregroundPainter,
      preferredSize: size,
      isComplex: isComplex,
      willChange: willChange,
    );
  }

  @override
  void updateRenderObject(BuildContext context, RenderCustomPaint renderObject) {
    renderObject
      ..painter = painter
      ..foregroundPainter = foregroundPainter
      ..preferredSize = size
      ..isComplex = isComplex
      ..willChange = willChange;
  }

  @override
  void didUnmountRenderObject(RenderCustomPaint renderObject) {
    renderObject
      ..painter = null
      ..foregroundPainter = null;
  }
}

代码更精简些，传递一个painter参数

class CustomView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CustomPaint(
              painter: CirclePainter()
            );
  }
}
class CirclePainter extends CustomPainter{
  //构造函数和初始化参数
  ...
  @override
  void paint(Canvas canvas, Size size) {
    //已经人性化的直接给了canvas
     ...
  }
  //允许重绘，与updateRenderObject配合，这里是个静态图，影响不大
  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

---

代码在github中
github：https://github.com/leaf-fade/flutterDemo/tree/master/lib/custom/widget