如何在Flutter中翻转右上与左下位置的Icon组件？

针对你需要的右上（TopRight）和左下（BottomLeft）图标翻转需求，这里提供两种直观的实现方式，替换你代码中对应位置的IconButton即可：

方案1：使用 Transform.flip（推荐，代码更易读） #

Transform.flip 专门用于镜像翻转，通过 flipX 和 flipY 参数控制水平/垂直方向的翻转：

//TopLeft（你已实现的180°旋转）
Transform.rotate(
  angle: 180 * pi / 180,
  child: IconButton(
      onPressed: () {
        setState(() {});
      },
      icon: Icon(Icons.branding_watermark)),
),
//TopRight - 水平翻转（左右镜像）
Transform.flip(
  flipX: true,
  child: IconButton(
      onPressed: () {
        setState(() {});
      },
      icon: Icon(Icons.branding_watermark)),
),
//bottomLeft - 垂直翻转（上下镜像）
Transform.flip(
  flipY: true,
  child: IconButton(
      onPressed: () {
        setState(() {});
      },
      icon: Icon(Icons.branding_watermark)),
),
//bottomRight（原图标，无需翻转）
IconButton(
    onPressed: () {
      setState(() {});
    },
    icon: Icon(Icons.branding_watermark)),

方案2：使用 Matrix4 自定义变换 #

如果你更倾向于用Matrix4实现，可通过缩放负值来达到镜像效果，注意需要修正翻转后的位置偏移：

• 水平翻转：Matrix4.diagonal3Values(-1, 1, 1)（X轴缩放-1，实现左右镜像）
• 垂直翻转：Matrix4.diagonal3Values(1, -1, 1)（Y轴缩放-1，实现上下镜像）

代码示例：

//TopRight - Matrix4水平翻转
Transform(
  transform: Matrix4.diagonal3Values(-1, 1, 1)..translate(-24), // 24为默认iconSize，可根据实际调整
  alignment: Alignment.center,
  child: IconButton(
      onPressed: () {
        setState(() {});
      },
      icon: Icon(Icons.branding_watermark)),
),
//bottomLeft - Matrix4垂直翻转
Transform(
  transform: Matrix4.diagonal3Values(1, -1, 1)..translate(0, -24),
  alignment: Alignment.center,
  child: IconButton(
      onPressed: () {
        setState(() {});
      },
      icon: Icon(Icons.branding_watermark)),
),

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