Flutter 解决软键盘弹出背景图片变形

最新推荐文章于 2025-06-10 14:51:35 发布

原创最新推荐文章于 2025-06-10 14:51:35 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flutter

Flutter 专栏收录该内容

6 篇文章

订阅专栏

在使用Flutter开发应用时，遇到登录界面背景图片在点击输入框弹出软键盘时变形的问题。通过设置`resizeToAvoidBottomInset`属性为`false`解决了这一问题，使得背景图片在键盘显示时保持正确比例，不再超出屏幕范围。具体代码示例中展示了如何修改Scaffold的配置来实现这一效果。

部署运行你感兴趣的模型镜像

自己在模拟写登录界面时，添加了一个背景，但是在点击输入时发现背景图片变形

一开始的内容

点击用户名，弹出软键盘时，图片变形且高度超出

解决办法：

我使用的版本是 flutter 2.13
resizeToAvoidBottomInset: false
之前 flutter 2.10 版本
resizeToAvoidBottomPadding: false

Widget build(BuildContext context) {
    return new Scaffold(
      resizeToAvoidBottomInset: false, // 就是这里
      appBar: AppBar(
        centerTitle: true,
        title: Text('My first flutter app',style: TextStyle(color:Colors.white),)
      ),
      endDrawer: RightDrawer(),//右滑内容
      body: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage('images/bg.jpg'),
            fit: BoxFit.cover
          )
        ),
        child: _buildLogInWidgets(),
      ),
    );
  }

添加后的界面