flutter 错误记录 键盘弹起收起导致数据初始化

最新推荐文章于 2024-08-20 14:34:44 发布
最新推荐文章于 2024-08-20 14:34:44 发布
阅读量1.2k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： flutter 错误记录
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_42944436/article/details/108367261
本文探讨了键盘弹起收起导致页面重复构建的问题，并提出了解决方案：将数据更新与页面构建方法相结合，避免不必要的数据初始化，提高用户体验。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

键盘弹起收起会导致页面build，页面build会让widget.data的数据初始化
解决：将数据与build的方法放在一起；
在这里插入图片描述

Flutter TextField跟随键盘弹出和收回（类似于今日头条的评论）
WangQingLei0307的博客
07-07 5489
在开发过程中，我们会遇到输入框跟随键盘上下移动的效果（例如今日头条，当我们点击评论框时候，评论框会自动跟随键盘上移或收回），在原生开发这个效果很简单，那么Flutter如何实现呢？向上一下效果图 编辑前： 编辑后： 那么这项过如何实现呢？废话不多说直接上代码 Container( child: AnimatedPadding( padding: MediaQuery.of(context).viewInsets, //边距（必要） .
Flutter开发 - 花式收键盘&TextField小贴士
CodingFire的博客
09-15 1097
最近偶然间看到有人关于Flutter中TextField的高度问题，所以就写了这篇博客，另外附上收键盘的几种方式。这个效果看着还行，但是吧，为什么这么高呢？最外层包裹ColorFiltered，颜色可自己定，不过一般是灰色。2.项目中存在多个键盘，希望能够点击空白区域全局收起。其实上面的TextField代码中已经给出了设置。一.先说说设置TextField的高度问题。1.如果只有一个键盘，那我们可以简单的用。接着添加点击事件来取消焦点就可以了。3）全局设置字体不随系统改变。二.来说说收键盘问题。
Flutter调优--深入探究MediaQuery引起界面Rebuild的原因及解决办法 | 京东云技术团队
JDDTechTalk的博客
05-29 477
我们可以通过MediaQuery.of(context)方法获取到一些设备和系统的相关信息，比如状态栏的高度、当前是否是黑暗模式等等，使用起来相当方便，但是也要注意可能引起的页面rebuild问题。本文会介绍一个典型的例子，并深入源码来探讨引起rebuild的原因，最后介绍避免rebuild的几个办法。
flutter使用 dialog 中包含输入框 ，输入后 键盘重置数据问题
u013297881的专栏
08-06 862
解决方法 正常使用 StatefulWidget dan返回组件 还是 dialog ，后续j可以 展示dialog class ConsultBrandDialog extends StatefulWidget { final Function(String validCode) submitButtonCallback; //自定义咨询提示语 final String contentValue; //是否需要验证码 final bool isNeedValidCode;.
Flutter手机软键盘弹出rebuild多次问题分析解决
qq_25062671的博客
07-18 818
处理过程：检查Widget的代码里哪里有调用MediaQuery.of(context)方法，该方法是个坑，会在屏幕变化时，在调用的地方都会重新rebuild。知道原因后，排除所有代码中使用了MediaQuery.of(context)的地方，获取屏幕宽度的使用LayoutBuilder。Flutter开发中遇到的坑。起因：在页面放入了一个TextField，并弹出了输入法，页面疯狂的调用build方法，所有页面都刷新了一遍，最要命的是接口重新访问了N遍。版本3.7.10 后续的版本也会有此类问题。
【Flutter】 键盘弹出时出现多次调用build方法和升级到Flutter3.24后也会出现多次调用build方法问题
night_iv的专栏
08-20 640
https://www.cnblogs.com/lude1994/p/16952020.html
flutter 切换tab的会重新build的解决方案
qls1191的博客
10-16 1380
flutter 切换tab的会重新build的解决方案 当我们用如下方式创建tab时 _onTabClick(int index){ _currentIndex=index; setState(() { }); } @override Widget build(BuildContext context) { return Scaffold( appBar: _currentIndex==0?null:AppBar( center
flutter弹起键盘页面布局超限问题
01-20
例如，如果在脚手架上方显示屏幕键盘，则可调整body属性控件的大小以避免被键盘覆盖。如果你不需要此功能，可以将resizeToAvoidBottomPadding属性设置为false @override Widget build(BuildContext context) { ...
【Flutter】Dart 数据类型 Map 类型 ( 创建 Map 集合 初始化 Map 集合 遍历 Map 集合 ).zip
02-05
【Flutter】Dart 数据类型 Map 类型 ( 创建 Map 集合 | 初始化 Map 集合 | 遍历 Map 集合 ) https://hanshuliang.blog.youkuaiyun.com/article/details/113700234 博客源码快照
flutter页面初始化加载http网络请求数据
HelloYoungr的博客
07-01 4455
1、导入依赖 导入http包的依赖 这里的依赖版本可以参考以下地址 参考网址：packages-http dependencies: flutter: sdk: flutter http: ^0.12.2 2、json转实体类 我们要通过网络请求来获取响应到的json数据，通常情况下要将响应到的数据封装成一个 model 对象，前端通过获得这个 model 来获取到所需要的数据。 json转换为实体类，我们可以使用自动生成工具，日常开发中也是这样操作的，因为都是固定格式的代码，使用自动工具
Flutter中如何限制widget重新build
Mr_Tony的专栏
12-28 1649
文章目录一、演示程序介绍二、使用缓存变量处理重新build的问题三、使用const处理重新build问题 一、演示程序介绍 有时候在开发中会出现多次build的情况，通常没什么问题，但是偶尔会导致数据重新初始化，这样就比较麻烦，所以以下给出几种解决重新build问题的方式。首先来看一个简单的没有处理的代码: import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends Stat
Flutter 软键盘导致界面重绘的问题
github_36850997的博客
08-08 1201
用Flutter 开发的应用，在自己搭建的百度地图页面，点击进入一个界面输入内容，发现弹出键盘会出现在第一个百度页面出现空白的问题，并且在控制行抛出错误，在Scafford 中设置 resizeToAvoidBottomPadding: false,查找了资料发现，因为弹出的键盘导致页面进行了重绘，所以百度地图加载了异常，所以解决方案为。
flutter: Provider的坑 --- 退出页面时，StatefulWidget又会build一遍？
u013009899的博客
04-26 862
具体代码如下： _changeLocation(BuildContext context) async { // 1、异步的，通过await等待CityPage页面退出返回数据 CityModel city = await NavigatorRoute.pushName(context, CityPage.routeName); if (city == null) { return; } // 2、这里用到了Provider，其中调用了notifyLis
flutter: 软键盘弹出把布局向上顶起的问题
Crystal_xing的专栏
12-16 8298
软键盘向上弹出的时候，会使界面高度重新计算然后刷新布局，所以导致布局向上顶起的现象，解决方案如下： 1. Scaffold 中需要加入resizeToAvoidBottomPadding: false , 2. body 部分用SafeArea+SingleChildScrollView+SizeBox包裹，然后设置高度，用来规避重新计算的问题： @override Widget build(BuildContext context) { final paddin...
Flutter 页面无缘无故执行build的解决办法
yaochangliang的博客
03-30 3638
有时候flutter执行了pop方法返回到上一个界面，上一个界面突然就执行了build方法，其实我们并不希望上个界面执行build，可以在上个界面添加如下方法即可解决自动build的问题。 @override void didChangeDependencies() { // ignore: must_call_super } flutter解决自动执行build方法。flutter返回上个界面自动刷新了。 ...
Flutter 输入框弹出软键盘失效的问题
trues的博客
11-13 9328
TextField TextFormField场景问题解决问题Issues方法后续 场景 当我们使用TextField TextFormField 点击 widget 时会自动弹出软键盘正常的事件 问题 点击 TextField 在定位API 28 时不会显示屏幕键盘，但在定位API 27时会显示 解决问题 Issues https://github.com/flutter/flutter...
Flutter防止手机键盘弹出时报错
qq_59625204的博客
05-14 260
在Scaffold中添加resizeToAvoidBottomInset: false,
Flutter键盘弹出造成布局异常解决
01-06 5283
  在使用flutter开发时，经常会遇到输入框弹起的时候，debug环境下会提示布局异常。下面我们分两种情况进行讨论分析 输入框在可滚动widget上 输入框如果在滚动的widget上时，键盘弹起，滚动的widget会自动滚动，不存在这个布局异常的问题，如果出现了这种情况，可以排查下Scaffold的resizeToAvoidBottomInset属性设置为false，这个默认是true. 输入框在不可滚动widget上 这种情况不要把输入框距离底部的高度写死，而是加上键盘的动态高度。MediaQuery
解决Flutter键盘弹起导致与输入框有间距问题（Flutter键盘弹起Scaffold布局流程）解析
上辈子作恶多端，这辈子写前端。
07-31 3302
一、 在项目中遇到了个如下问题： 当页面底部有个输入框，点击弹出键盘时；输入框与键盘之间有一段间距 通过排除，最后找到了问题根源所在；原因是使用了这个屏幕适配框架导致的。此框架通过直接修改FlutterViewConfiguration()的size与devicePixelRatio达到适配的目的 二、要解决这个问题，就需要了解键盘弹起整个页面做了哪些事情来入手了 假设页面如下： void main() { runApp(MyApp()); } class MyApp extends B
如果我的flutter工程已经写好了，此时我想打开我工程中任一flutter页面，只要有键盘弹起事件，我都能够监听到
最新发布
08-01
<think>我们已经在之前的回答中介绍了在单个页面内监听键盘事件的方法。现在用户的需求是“在已有的Flutter工程中实现全局监听键盘弹起事件”，即在整个应用程序范围内监听键盘的弹起和收起。 全局监听意味着无论当前在哪个页面，只要键盘状态发生变化，我们都能得到通知。我们可以通过以下步骤实现： 1. 创建一个全局的键盘监听服务（单例模式），该服务使用`WidgetsBindingObserver`来监听整个应用的生命周期和屏幕变化（包括键盘）。 2. 在应用的顶层（比如MaterialApp之上）注入这个服务，并开始监听。 3. 通过事件总线（Event Bus）或回调函数的方式将键盘状态变化通知给需要的地方。 但是注意：`WidgetsBindingObserver`的`didChangeMetrics`方法需要当前上下文（Context）来获取`MediaQuery`，而全局监听器可能没有当前页面的Context。因此，我们可以通过以下方式解决： 方案一：在顶层Widget（如MaterialApp）中监听，然后通过全局事件分发。 方案二：使用`window`的`onMetricsChanged`事件（属于dart:ui）来监听窗口变化，从而获取键盘高度（不需要Context）。 这里我们采用方案二，因为它是全局的，不依赖于Widget树，并且可以随时监听。 具体步骤： 1. 在`dart:ui`中有一个`Window`类，它提供了`onMetricsChanged`回调，当窗口的尺寸变化时（包括键盘弹起）会触发。 2. 我们可以通过`window`获取到`viewInsets`（被系统UI遮挡的部分，通常就是键盘高度）和`viewPadding`（系统UI，比如状态栏）。 注意：`window`的`onMetricsChanged`是全局事件，但需要我们在应用启动时就开始监听。 实现： 创建一个全局的键盘监听管理器： ```dart import 'dart:ui' as ui; class KeyboardManager { // 单例 static final KeyboardManager _instance = KeyboardManager._internal(); factory KeyboardManager() => _instance; KeyboardManager._internal() { // 开始监听 _init(); } // 键盘高度 double _keyboardHeight = 0; // 键盘是否可见 bool _keyboardVisible = false; // 监听回调列表 final List<Function(bool, double)> _listeners = []; void _init() { // 监听窗口尺寸变化 ui.window.onMetricsChanged = () { // 获取窗口的viewInsets（被遮挡的部分，键盘高度就是bottom） final viewInsets = ui.window.viewInsets; final newKeyboardHeight = viewInsets.bottom; final newKeyboardVisible = newKeyboardHeight > 50; // 阈值 // 如果状态变化，则通知 if (newKeyboardVisible != _keyboardVisible || newKeyboardHeight != _keyboardHeight) { _keyboardHeight = newKeyboardHeight; _keyboardVisible = newKeyboardVisible; // 通知所有监听者 for (var listener in _listeners) { listener(_keyboardVisible, _keyboardHeight); } } }; } // 添加监听 void addListener(Function(bool, double) listener) { _listeners.add(listener); } // 移除监听 void removeListener(Function(bool, double) listener) { _listeners.remove(listener); } } ``` 使用： 在需要监听键盘全局事件的地方（比如某个页面）添加监听： ```dart class MyPageState extends State<MyPage> { @override void initState() { super.initState(); KeyboardManager().addListener(_onKeyboardChange); } @override void dispose() { KeyboardManager().removeListener(_onKeyboardChange); super.dispose(); } void _onKeyboardChange(bool visible, double height) { print('全局键盘状态变化: 可见=$visible, 高度=$height'); // 处理逻辑 } } ``` 注意：由于`ui.window`是全局的，所以我们在应用启动时就可以初始化`KeyboardManager`（例如在main函数中），然后在任何地方使用。 但是，我们也可以不在main函数中初始化，因为单例在第一次使用时才会初始化。 另外，考虑到多个页面同时监听，我们使用了回调列表。当键盘状态变化时，所有已注册的监听器都会被调用。 优化： 1. 我们可以在`KeyboardManager`中保存当前键盘状态，这样新增监听器时可以立即获取当前状态。 2. 注意：`ui.window`的事件是全局的，但键盘高度是相对于整个窗口的，所以是准确的。 关于引用： 引用[2]提到了软键盘遮挡的问题，我们可以使用类似的方法在全局监听中调整布局，但全局监听器本身不负责调整布局，它只是提供状态信息，具体调整由各个页面自己处理。 引用[1]中提到了禁止软键盘弹出，但这里我们不需要，因为我们要监听的是键盘事件。 引用[3]提到了监听事件的方法，我们这里使用的是窗口的`onMetricsChanged`，类似于Android原生开发中的全局布局监听。 因此，我们可以在Flutter应用中通过上述方式实现全局键盘监听。 注意：这种方法在iOS和Android上都是有效的，因为Flutter框架本身也是通过这个事件来更新`MediaQuery`的。 完整示例代码： ```dart // keyboard_manager.dart import 'dart:ui' as ui; class KeyboardManager { static final KeyboardManager _instance = KeyboardManager._internal(); factory KeyboardManager() => _instance; KeyboardManager._internal() { _init(); } double _keyboardHeight = 0; bool _keyboardVisible = false; List<Function(bool, double)> _listeners = []; void _init() { // 初始状态 _updateState(); // 监听变化 ui.window.onMetricsChanged = () { _updateState(); }; } void _updateState() { final viewInsets = ui.window.viewInsets; final newKeyboardHeight = viewInsets.bottom; final newKeyboardVisible = newKeyboardHeight > 50; if (newKeyboardVisible != _keyboardVisible || newKeyboardHeight != _keyboardHeight) { _keyboardHeight = newKeyboardHeight; _keyboardVisible = newKeyboardVisible; _notifyListeners(); } } void _notifyListeners() { // 注意：避免在遍历过程中监听器被移除，所以使用List.from for (var listener in List.from(_listeners)) { listener(_keyboardVisible, _keyboardHeight); } } void addListener(Function(bool, double) listener) { _listeners.add(listener); // 添加后立即通知当前状态 listener(_keyboardVisible, _keyboardHeight); } void removeListener(Function(bool, double) listener) { _listeners.remove(listener); } } ``` 在页面中使用： ```dart import 'package:flutter/material.dart'; import 'keyboard_manager.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: MyHomePage(), ); } } class MyHomePage extends StatefulWidget { @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { String _keyboardStatus = '键盘未弹出'; @override void initState() { super.initState(); KeyboardManager().addListener(_onKeyboardEvent); } @override void dispose() { KeyboardManager().removeListener(_onKeyboardEvent); super.dispose(); } void _onKeyboardEvent(bool visible, double height) { setState(() { if (visible) { _keyboardStatus = '键盘弹出，高度: $height'; } else { _keyboardStatus = '键盘收起'; } }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('全局键盘监听示例')), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text(_keyboardStatus), TextField( decoration: InputDecoration( hintText: '点击这里弹出键盘', ), ), ], ), ), ); } } ``` 这样，无论在哪个页面，只要有键盘弹起或收起，都会触发监听器（前提是当前页面注册了监听）。 注意：由于键盘事件是全局的，所以当多个页面同时存在时，每个页面都可以独立监听。但是，如果页面被销毁，请务必移除监听，避免内存泄漏和无效调用。 相关问题： 1. 如何检测 Flutter 中键盘完全收起的状态？ 答：通过上述全局监听，当`visible`变为`false`时就是完全收起。 2. Flutter 中如何实现输入框随键盘自动上移？ 答：通常使用`Scaffold`的`resizeToAvoidBottomInset`属性（默认为true）可以自动调整，但如果需要更精细的控制，可以在键盘弹出时滚动页面（如使用`ListView`和`ScrollController`）[^2]。 3. 如何获取不同平台(iOS/Android)的精确键盘高度？ 答：通过`ui.window.viewInsets.bottom`获取的就是精确高度，它由平台提供。 4. Flutter 键盘弹出时如何防止内容被遮挡？ 答：使用可滚动组件（如`ListView`）并设置`resizeToAvoidBottomInset`为true（默认就是true），或者通过监听键盘事件手动滚动到焦点位置[^2]。 因此，我们可以通过全局键盘监听管理器来实现整个应用的键盘状态监听。 引用： [^1]: 禁止软键盘弹出，这里我们不需要禁止，但说明可以通过设置输入框只读来避免软键盘弹出。 [^2]: 使用可滚动组件可以避免键盘遮挡问题。 [^3]: 监听事件的方法，我们这里使用了窗口的全局监听。 注意：在Flutter中，键盘事件是系统事件，通过`dart:ui`的`window`对象可以全局捕获，因此上述方法是可行的。</think>在 Flutter 中实现全局监听键盘弹起事件，可以通过以下两种高效方法实现： ### 方法一：使用 Window 全局监听（推荐） 这是最彻底的全局监听方案，不依赖 Widget 树，适用于整个应用： ```dart import 'dart:ui' as ui; class GlobalKeyboardListener { static final GlobalKeyboardListener _instance = GlobalKeyboardListener._internal(); factory GlobalKeyboardListener() => _instance; final List<Function(bool, double)> _listeners = []; double _lastKeyboardHeight = 0; GlobalKeyboardListener._internal() { // 初始化监听 ui.window.onMetricsChanged = () { final viewInsets = ui.window.viewInsets; final keyboardHeight = viewInsets.bottom; final isVisible = keyboardHeight > 50; // 阈值判断 // 仅当状态变化时通知 if (isVisible != (_lastKeyboardHeight > 50) || keyboardHeight != _lastKeyboardHeight) { _lastKeyboardHeight = keyboardHeight; // 通知所有监听器 for (final listener in _listeners) { listener(isVisible, keyboardHeight); } } }; } // 添加全局监听器 void addListener(Function(bool, double) listener) { _listeners.add(listener); } // 移除监听器 void removeListener(Function(bool, double) listener) { _listeners.remove(listener); } } ``` 使用示例： ```dart void main() { runApp(MyApp()); // 全局初始化 final keyboardListener = GlobalKeyboardListener(); keyboardListener.addListener((visible, height) { print('全局键盘状态: ${visible ? "弹起" : "收起"}, 高度: $height'); // 全局处理逻辑... }); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: HomePage(), ); } } ``` ### 方法二：全局 WidgetsBindingObserver 适合需要访问 BuildContext 的场景： ```dart class GlobalKeyboardObserver with WidgetsBindingObserver { static final GlobalKeyboardObserver _instance = GlobalKeyboardObserver._internal(); factory GlobalKeyboardObserver() => _instance; final List<Function(bool, double)> _listeners = []; GlobalKeyboardObserver._internal() { WidgetsBinding.instance.addObserver(this); } @override void didChangeMetrics() { // 注意：需要确保在Widget树构建后使用 final viewInsets = MediaQueryData.fromWindow(ui.window).viewInsets; final keyboardHeight = viewInsets.bottom; final isVisible = keyboardHeight > 50; for (final listener in _listeners) { listener(isVisible, keyboardHeight); } } void addListener(Function(bool, double) listener) { _listeners.add(listener); } void removeListener(Function(bool, double) listener) { _listeners.remove(listener); } } ``` 在 MaterialApp 中使用： ```dart void main() { WidgetsFlutterBinding.ensureInitialized(); final keyboardObserver = GlobalKeyboardObserver(); keyboardObserver.addListener((visible, height) { print('键盘状态变化: $visible, 高度: $height'); }); runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: HomePage(), ); } } ``` ### 优化建议 1. **防抖处理**： ```dart Timer? _debounceTimer; void _handleMetricsChange() { _debounceTimer?.cancel(); _debounceTimer = Timer(const Duration(milliseconds: 100), () { // 实际处理逻辑 }); } ``` 2. **跨平台适配**： ```dart double getPlatformThreshold() { if (Platform.isIOS) return 50; if (Platform.isAndroid) return 100; return 50; } ``` 3. **内存管理**： ```dart void dispose() { WidgetsBinding.instance.removeObserver(this); _listeners.clear(); } ``` ### 解决键盘遮挡问题 结合全局监听实现自动滚动（参考引用[2]）： ```dart keyboardListener.addListener((visible, height) { if (visible) { // 滚动到焦点控件下方 Scrollable.ensureVisible( _focusNode.context!, duration: Duration(milliseconds: 300), curve: Curves.easeOut, ); } }); ``` ### 注意事项 1. **键盘高度精度**： ```dart // 获取精确高度（单位：像素） final exactHeight = ui.window.viewInsets.bottom; ``` 2. **iOS 适配**： iOS 键盘有动态高度变化（如表情键盘），需要特殊处理 3. **Web 平台**： 在 Flutter Web 中可能需要额外处理浏览器兼容性 4. **性能优化**： 避免在监听器中执行重操作，必要时使用 Isolate [^1]: 通过只读输入框实现硬件键盘监听 [^2]: 使用滚动视图解决键盘遮挡问题 [^3]: 事件监听的不同实现方式
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

铁牛不是牛

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值