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

27 篇文章 0 订阅

方法1

以前搞ionic1~4的开发中 和react-native   flutter中的机制完全不同, 在flutter 中 当前页面如果存在元素被软键盘挡住 的情况 页面元素的最外层肯定得嵌套一层   SingleChildScrollView(一般建议建议用 ListView.builder,因为官方都说了ListView.builder 比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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值