当前位置:   article > 正文

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

flutter 键盘弹起

        flutter版本:3.7.12

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

resizeToAvoidBottomInset: false,

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

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

1、声明一个控制变量

ScrollController scrollController = ScrollController();

2、给SingleChildScrollView赋值控制变量

  1. return Scaffold(
  2. resizeToAvoidBottomInset: false,
  3. body: SingleChildScrollView(
  4. controller: scrollController,
  5. child: Container(
  6. // 其他内容...
  7. )
  8. )
  9. )

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

  1. /// 页面尺寸改变时回调
  2. @override
  3. didChangeMetrics() {
  4. super.didChangeMetrics();
  5. // 在页面重新渲染完成之后,通过MediaQuery.of(context).viewInsets.bottom获取软键盘高度
  6. WidgetsBinding.instance?.addPostFrameCallback((timeStamp) {
  7. isKeyboardOpen = MediaQuery.of(context).viewInsets.bottom > 0;
  8. if (isKeyboardOpen) {
  9. scrollController.animateTo(
  10. // 重点,本文可以直接滚动到最底部满足要求,根据自己需要进行跳转滚动位置,
  11. // 最后是定位到聚焦的某一个输入位置进行滚动
  12. scrollController.position.maxScrollExtent,
  13. duration: Duration(milliseconds: 500),
  14. curve: Curves.easeInOut,
  15. );
  16. }
  17. });
  18. }

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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/我家自动化/article/detail/268722?site
推荐阅读
相关标签
  

闽ICP备14008679号