Flutter开发 键盘弹起导致底部溢出问题

        flutter版本：3.7.12

        表现：登录页为从上往下Column布局，但是内容不足以撑满一整屏（约70%），键盘弹起的时候导致底部溢出，查了一下资料，都说给Scaffold加上属性

resizeToAvoidBottomInset: false,

加上后确实不会再出现溢出表现，但是同时页面也没有随着键盘的弹起而弹起，导致一些小屏手机输入位置被键盘挡住，用户不知道输入内容，登录按钮也是直接被挡住。

        解决方案：在Scaffold最外层加入SingleChildScrollView，手动控制器滚动位置。

1、声明一个控制变量

ScrollController scrollController = ScrollController();

2、给SingleChildScrollView赋值控制变量

return Scaffold(

resizeToAvoidBottomInset: false,

body: SingleChildScrollView(

controller: scrollController,

child: Container(

// 其他内容...

)

)

)

3、页面尺寸变化时加入监听

/// 页面尺寸改变时回调

@override

didChangeMetrics() {

super.didChangeMetrics();

// 在页面重新渲染完成之后，通过MediaQuery.of(context).viewInsets.bottom获取软键盘高度

WidgetsBinding.instance?.addPostFrameCallback((timeStamp) {

isKeyboardOpen = MediaQuery.of(context).viewInsets.bottom > 0;

if (isKeyboardOpen) {

scrollController.animateTo(

// 重点，本文可以直接滚动到最底部满足要求，根据自己需要进行跳转滚动位置，

// 最后是定位到聚焦的某一个输入位置进行滚动

scrollController.position.maxScrollExtent,

duration: Duration(milliseconds: 500),

curve: Curves.easeInOut,

);

}

});

}

        最后键盘弹起的时候，底部不会出现溢出提示，并且页面可以滚动并自动在弹起的时候滚动到最底部（本项目适合，自己的项目可以定位到需要滚动到的聚焦组件位置），保证内容可见，问题解决~

好文链接

 您阅读本篇文章共花了：