flutter 自定义控件RenderObjectWidget使用

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(); // 重新绘制
    }
  }

}
相关推荐
Rockson几秒前
使用Ruby接入实时行情API教程
javascript·python
祝余呀12 分钟前
HTML初学者第三天
前端·html
就爱瞎逛28 分钟前
TailWind CSS Intellisense 插件在VSCode 上不生效
前端·css·vscode·tailwind
柚子81631 分钟前
sibling-index:我用这个画时钟表盘
前端·css
UI设计和前端开发从业者1 小时前
UI前端大数据处理策略优化:基于云计算的数据存储与计算
前端·ui·云计算
前端小巷子1 小时前
Web开发中的文件上传
前端·javascript·面试
翻滚吧键盘2 小时前
{{ }}和v-on:click
前端·vue.js
上单带刀不带妹2 小时前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
前端风云志2 小时前
typescript结构化类型应用两例
javascript
杨进军2 小时前
React 创建根节点 createRoot
前端·react.js·前端框架