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

}
相关推荐
C澒3 小时前
微前端容器标准化:容器标准化能力的 “配置化+ 插件化”
前端·架构
TU不秃头6 小时前
JS逆向实战五:某海关公示平台分析(瑞数加密)
javascript·爬虫
anOnion8 小时前
构建无障碍组件之Carousel Pattern
前端·html·交互设计
ssshooter9 小时前
Tauri 2 iOS 开发避坑指南:文件保存、Dialog 和 Documents 目录的那些坑
前端·后端·ios
Можно9 小时前
深入理解 ES6 Proxy:与 Object.defineProperty 的全面对比
前端·javascript·vue.js
Birdy_x10 小时前
接口自动化项目实战(1):requests请求封装
开发语言·前端·python
天天向上102411 小时前
vue el-table实现拖拽排序
前端·javascript·vue.js
西西学代码11 小时前
Flutter---回调函数
开发语言·javascript·flutter
卷帘依旧12 小时前
JavaScript 闭包经典问题:为什么输出 10 次 i=10
javascript
圣光SG12 小时前
Vue.js 从入门到精通:技术成长之路
flutter