自定義控件

使用過android自定義view的話，我們知道要實現(xiàn)它，需要3個步驟：測量（measure）、擺放（layout）、繪制（draw）
而flutter的widget也有3個步驟：構(gòu)建（build）、擺放（layout）、繪制（paint）
flutter的layout包含了android中測量和擺放（performResize()：測量，performLayout()：擺放，后續(xù)會額外說明）

android中要自定義一個view需要繼承一個view控件，同理，flutter也是有套路的。flutter需要繼承RenderObjectWidget控件，實現(xiàn)createRenderObject()方法，具體關(guān)系如下：

Widget、Element和RenderObject的關(guān)系

1. Widget:存放渲染內(nèi)容、視圖布局信息,widget的屬性最好都是immutable
2. Element:存放上下文，通過Element遍歷視圖樹，Element同時持有Widget和RenderObject
3. RenderObject:根據(jù)Widget的布局屬性進行l(wèi)ayout，paint Widget傳入的內(nèi)容

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

流程圖

Widget、Element和RenderObject成樹狀向下（子widget）傳遞

這里先只說繪制（paint），后面會研究擺放（layout）過程

RenderObjectWidget關(guān)系圖

六芒星效果圖

概念不多說，開始擼碼：

//flutter導(dǎo)包不太智能，實在不行手動導(dǎo)入下
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 {
  //布局設(shè)置為最大，相當(dāng)于android的match_parent
  @override
  void performLayout() {
    size = constraints.biggest;
  }
}

這里我們用RenderBox，省去測量和擺放過程。RenderBox是RenderObject的子類，多了約束布局和size等
一些初始化的數(shù)據(jù)放在構(gòu)造函數(shù)中,然后我們開始繪制，繪制和android的api是類似的，先來繪制一個坐標(biāo)

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);
    }
    //繪制坐標(biāo)
    _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);
  }
}

看下效果：

坐標(biāo)

注釋掉坐標(biāo)和網(wǎng)格代碼，同樣，然后我們繪制一個六芒星

class RenderCircle extends RenderBox{
  ... //省略重復(fù)內(nèi)容
  @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("六芒星咒符"); //..級聯(lián)操作符

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

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

至此就完成了一個自定義的控件，當(dāng)然了，flutter官方提供了一個封裝好的控件CustomPaint，其實基礎(chǔ)實現(xiàn)和這一樣

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參數(shù)

class CustomView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CustomPaint(
              painter: CirclePainter()
            );
  }
}
class CirclePainter extends CustomPainter{
  //構(gòu)造函數(shù)和初始化參數(shù)
  ...
  @override
  void paint(Canvas canvas, Size size) {
    //已經(jīng)人性化的直接給了canvas
     ...
  }
  //允許重繪，與updateRenderObject配合，這里是個靜態(tài)圖，影響不大
  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

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