自定义控件
使用过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的关系
- Widget:存放渲染内容、视图布局信息,widget的属性最好都是immutable
- Element:存放上下文，通过Element遍历视图树，Element同时持有Widget和RenderObject
- 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
