Flutter解决键盘盖住页面布局：resizeToAvoidBottomPadding的应用

在 Flutter 开发中，遇到弹起屏幕键盘时页面布局超限（BOTTOM OVERFLOWED BY 17 PIXELS）的问题，通常是因为页面的高度被固定，当键盘弹起时，底部的内容会被遮挡。这种情况下，可以考虑使用 Scaffold 的 `resizeToAvoidBottomPadding` 属性来解决。 `resizeToAvoidBottomPadding` 是一个布尔属性，其默认值为 true，这意味着当键盘弹起时，Scaffold 会自动调整 body 区域的大小，以确保内容不会被屏幕底部的输入栏覆盖。如果不想让 Scaffold 自动调整，可以将其设置为 false，如： ```dart @override Widget build(BuildContext context) { return Scaffold( resizeToAvoidBottomPadding: false, // 关闭自动调整 appBar: AppBar( title: Text( '选课', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold, color: Colors.black54), ), centerTitle: true, // ... 其他配置 ), body: ListView( shrinkWrap: true, // 使 ListView 只按内容大小扩展，不填充剩余空间 children: [ Container( alignment: AlignmentDirectional.center, child: Padding( padding: EdgeInsets.fromLTRB(30.0, 32.0, 30.0, 0), child: Column( children: [ Image( image: AssetImage("images/course_logo.png"), width: 139, height: 38, fit: BoxFit.contain, ), inputPhone(context), inputPassword(context), loginWidget(context), loginByWX(context), ], ), ), ), ], ), ); } ``` 作者杨天福在这个例子中，使用了 `ListView` 和 `shrinkWrap` 属性，这样列表会根据子组件的实际尺寸调整，而不是固定高度，从而避免键盘弹起时的布局溢出问题。通过关闭 `resizeToAvoidBottomPadding`，开发者可以手动处理布局调整，比如根据键盘的高度动态改变 `ListView` 或其他需要响应键盘事件的视图的位置或大小，以达到更好的用户体验。 要解决 Flutter 弹起键盘时页面布局超限的问题，关键在于灵活处理 `resizeToAvoidBottomPadding` 属性，并利用合适的布局策略（如 `shrinkWrap`），确保页面在不同状态下都能保持良好的显示效果。