如何将Flutter Widget的原点转换至左下角？

要把Flutter Widget的默认原点（左上角）改成左下角，有几种简便的实现方式，最通用的是借助Transform组件的矩阵变换：

通用Widget适配方案 #

直接用Transform包裹目标Widget，通过矩阵平移+翻转Y轴实现坐标系转换：

Transform(
  transform: Matrix4.translationValues(0, MediaQuery.of(context).size.height, 0)
    ..scale(1.0, -1.0),
  alignment: Alignment.bottomLeft,
  child: YourTargetWidget(), // 替换成你需要转换的Widget
)

原理：先将Widget向下平移整个屏幕高度，再沿Y轴垂直翻转，此时Widget的布局坐标会以左下角为原点，Y轴数值向上递增，和传统数学坐标系一致。

自定义绘制场景适配 #

如果是CustomPaint的自定义绘制场景，直接在画布上做变换更高效：

CustomPaint(
  painter: BottomLeftOriginPainter(),
  child: SizedBox.expand(),
)

class BottomLeftOriginPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // 把画布原点移到左下角
    canvas.translate(0, size.height);
    canvas.scale(1, -1);
    
    // 后续绘制都基于左下角原点，比如画一个在(50,50)位置的圆
    canvas.drawCircle(const Offset(50, 50), 20, Paint()..color = Colors.red);
  }

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

定位式替代方案（仅布局场景） #

如果只是需要在布局时以左下角为基准定位，也可以用Stack配合Positioned：

Stack(
  alignment: Alignment.bottomLeft,
  children: [
    Positioned(
      left: 20,
      bottom: 20,
      child: YourTargetWidget(),
    ),
  ],
)

这种方式只是改变定位基准，并非真正转换Widget的坐标系，适合简单布局场景，自定义绘制场景建议用前两种方法。

内容的提问来源于stack exchange，提问作者Zack