flutter dialog中软键盘遮挡解决冲突

最新推荐文章于 2022-08-01 16:31:17 发布
最新推荐文章于 2022-08-01 16:31:17 发布
阅读量1.1k 收藏
点赞数 1
分类专栏： Flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hzqit520/article/details/112071550
版权

 

在dialog中代码软键盘冲突的解决方案;

主要价格这行代码:

padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),

完整代码: 

SingleChildScrollView(
        primary: true,
        reverse: true,
        physics: BouncingScrollPhysics(),
        padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
      )

未解决前:

解决后:

如果底部的bottom会弹窗,在Scaffold中设置

resizeToAvoidBottomPadding: false

 

敲代码的小强
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
FLutter Dialog setState及 Dialog被输入框挡住的问题
JackWu blog
09-09 708
1.FLutter Dialog setState 使用StatefulBuilder组件，使用setState1方法管理Dialog状态 showDialog( context: context, builder: (context) { return StatefulBuilder( builder: (BuildContext context1, void Function(void Function()) setState1) {
flutter 键盘遮挡输入框问题_Flutter 键盘遮挡住了控件
weixin_36181282的博客
02-06 1155
Flutter中使用TextField输入框，会有键盘遮挡问题：TextField(decoration: InputDecoration(// labelText: "密码",hintText: "您的登录密码",prefixIcon: Icon(Icons.lock)),obscureText: true,),SizedBox(height: 40,),遮挡键...
这一次，解决Flutter Dialog的各种痛点
小小涛的博客
11-06 3797
前言 Q：你一生中闻过最臭的东西，是什么？ A：我那早已腐烂的梦。 兄弟萌！！！我又来了！ 这次，我能自信的对大家说：我终于给大家带了一个，能真正帮助大家解决诸多坑比场景的pub包！ 将之前的flutter_smart_dialog，在保持api稳定的基础上，进行了各种抓头重构，解决了一系列问题 现在，我终于可以说：它现在是一个简洁，强大，侵入性极低的pub包！ 关于侵入性问题 之前为了解决返回关闭弹窗，使用了一个很不优雅的解决方法，导致侵入性有点高 这真是让我如坐针毡，如芒刺背，如鲠在喉，这个问题终
flutter 软键盘弹出让dialog上移
龚礼鹏的博客
09-23 8044
将dialog布局设置成Scaffold即可跟着软键盘上移，如下： 如果不想让其随着软键盘上移，可以设置如下属性，或者直接去掉Scaffold布局即可。
Flutter 软键盘遮挡问题:弹出时布局或Dialog上移
qq1377399077的专栏
11-13 1576
对于软件盘遮挡问题,首先考虑Scaffold作为根布局,背景色设为透明. Dialog的大概布局可以这样设计: Scaffold -> Center -> SingleChildScrollView -> Column 注意:dialog点击外部弹框消失,可以在Scafflod外部加一个GestureDetector: onTap: () { Navigator.of(context).pop(); }, ...
flutter键盘遮挡问题
weixin_43927630的博客
05-28 4732
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 找了半天翻来...
flutter 键盘遮挡输入框问题_Flutter 强大的MediaQuery控件
weixin_39833290的博客
01-07 492
注意：无特殊说明，Flutter版本及Dart版本如下：Flutter版本： 1.12.13+hotfix.5 Dart版本： 2.7.0MediaQuery通常情况下，不会直接将MediaQuery当作一个控件，而是使用MediaQuery.of获取当前设备的信息，用法如下：var data = MediaQuery.of(context);此方式必须放在MediaQuery作用域内，否则会抛出...
flutter混合开发解决输入框被键盘遮挡的问题
01-20
总结一下，解决Flutter混合开发中输入框被键盘遮挡的问题，主要涉及两步： 1. 在Flutter代码中，将Scaffold的`resizeToAvoidBottomPadding`属性设置为`false`，禁用其自动调整内容区域以避免键盘遮挡的功能。 2. ...
Flutter bottomSheet 输入框 键盘遮挡解决：2种新思路
老司机的后备箱
05-27 2570
相信各位朋友做flutter开发的时候，在处理bottom sheet中输入框的时候，多少会有点不能满足需求。今天就来介绍三种思路，各有优劣，朋友们在工作中可以参考参考 网上普遍的解决方案：AnimatedPadding 这其实和 AnimatedPadding 并没有什么关系，其核心知识点还是利用了 MediaQuery.of(context).viewInsets.bottom 关于 viewInsets 这个属性，源码中的注释是这样说的 The parts of the display that.
Flutter 解决App登录页面软键盘遮挡住登录按钮或顶起底部控件的问题
热门推荐
xhuww的博客
07-08 1万+
Flutter 解决App登录页面软键盘挡住登录按钮或顶起底部控件的问题，实现在登录页面弹窗软件盘始终在登录按钮的下方。
flutter弹起键盘页面布局超限问题
01-20
BOTTOM OVERFLOWED BY 17 PIXELS 这是由于页面高度写死导致的， 1.scaffold 根布局添加 resizeToAvoidBottomPadding:false 是否自动调整body属性控件的大小，以避免脚手架底部被覆盖。例如，如果在脚手架上方显示屏幕键盘，则可调整body属性控件的大小以避免被键盘覆盖。如果你不需要此功能，可以将resizeToAvoidBottomPadding属性设置为false @override Widget build(BuildContext context) { return Scaffold( r
Flutter之自定义Dialog实现版本更新弹窗功能的实现
08-18
Flutter之自定义Dialog实现版本更新弹窗功能的实现 Flutter是一款跨平台的移动应用开发框架，它提供了非常多的组件和功能，使得开发者可以快速构建高质量的应用程序。在实际开发中，我们经常需要实现一些自定义的...
flutter解决键盘顶起页面
浩星
03-29 5926
前言： flutter中解决键盘顶起页面的问题。 flutter 1 : Scaffold.resizeToAvoidBottomPadding return Scaffold( resizeToAvoidBottomPadding: false, // 解决键盘顶起页面 flutter 2: Scaffold.resizeToAvoidBottomInset ...
Dialog与输入框的冲突
云淡风轻的博客
05-28 1225
事件描述： 登录页面，输入11位手机号，四位验证码后，无需点击登录按钮，直接登录。当登录失败时，弹出dialog，对错误信息进行描述。发现Dialog未按照系统默认的在屏幕中心点显示，而是从屏幕上方，慢慢的移动到屏幕正中心。 测试过程： 屏蔽掉自动登录，改为手动登录，此时Dialog显示正常。后来怀疑是否是context造成的，直接在View层把context传递到Presenter中，调用...
flutter解决键盘和输入框不适配问题
weixin_44911775的博客
08-01 621
代码】flutter解决键盘和输入框不适配问题。
Flutter中输入法框显示状态下打开一个弹出对话框冲突异常的半完美解决办法
jamesxchen的博客
02-29 981
标题有点哗众取宠，锁瑞。 看下面这张图 我们来分析一个场景，下面正在输入信用额度，点击帐单日那一条，会弹出对话框供选择，此时输入法框并未消失，对话弹出框UI直接顶到了输入框，强制把输入框踢走，异常产生。 解决办法： １，关闭输入框 ２，在输入法框还未完成关闭的时候，延时小段时间 步骤： １、设置输入框焦点控制器。 //在类文件中新增焦点控制器 FocusNode creditlimitFocus...
flutter 键盘显示和隐藏
senkai123的博客
11-06 3290
给TextField指定一个FocusNode. 要显示键盘调下面的代码 FocusScope.of(context).requestFocus(focusNode); 隐藏键盘： focusNode.unfocus();
Flutter 隐藏键盘
H.A.N的博客
11-22 1210
直接上代码 : TextEditingController _contentController = new TextEditingController(); FocusNode _contentFocusNode = FocusNode(); Container( padding: EdgeInsets.fromLTRB(0.00, 5.00, 0.00,...
Flutterr中Waiting for another flutter command to release the startup lock... 异常解决
hzqit520的博客
03-25 5261
在开发flutter中导入第三方库报Waiting for another flutter command to release the startup lock… 异常解决 D:\flutter\bin\flutter.bat --no-color packages get Waiting for another flutter command to release the startup ...
flutter输入框 键盘遮挡解决
最新发布
05-16
在Flutter中，可以使用`ListView`或`SingleChildScrollView`等来解决键盘遮挡问题。以下是一些步骤： 1. 在`Scaffold`中使用`resizeToAvoidBottomInset`属性将页面的底部留出足够的空间，以避免键盘遮挡内容。 ```dart Scaffold( resizeToAvoidBottomInset: true, ... ) ``` 2. 在输入框的`TextField`中使用`FocusNode`和`MediaQuery`来监听焦点变化和键盘高度。 ```dart class _MyPageState extends State<MyPage> { final FocusNode _focusNode = FocusNode(); double _keyboardHeight = 0; @override void initState() { super.initState(); _focusNode.addListener(() { if (_focusNode.hasFocus) { _getKeyboardHeight(); } }); } void _getKeyboardHeight() { final double height = MediaQuery.of(context).viewInsets.bottom; setState(() { _keyboardHeight = height; }); } @override Widget build(BuildContext context) { return Scaffold( resizeToAvoidBottomInset: true, body: SingleChildScrollView( child: Column( children: [ TextField( focusNode: _focusNode, ... ), SizedBox(height: _keyboardHeight), ], ), ), ); } } ``` 3. 将`SizedBox`放置在输入框下方，其高度等于键盘高度，这样当键盘弹出时，页面会自动滚动到适当的位置。 ```dart SizedBox(height: _keyboardHeight), ``` 这样，当键盘弹出时，页面会自动滚动到输入框的上方，从而避免了键盘遮挡问题。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值