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

}
相关推荐
大土豆的bug记录3 小时前
鸿蒙进行视频上传,使用 request.uploadFile方法
开发语言·前端·华为·arkts·鸿蒙·arkui
maybe02093 小时前
前端表格数据导出Excel文件方法,列自适应宽度、增加合计、自定义文件名称
前端·javascript·excel·js·大前端
HBR666_3 小时前
菜单(路由)权限&按钮权限&路由进度条
前端·vue
A-Kamen4 小时前
深入理解 HTML5 Web Workers:提升网页性能的关键技术解析
前端·html·html5
锋小张6 小时前
a-date-picker 格式化日期格式 YYYY-MM-DD HH:mm:ss
前端·javascript·vue.js
鱼樱前端6 小时前
前端模块化开发标准全面解析--ESM获得绝杀
前端·javascript
yanlele6 小时前
前端面试第 75 期 - 前端质量问题专题(11 道题)
前端·javascript·面试
就是有点傻7 小时前
C#中Interlocked.Exchange的作用
java·javascript·c#
前端小白۞7 小时前
el-date-picker时间范围 编辑回显后不能修改问题
前端·vue.js·elementui
拉不动的猪7 小时前
刷刷题44(uniapp-中级)
前端·javascript·面试