首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Flutter:如何通知CustomPainter重绘?

在Flutter中,CustomPainter 是一个用于绘制自定义图形的类。如果你想要通知 CustomPainter 重绘,你可以通过调用其宿主 StatefulWidgetsetState 方法来实现。setState 方法会告诉 Flutter 框架状态已经改变,需要重新调用 createState 方法来创建新的 State 对象,并触发 UI 的重绘。

以下是一个简单的例子,展示了如何在 Flutter 中使用 CustomPainter 并通过按钮点击事件来触发重绘:

代码语言:txt
复制
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('CustomPainter Example')),
        body: Center(child: PainterWidget()),
      ),
    );
  }
}

class PainterWidget extends StatefulWidget {
  @override
  _PainterWidgetState createState() => _PainterWidgetState();
}

class _PainterWidgetState extends State<PainterWidget> {
  bool _redraw = false;

  void _changeState() {
    setState(() {
      _redraw = !_redraw;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        CustomPaint(
          painter: MyCustomPainter(_redraw),
          child: Container(), // 这里可以放置一个子控件,如果需要的话
        ),
        ElevatedButton(
          onPressed: _changeState,
          child: Text('Redraw'),
        ),
      ],
    );
  }
}

class MyCustomPainter extends CustomPainter {
  final bool redraw;

  MyCustomPainter(this.redraw);

  @override
  void paint(Canvas canvas, Size size) {
    // 根据 redraw 的值来决定绘制的内容
    if (redraw) {
      // 绘制一些内容
      final paint = Paint()..color = Colors.blue;
      canvas.drawRect(Rect.fromLTWH(0, 0, size.width, size.height), paint);
    } else {
      // 绘制其他内容
      final paint = Paint()..color = Colors.red;
      canvas.drawCircle(Offset(size.width / 2, size.height / 2), size.width / 4, paint);
    }
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true; // 总是请求重绘
  }
}

在这个例子中,我们创建了一个 PainterWidget,它包含一个 CustomPaint 和一个按钮。每次点击按钮时,_changeState 方法会被调用,它会改变 _redraw 的值并通过 setState 触发重绘。

MyCustomPainter 类接收一个布尔值 redraw,根据这个值来决定绘制不同的图形。shouldRepaint 方法返回 true,这意味着每当 CustomPainter 的状态改变时,Flutter 都会调用 paint 方法来重绘。

参考链接:

如果你在使用 CustomPainter 时遇到了具体的问题,比如性能问题或者绘制不正确等,请提供更多的信息,以便进一步分析和解决。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Flutter 绘制探索 1 | CustomPainter 正确刷新姿势 | 七日打卡

通过对源码的分析和研究后,会发现对于 CustomPainter,有一个更高效的刷新方式。本文就来分享一下这个非常重要的知识点。...repaint 是 CustomPainter 的成员,类型为 Listenable 可监听对象,当 repaint 值变化时,会通知画板进行 paint 。...通过 CustomPainter 的注释可以发现,触发最高效的方式都是基于可监听对象 实现的。...触发的最高效方式是: [1]:继承 [CustomPainter] 类,并在构造函数提供一个 'repaint' 参数, 当需要重新绘制时,该对象会进行通知它的监听者。...其实这也很容易理解: 动画 和 滑动 的触发频率非常高,所以才会用特殊的方式进行。 那么画板的必须只是通过 可监听对象 吗?

1.3K21

Flutter 绘制探索 1 | CustomPainter 正确刷新姿势 | 七日打卡

通过对源码的分析和研究后,会发现对于 CustomPainter,有一个更高效的刷新方式。本文就来分享一下这个非常重要的知识点。 ?...repaint 是 CustomPainter 的成员,类型为 Listenable 可监听对象,当 repaint 值变化时,会通知画板进行 paint 。 ?...通过 CustomPainter 的注释可以发现,触发最高效的方式都是基于可监听对象 实现的。 ?...触发的最高效方式是: [1]:继承 [CustomPainter] 类,并在构造函数提供一个 'repaint' 参数, 当需要重新绘制时,该对象会进行通知它的监听者。...其实这也很容易理解: 动画 和 滑动 的触发频率非常高,所以才会用特殊的方式进行。 那么画板的必须只是通过 可监听对象 吗?

1.5K20
  • Flutter性能揭秘之RepaintBoundary

    Flutter会在屏幕上绘制Widget。如果一个Widget的内容需要更新,那就只能了。尽管如此,Flutter同样会重新绘制一些Widget,而这些Widget的内容仍有部分未被改变。...我们将看到如何实现RepaintBoundary的演示程序以及如何在您的flutter应用程序中使用它。 RepaintBoundary RepaintBoundary类是Null安全的。...而有时,当一个RenderObject应该被时,类似层中的其他RenderObjects不应该被,因为它们的绘制产物保持不变。...通过这种方式,只对内容发生变化的子树进行是可行的。利用RepaintBoundary可以进一步提高应用程序的执行效率,特别是当不应该被的子树需要大量的工作来时。...有了这个简单的改变,现在当Flutter光标时,背景就不需要了。应用程序应该不再是滞后的了。 整个代码如下所示。

    70020

    Flutter 绘制探索 3 | 深入分析 CustomPainter 类 | 七日打卡

    Flutter 绘制探索 1 | CustomPainter 正确刷新姿势 Flutter 绘制探索 2 | 全面分析 CustomPainter 相关类 ---- 2.前情回顾 希望在观看此篇前,你已经看过前面文章的铺垫...至于 Flutter 框架层如何启动,初始化各个 Binding ,如何添加 _handlePersistentFrameCallback 回调的,本文就不详述了,着重在绘制的点。...还有别的情况可能引起绘制对象,比如父级渲染对象的刷新、_painter 基于监听器的刷新,这些是 shouldRepaint 无法控制的。...我们需要根据情况进一步处理,至于怎么处理,在上面我们讲到过 RenderObject 中有一个属性可以控制,它就是 isRepaintBoundary。...在下一篇我们将进一步去探索 Flutter 绘制的奥秘,在什么情况下会触发 shouldRepaint 无法控制的刷新,我们又该如何去控制。

    1.9K10

    Flutter 绘制探索 5 | 深入分析范围 RepaintBoundary | 七日打卡

    Flutter 绘制探索 1 | CustomPainter 正确刷新姿势 Flutter 绘制探索 2 | 全面分析 CustomPainter 相关类 Flutter 绘制探索 3 | 深入分析...CustomPainterFlutter 绘制探索 4 | 深入分析 setState 重建和更新 ---- 2. shouldRepaint 无法控制的 前面说过,由于 shouldRepaint...经过测试,发现仍存在一些莫名的 paint 被的场景。本文就来深入探究一下这些情况,已及对应的解决方案。 ---- 一、滑动中的莫名 1....我们回想一下 Flutter 绘制探索 3 | 深入分析 CustomPainter 类 中,一个 RenderObject 对象被收录到待列表中的情景。...同样解决方案是在绘制的组件上套一个 RepaintBoundary ,就不会出现现象。目前版本,最新稳定版 Flutter 1.22.5 。 ?

    4.1K31

    组合与自,我该选用何种方式自定义Widget?

    Flutter提供了非常丰富的控件和布局方式,使得我们可以通过组合去构建一个新的视图。...在Flutter中,画布是Canvas,画笔则是Paint,而画成什么样子,则由定义了绘制逻辑的CustomPainter来控制。...canvas.drawArc(boundingRect, radius * 5, radius, true, getColoredPaint(Colors.pink)); } // 判断是否需要...可以看到,使用CustomPainter进行自控件并不算复杂。 在实现视觉需求上,自需要自己亲自处理绘制逻辑,而组合则是通过子Widget的拼接来实现绘制意图。...无论是组合还是自,在自定义UI时,有了目标视图整体印象后,我们首先需要考虑的事情是如何将它化繁为简,把视觉元素拆解细分,变成自己立即可以着手去实现的一个小控件,然后再思考如何将这些小控件串联起来。

    1.8K20

    Flutter 绘制探索 7 | 不使用 CustomPaint 进行绘制 | 七日打卡

    Flutter 绘制探索 1 | CustomPainter 正确刷新姿势 Flutter 绘制探索 2 | 全面分析 CustomPainter 相关类 Flutter 绘制探索 3 | 深入分析...CustomPainterFlutter 绘制探索 4 | 深入分析 setState 重建和更新 Flutter 绘制探索 5 | 深入分析范围 RepaintBoundary...本文会介绍几个非 CustomPainter 绘制的组件,看看源码中是如何使用 RenderObject 的。...下面对七篇做一个特写: Flutter 绘制探索 1 | CustomPainter 正确刷新姿势 Flutter 绘制探索 2 | 全面分析 CustomPainter 相关类 Flutter...绘制探索 3 | 深入分析 CustomPainterFlutter 绘制探索 4 | 深入分析 setState 重建和更新 Flutter 绘制探索 5 | 深入分析范围 RepaintBoundary

    1.2K20

    和回流(Repaint & Reflow),如何优化

    由于节点的几何属性发生改变或者由于样式改变而不影响布局的,称为重,例如outline,visibility,color,background-color等,的代价是高昂的,因为浏览器必须验证DOM...回流一定会发生不一定会引发回流 4.浏览器优化 现代浏览器大多都通过队列机制来批量更新布局,浏览器会把修改操作放在队列中,至少一个浏览器刷新(16.6ms)才清空队列,但当你获取布局信息时,队列中可能存在影响这写属性和方法返回值的操作...5.减少与回流 1.css ....减少与回流   1.CSS 使用 transform 替代 top 使用 visibility 替换 display: none ,因为前者只会引起重,后者会引发回流(改变了布局) 避免使用...避免频繁读取会引发回流/的属性,如果确实需要多次使用,就用一个变量缓存起来。 对具有复杂动画的元素使用绝对定位,使它脱离文档流,否则会引起父元素及后续元素频繁回流。

    76710

    Flutter 绘制探索 2 | 全面分析 CustomPainter 相关类 | 七日打卡

    系列引言 可能说起 Flutter 绘制,大家第一反应就是用 CustomPaint 组件,自定义 CustomPainter 对象来画。...Flutter 绘制探索 1 | CustomPainter 正确刷新姿势 ---- 2.本文测试案例 Flutter 框架中的三位主角团 Element、RenderObject、Widget 是最顶层的抽象...CustomPainter 在这三位的光环下,又扮演这什么样的角色呢?本文将通过一个精简的绘制案例,来稍稍揭开一点 Flutter 框架运转的秘密。...在 RenderCustomPaint#attach 方法中 _painter 会添加监听执行 markNeedsPaint 方法,从而触发。...在该类中会对 CustomPainter 中的可监听对象进行监听,触发 RenderCustomPaint 对象的,另外 CustomPainter 的绘制操作也是在该类中进行回调的,这里也是 CustomPainter

    90520

    Flutter》-- 6.高级组件

    bool addRepaintBoundaries = true,//是否将列表项包裹在RepaintBoundary组件中,默认值为true,可以避免列表项的,提高渲染的性能。...6.5.2 自组件 在Flutter中创建自组件需要用到CustomPaint和CustomPainter两个类:CustomPaint在绘制阶段提供一个Canvas,即画布;CustomPainter...oldDelegate) { return true;//是否需要执行 } } 示例效果: 创建Flutter组件时,可以做以下两点性能优化: 1)尽可能利用好shouldRepaint...反之则返回false不执行; 2)绘制应尽可能多地进行分层 因为复杂的自组件都是由很多功能构成的,如果都写在一个方法中,不利于阅读,而且全部带来的性能开销也很大。...无论是创建组合组件还是创建自组件,首先需要考虑如何将复杂的布局简化,把大问题拆分成若干小问题。

    10.6K20

    Flutter实战 | 从 0 搭建「网易云音乐」APP(六、歌词(一))

    画歌词 自定义组件,我们都知道是使用的 CustomPainter如何画文字?...但是我们这个时候会发现还是不会跟着时间来变化,因为我们没有通知。 不用着急,在下一步会说到。 3. 跟随当前时间滚动 跟随当前时间滚动,说白了就是: 当前的歌词始终要在中间展示。...这里有一个细节我们要注意: 我们必须要重写 shouldRepaint 方法来通知,否则组件是不会自己重新绘制的。...该参数就是为了我们用的: @override bool shouldRepaint(LyricWidget oldDelegate) { return oldDelegate....= _offsetY; } 判断两次的 _offsetY 是否一致就好了,如果不一致,就。 回到开始的问题,如何让当前歌词始终在中间展示?

    2.5K10

    如何快速提升 Flutter App 中的动画性能

    观前提醒:本文假设你已经有一定的 Flutter 开发经验,对Flutter 的 Widget,RenderObject 等概念有所了解,并且知道如何开启 DevTools。...三、用 CustomPaint 实现 Flutter 提供了一个Widget 叫 CustomPaint,它只需要我们实现一个 CustomPainter 自己往 Canvas 绘制内容。...Flutter 提供了一个 RepaintBoundary 用于限制区域,专门用来解决此问题。....), ), ); } 效果立杆见影,彩虹图如下图所示,只了动画的区域: ? 相对应的,Paint 阶段耗时也很明显的降低: ?...结语 恭喜你,又离资深 Flutter 开发更近了一步。通过本文,你应该学会了如何Flutter 动画动得更有效率。关注公众号 逆锋起笔,回复 pdf,下载你需要的各种学习资料。

    1.5K20

    【面试系列一】如何回答如何理解重排和

    最近在面试的时候经常会问:如何理解重排和? 我发现很多候选人都没有答道关键点上,感觉是在哪里看到过相关的文章,听起来零零散散,毫无逻辑。...错误示范 一般的面试过程就是这样的: 面试官:如何理解重排和? 候选人:重排就是当页面的结构发生变化了,就会重排,比如改变变字体的大小,增删 DOM 元素这样的。...就是页面结构没有变化,只是外观变了,比如改了一下字体颜色、背景颜色这样的。就只会发生。 “当然他说的也没错,我也不能直接说他错,就继续引导” 面试官:那重排和有什么关系吗?...候选人:重排一定会导致不一定会导致重排。 面试官:为什么呢? 候选人:因为重排结构发生变化了嘛,肯定会导致。...之后,只有受影响的屏幕区域会被,浏览器被优化为只需要绘制的最小区域。 绘制时间取决于何种类型的更新被附加在渲染树上。

    1.4K71

    一位Android程序员入坑Flutter后整理出一份超详细的学习笔记

    context) { ...invoke _updateText } } 实际上是因为StatefulWidgets通过调用State的setState方法来触发整个Widgets树的...,并且在之前会调用传进去的(){ ... }block。...因为在Flutter看来吗,Widgets的树结构是不可以被更改的,但是如果想更改,则是通过StatefulWidgets的方法,通过setState来更改Data,触发Widgets,从而替换掉之前的...Flutter同样支持,CustomPaint作为一个 Widgets就支持传入一个实现CustomPainter抽象类的参数,而CustomPainter的抽象方法也类似于Android View的onDraw...void paint(Canvas canvas, Size size) bool shouldRepaint(CustomPainter oldDelegate) 如何自定义View 不用继承,而使用类似

    2.5K00

    Flutter 像素编辑器#02 | 配置编辑

    本系列,将通过 Flutter 实现一个全平台的像素编辑器应用。...源码见开源项目 【pix_editor】 《Flutter 像素编辑器#01 | 像素网格》 上一篇完成了 Flutter 像素编辑器的点击交互,绘制像素。...如下所示,是 Flutter 像素编辑器的第二版: 1. Flutter 像素编辑器布局结构 在桌面端中,第二版将应用划分为五个区域: 顶部菜单栏 MenuToolBar :放置菜单以及操作按钮。...这里拿是否展示网格的这条功能需求,介绍一下如何处理: 目前功能并不是很复杂,使用 Flutter 内置的 InheritedNotifier 来共享 ProjectConfigLogic 即可。...; } 此时剩下最后一件事,如何在两个业务逻辑对象更新时,通知画板进行重新绘制呢? CustomPainter 可以指定 repaint 参数,监听可监听对象,当其进行通知时,会触发画板的

    21910

    Flutter 组件集录】CupertinoActivityIndicator| 8月更文挑战

    在很久以前,对于那时还只会 setState 触发画板,我一直对这种方式有疑问,因为 setState 更新画板会让画板对象重新创建,这对于绘制动画来说是很不友好的,因为触发的频率非常高。...直到我看懂 CupertinoActivityIndicator 的源码,才对画板有了全新的认知。这也为 《Flutter 绘制指南 - 妙笔生花》扫清了最后障碍。...画板可以通过一个 Listenable 对象触发,而不会触发任何组件的构建。至于其更深层的实现原理,在 《Flutter 绘制探索》专栏中有详细的源码分析。...也能有人会非常疑惑,明明 BoxPainter 不需要,为什么会一直绘制, CupertinoActivityIndicator 太垃圾了。...在同一片渲染区域内的一个节点,会连带这片区域的所有渲染节点

    98330
    领券