CustomSingleChildLayout解决以下几个问题：

• 设置child的大小
• 设置child的位置

用于光标管理

相关类

FocusNode

用于Widget获取键盘焦点和处理键盘事件的对象

1
2
3
4
5
6
7
8
9
10

class FucusNode {

  /// 请求焦点
 void requestFocus([FocusNode? node]) {}

  /// 释放焦点
  /// disposition表示释放后的行为， scope表示向上寻找最近的FocusScopeNode，previouslyFocusedChild表示寻找上一个焦点位置
 void unfocus({    UnfocusDisposition disposition = UnfocusDisposition.scope,  }) {}

}

FocusScopeNode

FocusScopeNode继承自FocusNode

Widget

Flutter中的一切都是Widget。关于Flutter的UI绘制原理可以参考纷争再起：Flutter-UI绘制解析。

简要概括就是，我们写各种widget，Flutter框架帮我们解析成element树，最终转换成renderobject树，再通过底层skia绘制。

• Component Widget：组合类Widget，这类Widget都继承StatelessWidget或StatefulWidget；

基本概念

我们的手机屏幕可以当成一块画板（Canvas），使用我们自定义的Painter，就能绘制出各种图形。而Flutter中提供了CustomPaint组件来方便使用自定义动画。

CustomPaint

1
2
3
4
5
6
7
8
9

const CustomPaint({
  super.key,
  this.painter,//CustomPainter对象，如果设置了child，则painter绘制的内容会被覆盖
  this.foregroundPainter,//如果设置了child，该painter的内容会覆盖child
  this.size = Size.zero,//画板大小
  this.isComplex = false,//如果设置为true，会对canvas的绘制进行一些必要的缓存来优化性能
  this.willChange = false,//配合isComplex使用，控制组件是否在下一帧需要重绘
  super.child,
}) 

CustomPainter

CustomPainter是一个抽象类，用于自定义绘制逻辑。需要实现paint和shouldRepaint方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

class XXXPainter extend CustomPainter {


  @override
  void paint(Canvas canvas, Size size) {
  }

  ///返回 true 才会进行重绘，否则就只会绘制一次
  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
  }
}

开发者工具介绍

• Flutter Inspector：检查 Flutter 应用程序的 UI 组件布局和状态
• Performance View：在 Flutter 应用程序中诊断 UI 性能过低的问题
• CPU Profiler View：Flutter 和 Dart 应用的 CPU 性能检测