flutter TextField 输入框被软键盘挡住的解决方案

方法1

以前搞ionic1~4的开发中 和react-native   flutter中的机制完全不同, 在flutter 中 当前页面如果存在元素被软键盘挡住 的情况 页面元素的最外层肯定得嵌套一层   SingleChildScrollView

 

 

body: Container(

         //SingleChildScrollView 的父级元素得有高度  最外层Container默认 填充全部
        child: SingleChildScrollView(

        ........
    )

)

SingleChildScrollView 元素内部不能和  Expanded 的flex 直接填充 会冲突 。。。

 

 

方法2

flutter  解决这种有两种办法 一种就是传统的嵌套 SingleChildScrollView 让页面可以上下滑动  如果不想改变页面结构 

这种方法大部分是为了不让软键盘挤压导致页面Widget 变形 软键盘挡住输入框还得类scroller 属性的组件来嵌套

flutter  类入口的 Scaffold 的resizeToAvoidBottomInset: false 就可以

注意:  一个页面不管嵌套了多少类 只要用了Scaffold   都需要设置 resizeToAvoidBottomInset: false 

注意：resizeToAvoidBottomInset: false的组件内部的子组件 用WidgetsBindingObserver类 监听软键盘的时候 会监听软键盘高度为0 这个注意一下 

拓展

https://blog.csdn.net/sinat_37255207/article/details/106167427?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522159197384619724848357144%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=159197384619724848357144&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_v1~rank_blog_v1-1-106167427.pc_v1_rank_blog_v1&utm_term=%E8%BD%AF%E9%94%AE%E7%9B%98