CustomWidget的自定义组件的注释还是比较清晰的
参考文档Flutter实战
dart
import 'package:flutter/cupertino.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
/*
* 如果组件不会包含子组件,则我们可以直接继承自 LeafRenderObjectWidget ,它是 RenderObjectWidget
* LeafRenderObjectWidget 适用于 没有子 Widget 的 RenderObject(例如 Container)。
* */
class CustomWidget extends LeafRenderObjectWidget{
//创建RenderObjec,返回 RenderObject
@override
RenderObject createRenderObject(BuildContext context) {
// TODO: implement createRenderObject
return RenderCustomObject();
}
//更新RenderObj
@override
void updateRenderObject(BuildContext context, covariant RenderObject renderObject) {
// TODO: implement updateRenderObject
super.updateRenderObject(context, renderObject);
}
@override
LeafRenderObjectElement createElement() {
// TODO: implement createElement
return super.createElement();
}
}
//RenderBox 是 Flutter 最常见的渲染对象,用于 布局 和 绘制
//画个红色的盒子
class RenderCustomObject extends RenderBox{
Color color = Colors.red;
//实现布局逻辑
@override
void performLayout() {
// TODO: implement performLayout
size = const Size(100, 100);
}
//实现绘制,绘制内容
@override
void paint(PaintingContext context, Offset offset) {
// TODO: implement paint
final paint = Paint()..color = color;
context.canvas.drawRect(offset & size, paint);
}
//允许点击事件命中当前控件,拦截响应链上的响应
@override
bool hitTestSelf(Offset position) {
// TODO: implement hitTestSelf
return true;
}
//处理点击事件,监听点击事件,改变颜色,并调用 markNeedsPaint() 触发重绘
@override
void handleEvent(PointerEvent event, HitTestEntry entry) {
if (event is PointerDownEvent) {
color = color == Colors.blue ? Colors.green : Colors.blue;
markNeedsPaint(); // 重新绘制
}
}
}