Flutter中Rect.fromLTRB与Rect.fromLTWH的工作原理是什么？

首先明确Flutter Canvas的默认坐标系规则：原点在绘制区域左上角，x轴向右为正方向，y轴向下为正方向，所有坐标值都是基于这个原点计算。

1. Rect.fromLTRB #

构造参数为 Rect.fromLTRB(double left, double top, double right, double bottom)，四个参数都是相对原点的绝对坐标：

• left：矩形左边缘的x轴坐标
• top：矩形上边缘的y轴坐标
• right：矩形右边缘的x轴坐标
• bottom：矩形下边缘的y轴坐标
  渲染逻辑：直接用四个参数对应的四条垂直/水平边界围合生成矩形，矩形的宽度为right - left，高度为bottom - top。
  示例：Rect.fromLTRB(10, 20, 110, 70) 渲染的矩形宽为100、高为50，左上角坐标为(10,20)，右下角坐标为(110,70)。

2. Rect.fromLTWH #

构造参数为 Rect.fromLTWH(double left, double top, double width, double height)，参数含义如下：

• left：矩形左边缘的x轴坐标
• top：矩形上边缘的y轴坐标
• width：矩形的宽度
• height：矩形的高度
  渲染逻辑：首先确定矩形左上角的坐标为(left, top)，随后向右延伸width长度得到右边缘坐标left + width，向下延伸height长度得到下边缘坐标top + height，最终四条边界围合生成矩形。
  示例：Rect.fromLTWH(10, 20, 100, 50) 渲染出的矩形和上面fromLTRB示例的矩形完全一致，没有任何视觉差异。

两者的关系 #

两种构造方法本质是等价的，只是入参形式适配不同的开发场景：

• 当你已经明确矩形四条边的绝对坐标时，使用Rect.fromLTRB更直接
• 当你仅知道矩形左上角位置和尺寸时，使用Rect.fromLTWH更方便
  你可以在CustomPainter中直接测试如下代码验证效果：

class RectDemoPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()..color = Colors.blueAccent;
    // 两种写法绘制的矩形完全重合
    final rectByLTRB = Rect.fromLTRB(20, 40, 220, 140);
    final rectByLTWH = Rect.fromLTWH(20, 40, 200, 100);
    canvas.drawRect(rectByLTRB, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

内容的提问来源于stack exchange，提问作者sumit kumar Pradhan