开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Flutter|当键盘弹出时，会出现BottomOverFlowed。需要如图所示的精确设计

是一种跨平台的移动应用开发框架，由Google开发和维护。它使用Dart语言编写，并且具有快速开发、高性能和美观的用户界面的特点。

当键盘弹出时，可能会出现BottomOverFlowed的问题。这是因为键盘的弹出导致页面内容超出屏幕底部，从而导致底部部分被遮挡。为了解决这个问题，可以采取以下几种方法：

使用SingleChildScrollView：将页面的根部件包裹在SingleChildScrollView中，这样当键盘弹出时，页面可以滚动以适应键盘的高度。
使用ListView或Column：如果页面内容较多，可以使用ListView或Column来布局页面，这样当键盘弹出时，页面可以自动滚动以适应键盘的高度。
使用resizeToAvoidBottomInset属性：在Scaffold组件中，可以设置resizeToAvoidBottomInset属性为true，这样当键盘弹出时，页面会自动调整以避免被键盘遮挡。
使用MediaQuery.of(context).viewInsets.bottom：可以通过这个属性获取键盘的高度，然后根据需要进行页面布局的调整。

推荐的腾讯云相关产品和产品介绍链接地址如下：

云服务器（CVM）：提供可扩展的计算能力，支持多种操作系统和应用场景。详情请参考：https://cloud.tencent.com/product/cvm
云数据库MySQL版（CDB）：提供高可用、可扩展的MySQL数据库服务，适用于各种规模的应用。详情请参考：https://cloud.tencent.com/product/cdb_mysql
云存储（COS）：提供安全可靠、高扩展性的对象存储服务，适用于存储和处理各种类型的数据。详情请参考：https://cloud.tencent.com/product/cos

请注意，以上推荐的腾讯云产品仅供参考，具体选择应根据实际需求和项目要求进行评估和决策。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Flutter 上的一个 Bug 带你了解键盘与路由的另类知识点

image 如上图所示，可以看到在键盘 B 页面打开后，退回上一个页面 A 时键盘已经收起，但是原先键盘所在的区域在 A 页面变成了空白，而 A 页面内容也被 resize 成了键盘弹出后的大小。...那 viewInsets 是什么的呢？官方的解释是： “可以被系统显示的区域，通常是和设备的键盘等相关，当键盘弹出时 viewInsets.bottom 对应的就是键盘的顶部。”...其实 Window 的值来源于 Flutter Engine，在键盘弹出时 Flutter Engine 会通过 _updateWindowMetrics 方法更新 Window 数据，并执行 window.onMetricsChanged..._onMetricsChangedZone); } 所以可以看到，当键盘弹出和收起时，Engine 会更新 Window 的数据，Window 触发界面绘制更新，同时更新 MaterialApp 中的...但是在经过调试后震惊的发现，程序在进入 B 页面弹出键盘后，居然会触发了 A 页面 CupertinoPageRoute 的 builder 方法重新执行。

1.3K8 0

Flutter 快速解析 TextField 的内部原理

enabled 为 false 时，IgnorePointer 就会屏蔽整个区域内的手势事件，从而让 TextField 会无法点击输入。...（一个 Overlay，也就是复制/粘贴之类的弹框）； 2、根据不同平台选择响应事件； 3、执行弹出键盘操作； 4、回调点击事件；所以可以看到，这里其实是先执行弹出键盘，然后再回调点击的 callback...，所以如果你需要在点击弹出键盘前，针对 TextField 作一些处理，那么 TextField 的 onTap 其实并不合适，因为它是已经弹出了。...image 也就是当 FocusNode 和 TextEditingController 这两者发生改变的时候，会让 InputDecorator 重新 rebuild 从而改变渲染效果，例如：输入框输入内容时...所以本篇主要是通过介绍 TextField 的组成，以及解释内部各组成部分的作用，让开发者可以更清晰的了解 Flutter 里常用的文本输入框的实现，当遇上问题或者需求时，可以快速定位和解决问题，例如：

2.2K3 0

Flutter开发中的一些Tips

当然了接口不可能用的了，所以都是些死数据，实现效果可以说是很完美了（得到了设计的认可。。。）。当然自己也是边查边写，也借鉴了许多Github上优秀的Flutter项目。...导致的原因就是在水平或者垂直方向上的内容超过了父部件的大小。一般来说我们的页面不存在这样的问题，因为根据页面的设计，事先可以预料到是否超出。不过要注意到有输入法弹出的页面。...比如我下面的这个例子：可以看到底部溢出了22个像素，可能在18：9的手机以上不太会出现这种问题，因为屏幕的高度足够。但是这种16：9的手机可能会暴露出来。...当TextField的keyboardType属性设置为TextInputType.phone 或TextInputType.number时，IOS系统弹出的数字输入键盘没有"完成"按钮，导致输入法无法关闭...比较成熟有效的方案是在键盘弹出的上方悬浮一个按钮，点击可以关闭键盘。当然了，这种问题也有对应的库可以解决，我使用的是flutter_keyboard_actions来解决了这个问题。

2.1K3 0

当永恒的软键盘问题遇到Flutter

移动端开发的同学可能或多或少都遇到过软键盘的问题。不是被遮住布局就是布局顶不上去。那么使用 Flutter 的时候，遇到软键盘出来的时候又会遇到什么问题呢？...如图: 这个时候当 TextInput 获得输入焦点的时候，情况出现了：这里会直接类似这种报错。...原来是布局溢出了，再仔细看看，会发现，当键盘弹出来的时候，正常布局就是在键盘的上面，留给dialog 可以用的就只有一点点高度了，自然就 over 了。...也就是，当键盘没弹出的时候，输入框在下面，键盘出来的时候，输入框在键盘的上方。底部对话框再怎么样，也不能被输入框顶到屏幕外面去吧。...((_) { initHeight = context.size.height; }); } 这个时候运行一下，就会发现当键盘弹出的时候，输入框在键盘的上方。

3.2K3 0

【Flutter 专题】64 图解基本 TextField 文本输入框 (一)

和尚最近在学习基础的 Flutter Widget，原因在于很多基础的组件有很多容易忽视的注意事项，了解并熟悉后对整体的开发认知会有所提升；今天和尚学习一下 TextField 文本输入框；...键盘弹出会把输入框或其它组件顶上去？...当 TextField 获取焦点弹出输入框时，输入框可能会将页面中元素顶上去，为避免此情况，可将 Scaffold 中 resizeToAvoidBottomPadding: false 即可，resizeToAvoidBottomPadding...长按输入框出现【剪切/复制/粘贴】的菜单如何设置中文？...当 TextField 设置 enableInteractiveSelection 属性后长按会出现菜单，默认为英文，可通过设置 Flutter 国际化来处理；在 pubspec.yaml 中集成 flutter_localizations

4.5K5 1

flutter 起步

onGenerateRoute ==> onUnknownRoute7. navigatorObservers路由观察器，当调用Navigator的相关方法时，会回调相关的操作8. builder当构建一个...19. checkerboardRasterCacheImages当为true时，打开光栅缓存图像的棋盘格20. checkerboardOffscreenLayers当为true时，打开呈现到屏幕位图的层的棋盘格...，比如当键盘显示的时候，重新布局避免被键盘盖住内容。...，比如当键盘显示的时候，重新布局避免被键盘盖住内容。...来显示为三个点，点击后弹出二级菜单。

4.4K2 0

Flutter软键盘原理

Flutter页面在软键盘弹出的时候，可以设置 Scaffold 的 resizeToAvoidBottomInset 属性来设置软键盘的处理。当这个值为true的时候，页面会进行重新布局。...那么我们应该如何监听 Flutter 的键盘弹出和页面的高度变化? 我们从 Flutter 键盘弹出说起。...当一个输入框 TextField 的焦点变化的时候，焦点变化会执行_openOrCloseInputConnectionIfNeeded 方法： if (_hasFocus && widget.focusNode.consumeKeyboardToken...如果不可见，就会根据 bottom inset 的占比去猜测。当这个高度大于 0.18 的时候，就会认为是键盘弹出。..._onMetricsChangedZone); } 经过上面的理论分析，我们可以得出结论，Flutter 软键盘的高度变化体现在 metrics 的变化。

1.4K1 0

【Flutter&Flame 游戏 - 贰陆】pinball 源码分析 - 游戏主页

当加载完成之后，就会进入到如下的主菜单界面，有个大大的 Play 按钮。可以看到此时两个吉祥物是在运动的，而且背景中也会显示排行榜的信息。...如下所示：当资源加载完毕时，会显示 PinballGameLoadedView 组件： ---- 通过源码可以看出 PinballGameLoadedView 主要有 3 个部分，通过 Stack 进行叠放...如下 StartGameStatus 表示游戏开始前的状态，包括四种：initial 表示初始状态；selectCharacter 表示进入选择角色面板的状态；howToPlay 表示弹出如何玩面板时的状态...---- 另外，从中我们能学到一个非常实用的小知识：在移动端通过 Game 对象可以发送按下键盘的事件。这样在移动端，可以通过按扭的事件，来发送键盘事件，这样在游戏中只需要考虑键盘事件即可。...下一篇我们将继续分析 pinall 的源码，看一下如何选择角色、如何弹出 how to play 的信息面板。

7692 0

Fluttter 混合开发下 HybridComposition 和 VirtualDisplay 的实现与未来演进

，那么应该对于 Android 上 PlatformView 的各种体验问题有过深刻的体会，比如： WebView 里弹出键盘的问题。...从一个问题开始恰巧最近一位朋友在 Flutter 2.10.1 上使用 webview_flutter 和 flutter_pdfview 测试时出现了如下的问题： attachToContext:...当然，官方在 2.10.2 版本的 #31390 上修复了这个问题，问题的原因在于：当 rasterizer 任务运行不同的线程时，GrContext 会被重新创建，从而导致 texture 变成没有初始化的状态...当然一般情况下我是更建议大家目前都使用 hybrid composition 模式，虽然两种模式都有潜在问题，但是相比起来目前 virtual display 带来的性能和键盘问题会让人更难以接受...模式也会进而退出历史舞台，所以唯有感慨， Flutter 的技术演进速度真的好快。

1.1K1 0

Flutter 中键盘弹起时，Scaffold 发生了什么变化

最近刚好有网友咨询一个问题，那就顺便借着这个问题给大家深入介绍下 Flutter 中键盘弹起时，Scaffold 的内部发生了什么变化，让大家更好理解 Flutter 中的输入键盘和 Scaffold...如下图所示，当时的问题是：当界面内有 TextField 输入框时，点击键盘弹起后，界面内底部的按键和 FloatButton 会被挤到键盘上面，有什么办法可以让底部按键和 FloatButton 不被顶上来吗...image Scaffold 的 resize Scaffold 是 Flutter 中最常用的页面脚手架，前面知道了通过 resizeToAvoidBottomInset ，我们可以配置在键盘弹起时页面的底部按键和...所以如下源码所示，当键盘弹出时， build 方法会被执行，而 MediaQueryData 就会通过MediaQueryData.fromWindow 获取到新的 MediaQueryData 数据...image 那么到这里，你知道如何在 Flutter 里正确地去获取键盘的高度了吧？

1.6K2 0

flutter：实现扫码枪获取数据源，禁止系统键盘弹窗

序言小编在项目中有遇到使用 flutter 实现扫码枪接入的需求。为方便使用，小编把能力封装成 package 并发布。好记性不如烂笔头，下面是该插件的使用方式，以及途中遇到的坑和处理想法。...版本进行定制，小编使用的是 Flutter 2.8.1 ，后续更新通用方案。...如何获取扫码枪输入内容使用过 flutter 编写输入框的同学都用过 TextField ，通过源码我们可以看到 TextField 的功能实现者是它的子节点：EditableText。...键盘弹出问题使用 EditableText 的过程中遇到了系统键盘弹出的问题。我们通过 Edit 的焦点来获取扫码枪的输入。但 EditableText 一旦获取了焦点，内部会调用原生层唤起键盘。...methodCall.arguments as List; switch (method) { case 'TextInputClient.updateEditingState': //每次的内容变化会进来这里

1721 0

移动端那些戳中你痛点的软键盘问题及解决方法

大厂技术坚持周更精选好文问题问题描述：在ios手机中，当页面中包含有输入框时，点击输入框，键盘弹起，会让页面中被fixed的元素失效。所以造成了底部吸底和顶部吸顶的元素错位的问题。...同时还参考网上文章，增加了一些特殊情况下可能出现问题的优化点。 1、吸顶元素能够继续吸顶 2、吸底元素（也就是按钮）能够在键盘弹出之后，出现在键盘的上方 3、键盘弹起，输入框出现在可视区内。...但是，触发键盘上的收起按钮键盘时，输入框并不会失去焦点，同样软键盘收起。 ? ? 2、为什么fixed会失效既然ios键盘弹起时，页面会上移，那么为什么fixed会失效呢。...这里参考这篇文章：ios键盘难题与可见视口（visualViewport）api[2] 当时ios设计者考虑到一个问题：当键盘弹起时，页面无法感知到键盘的存在。...在 Android 上，监听 webview 高度会变化，高度变小获知软键盘弹起，否则软键盘收起。 // IOS 键盘弹起：当输入框被聚焦时IOS键盘会被弹起 inputRef?.

7.7K3 0

这一次，解决Flutter Dialog的各种痛点！

同时，我在pub包内部设计了一个弹窗栈，能自动移除栈顶弹窗，也可以定点移除栈内标记的弹窗。...消息理应一个个展示，后续消息不应该顶掉前面的toast 这是一个坑点，如果框架内部不做处理，很容易出现后面toast会直接顶掉前面toast的情况 [toastOne] 展示在页面最上层，不应该被一些弹窗之类遮挡...可以发现loading和dialog的遮罩等布局，均未遮挡toast信息 [toastTwo] 对键盘遮挡情况做处理键盘这玩意有点坑，会直接遮挡所有布局，只能曲线救国在这里做了一个特殊处理，当唤起键盘的时候...loading 当网络请求结束时，会自动调用dismiss方法因为loading已被关闭，假设此时页面又有SmartDialog的弹窗，未设置status的dismiss就会关闭SmartDialog...的弹窗当然，这种情况很容易解决，封装进网络库的loading，使用：SmartDialog.dismiss(status: SmartStatus.loading); 关闭就行了 status参数，是为了精确关闭对应类型弹窗而设计的参数

1.7K5 1

Flutter 从 TextField 安全泄漏问题深入探索文本输入流程

Flutter 的 TextField 相信大家都很熟悉，作为输入控件 TextField 经常出现在需要登录的场景，例如在需要输入密码的 TextField 上配置 obscureText:...这个问题目前在 Android、iOS、Linux 等平台都普遍存在，那这个问题是从哪里来的？这就需要聊到 Flutter 里的文本输入实现流程。...在 Android 上，当输入法要和某些 View 进行交互时，系统会通过View 的 onCreateInputConnection 方法返回一个 InputConnection 实例给输入法用于交互通信...简单介绍完这些对象的作用，我们回到文本输入的流程上，当用键盘输入完内容时，文本输入内容会进入到 InputConnectionAdaptor 的 endBatchEdit ，然后如下图所示：键盘输入的内容会保存在...，会直接通过 TextInputChannel 将 code 发送到 Dart ； sendKeyEvent ：当某些特殊按键输入时会被回调，例如点击退格键时，但是这个取决于输入的不同，例如小米安全键盘输入法的退格键就不会触发

1.5K3 0

Cobalt Strike最实用的24条命令（建议收藏）

需要注意的是，运行此模块时不要使用System权限或者服务的权限（使用这些权限运行此模块，可能无法连接用户屏幕），应尽量以指定用户权限使用此模块。...执行net view命令，会显示指定计算机共享的域、计算机和资源的列表。在Cobalt Strike主界面中选择一个Beacon，进入交互模式，输入“net view”命令，如图所示。...进程列表就是通常所说的任务管理器，可以显示进程的ID、进程的父ID、进程名、平台架构、会话及用户身份。当Beacon以低权限运行时，某些进程的用户身份将无法显示，如图所示。...Log Keystrokes模块用于将键盘记录注入进程。当目标主机使用键盘进行输入时，就会捕获输入的内容并传回团队服务器，如图所示。...当某个Beacon长时间没有回连或者不需要使用某个会话时，选中指定会话即可将其移出会话列表。 17．shell命令 Beacon命令行：shell [command] [arguments]。

3531 0

Flutter布局指南之Box套盒子

在Flutter中，有一堆Box布局组件，它们可以用来更加精确的调整布局，下面我们就来看看这些Box都有哪些作用。...SizedBox SizedBox有下面几个使用场景：当你需要一个确切尺寸的Widget时，通过SizedBox来进行约束在父容器中撑满剩余空间在没有child的情况下，对空间做分割场景1： SizedBox...LimitedBox 当Widget没有父级来限制它们的尺寸时，如何在Widget上设置它的默认大小呢？这就需要使用到LimitedBox了。...FittedBox 在Flutter中，Widget之间可以任意堆叠、嵌套，所以，当子Widget的尺寸与父Widget尺寸不一致时，就会产生一些奇怪的样式，FittedBox就是用来处理这种场景的。...fit属性是非常有用的一个属性，例如当我们设置FittedBox后，文字会在设备中自动显示为一行，但是在横竖屏切换时，Text会自动修改字体大小，来适配contain的效果，如果你想让它保存当前的文字Size

1.2K1 0

Cobalt Strike最实用的24条命令（建议收藏）

需要注意的是，运行此模块时不要使用System权限或者服务的权限（使用这些权限运行此模块，可能无法连接用户屏幕），应尽量以指定用户权限使用此模块。...执行net view命令，会显示指定计算机共享的域、计算机和资源的列表。在Cobalt Strike主界面中选择一个Beacon，进入交互模式，输入“net view”命令，如图所示。...进程列表就是通常所说的任务管理器，可以显示进程的ID、进程的父ID、进程名、平台架构、会话及用户身份。当Beacon以低权限运行时，某些进程的用户身份将无法显示，如图所示。...Log Keystrokes模块用于将键盘记录注入进程。当目标主机使用键盘进行输入时，就会捕获输入的内容并传回团队服务器，如图所示。...当某个Beacon长时间没有回连或者不需要使用某个会话时，选中指定会话即可将其移出会话列表。 17．shell命令 Beacon命令行：shell [command] [arguments]。

1.2K1 0

Flutter 小技巧之优化你使用的 BuildContext

那么到这里我们收获了一个小技巧：使用 BuildContext 时，在必须时我们需要通过 mounted 来保证它的有效性。...那如果假设需要在开发时展示点击数据上报的结果，也就是 Item 被释放了还需要弹出，这时候需要如何处理？...首先前面我们一直说，通过 of(context) 获取到的是 InheritedWidget ，而当 InheritedWidget 发生改变时，就是通过触发绑定过的 Element 里...return Container( color: Colors.amber, width: width, height: height, ); } 例如上面这段代码，可能会导致键盘在弹出的时候...，虽然当前页面并没有完全展示，但是也会导致你的控件不断重新计算从而出现卡顿。

1.2K0 0

Flutter 遇到的坑

MaterialApp中调用Navigator.of(context).push() RefreshIndicator在ListView条目较少时不触发下拉刷新 RefreshIndicator是根据下拉时的偏移量触发刷新...，当条目较少时(未占满一个屏幕)，ListView不能滚动，所以无法触发下拉刷新，给ListView的physice属性设置值为new AlwaysScrollableScrollPhysics()，让.../assets 需要在项目中的pubspec.yaml中进行配置assets，将images文件下的图片都加到此位置 info: This class inherits from a class...Text("搜索"), ), //使用ScrollView包装一下，否则键盘弹出时会报错空间溢出 body: new Column( ... )... appBar: new AppBar( title: new Text("搜索"), ), //使用ScrollView包装一下，否则键盘弹出时会报错空间溢出

1.6K2 0

【Flutter 组件集录】NotificationListener｜ 8月更文挑战

下面是 ScrollView#build 源码中的一部分，可以看出，当 keyboardDismissBehavior 为 onDrag 时，所构建的组件上层会嵌套一个 NotificationListener...测试的核心代码如下： manual 和 onDrag 的效果如下：当前键盘弹出时，如果为 manual ，列表滑动过程中键盘不会主动隐藏。为 onDrag 时，滑动列表时，键盘会主动隐藏。...也就是说，该函数会回调出一个数据，并且返回一个用于控制某个逻辑的标识。...最后，该类中还有一个私有方法 _dispatch ，该方法中需要传入 Notification 对象，可以看出，这里是使用者传入的 onNotification 方法触发场合。...作为普通的使用者，了解到这样就已足够。我的第四本小册《Flutter 滑动探索 - 珠联璧合》中将会全面分析 Flutter 滑动体系的源码实现，敬请期待。

1.4K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭