Flutter 下拉通知栏时Image组件异常放大对齐错位问题

两个错误用法导致异常：

• Alignment的合法取值范围为-1.0 ~ 1.0，分别对应父容器的边缘对齐位置，传入-22这类远超范围的值属于非规范用法。当系统UI状态变化（如下拉通知栏、横竖屏切换）触发MediaQuery更新、父容器尺寸改变时，Flutter的对齐计算逻辑会出现非预期的拉伸、偏移。
• 未给图片指定明确的适配规则，父容器高度变化时图片会触发默认的自适应缩放，出现放大错位。

弃用超范围Alignment值做位移，改用Transform.translate实现显式位置偏移，同时给图片指定固定适配规则，避免自动缩放异常：

// onboarding_screen_1.dart
class OnboardingScreen1 extends StatelessWidget {
  const OnboardingScreen1({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final screenSize = MediaQuery.of(context).size;
    return Container(
      color: colorPrimary,
      child: Column(
        children: [
          SizedBox(
            height: screenSize.height * 0.15,
          ),
          SizedBox(
            height: screenSize.height * 0.4,
            width: screenSize.width,
            child: Transform.translate(
              // 根据实际需要的偏移量调整x轴数值，按屏幕宽度比例设置可适配多分辨率
              offset: Offset(-screenSize.width * 0.2, 0),
              child: Image(
                image: const AssetImage('assets/images/onboarding-1.png'),
                fit: BoxFit.contain,
              ),
            ),
          ),
          SizedBox(
            height: screenSize.height * 0.05,
          ),
          const Text(
            'Carpool with neighbours',
            style: TextStyle(
              fontSize: 20,
              fontWeight: FontWeight.w600,
              color: Colors.black,
            ),
          ),
          SizedBox(
            height: screenSize.height * 0.025,
          ),
          const Text(
            'Find neighbours from your area\nand carpool with them',
            style: TextStyle(color: Colors.black45),
            textAlign: TextAlign.center,
          )
        ],
      ),
    );
  }
}

如果需要更精准的位置控制，优先使用Stack+Positioned布局图片，稳定性高于Column+位移的实现，可完全避免父组件尺寸变化带来的错位问题。

内容的提问来源于stack exchange，提问作者I. Antonov