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

}
相关推荐
GISer_Jing2 小时前
前端面试通关:Cesium+Three+React优化+TypeScript实战+ECharts性能方案
前端·react.js·面试
落霞的思绪3 小时前
CSS复习
前端·css
咖啡の猫5 小时前
Shell脚本-for循环应用案例
前端·chrome
百万蹄蹄向前冲7 小时前
Trae分析Phaser.js游戏《洋葱头捡星星》
前端·游戏开发·trae
笔沫拾光8 小时前
iOS 正式包签名指南
flutter·ios·ios签名
朝阳5818 小时前
在浏览器端使用 xml2js 遇到的报错及解决方法
前端
GIS之路8 小时前
GeoTools 读取影像元数据
前端
ssshooter9 小时前
VSCode 自带的 TS 版本可能跟项目TS 版本不一样
前端·面试·typescript
你的人类朋友9 小时前
【Node.js】什么是Node.js
javascript·后端·node.js
Jerry9 小时前
Jetpack Compose 中的状态
前端