flutter 自定义控件RenderObjectWidget使用

书弋江山2025-03-25 21:41
CustomWidget的自定义组件的注释还是比较清晰的
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(); // 重新绘制
    }
  }

}