Flutter如何禁止屏幕滚动 让所有控件适配任意尺寸屏幕

布局溢出的核心原因是Column内所有垂直方向的组件尺寸、间距全部写死为固定像素值：Logo固有高度、26号字标题、固定30/20px的上下外边距、6个OTP输入框高度、按钮20px垂直内边距，这些值累加后的总高度在5.5英寸等小屏设备上超过了SafeArea提供的可用屏幕高度，直接导致组件超出可视区域、触发异常滚动。

做以下调整即可实现全屏幕尺寸适配：

• 替换全固定的垂直间距为Spacer弹性占位，不同屏幕尺寸下间距会自动伸缩，避免总高度超出屏幕范围
• 给Column设置mainAxisSize: MainAxisSize.min，取消Column默认撑满全高的布局约束，减少布局冲突
• 最外层包裹SingleChildScrollView做极端小屏场景的滚动兜底，彻底避免硬布局溢出报错
• 若无特殊需求，将resizeToAvoidBottomInset改回默认值true，避免键盘弹出时直接压住OTP输入框

修改后的完整代码如下：

class OtpVerificationScreen extends StatefulWidget {
  const OtpVerificationScreen({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() => _OtpVerificationScreen();
}

class _OtpVerificationScreen extends State<OtpVerificationScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: true,
      backgroundColor: Colors.white,
      body: SafeArea(
        child: SingleChildScrollView(
          padding: const EdgeInsets.symmetric(horizontal: 30),
          child: Center(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                const Spacer(flex: 2),
                // Logo区域
                const LogoForAuthScreens(),
                const SizedBox(height: 20),
                const Text(
                  'Enter verification code',
                  style: TextStyle(
                    fontSize: 26,
                  ),
                ),

                Container(
                  margin: const EdgeInsets.only(top: 20, bottom: 30),
                  child: const Text(
                    'We send a code to the following number:\n+01723456789',
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      color: Colors.black45,
                    ),
                  ),
                ),
                Form(
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: const [
                      OtpInputField(),
                      OtpInputField(),
                      OtpInputField(),
                      OtpInputField(),
                      OtpInputField(),
                      OtpInputField(),
                    ],
                  ),
                ),

                const SizedBox(height: 20),
                TextButton(
                  onPressed: () {},
                  child: const Text('Resend OTP'),
                ),
                const Spacer(flex: 3),
                MaterialButton(
                  onPressed: () {
                    Navigator.of(context).pushNamed('/signup');
                  },
                  color: Colors.red,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(10),
                  ),
                  padding:
                      const EdgeInsets.symmetric(vertical: 20, horizontal: 30),
                  minWidth: double.infinity,
                  child: const Text(
                    'Continue',
                    style: TextStyle(
                      color: Colors.white,
                    ),
                  ),
                ),
                const SizedBox(height: 20),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

如果需要更精准的多尺寸适配，可以通过MediaQuery.of(context).size.height获取屏幕实际可用高度，按比例设置组件尺寸和间距，比如SizedBox(height: MediaQuery.of(context).size.height * 0.03)，即可保证所有设备上的布局占比一致，完全不会出现溢出问题。

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