[英]Flutter throws an error when i use Text field with auto focus
When i use a TextField widget in Flutter and set the value of the propriety autoFocus to true当我在 Flutter 中使用TextField小部件并将属性autoFocus的值设置为true 时
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: TextField(
autofocus: true,
),
),
);
}
}
flutter throws an error颤振抛出错误
I/flutter (31721): ══╡ EXCEPTION CAUGHT BY FOUNDATION LIBRARY ╞════════════════════════════════════════════════════════
I/flutter (31721): The following assertion was thrown while dispatching notifications for FocusNode:
I/flutter (31721): RenderBox was not laid out: RenderEditable#bf516 NEEDS-LAYOUT NEEDS-PAINT
I/flutter (31721): 'package:flutter/src/rendering/box.dart':
I/flutter (31721): Failed assertion: line 1687 pos 12: 'hasSize'
I/flutter (31721):
I/flutter (31721): Either the assertion indicates an error in the framework itself, or we should provide substantially
I/flutter (31721): more information in this error message to help you determine and fix the underlying cause.
I/flutter (31721): In either case, please report this assertion by filing a bug on GitHub:
I/flutter (31721): https://github.com/flutter/flutter/issues/new?template=BUG.md
I/flutter (31721):
I/flutter (31721): When the exception was thrown, this was the stack:
I/flutter (31721): #2 RenderBox.size
package:flutter/…/rendering/box.dart:1687
I/flutter (31721): #3 EditableTextState._updateSizeAndTransform
package:flutter/…/widgets/editable_text.dart:1729
I/flutter (31721): #4 EditableTextState._openInputConnection
package:flutter/…/widgets/editable_text.dart:1415
I/flutter (31721): #5 EditableTextState._openOrCloseInputConnectionIfNeeded
package:flutter/…/widgets/editable_text.dart:1441
I/flutter (31721): #6 EditableTextState._handleFocusChanged
package:flutter/…/widgets/editable_text.dart:1707
I/flutter (31721): #7 ChangeNotifier.notifyListeners
package:flutter/…/foundation/change_notifier.dart:206
I/flutter (31721): #8 FocusNode._notify
package:flutter/…/widgets/focus_manager.dart:808
I/flutter (31721): #9 FocusManager._applyFocusChange
package:flutter/…/widgets/focus_manager.dart:1401
I/flutter (31721): (elided 12 frames from class _AssertionError and package dart:async)
I/flutter (31721):
I/flutter (31721): The FocusNode sending notification was:
I/flutter (31721): FocusNode#ce6fe
I/flutter (31721): ════════════════════════════════════════════════════════════════════════════════════════════════════
Why , and how can i solve this problem.为什么,我该如何解决这个问题。
my flutter version :我的颤振版本:
[√] Flutter (Channel stable, v1.12.13+hotfix.5, on Microsoft Windows [Version 10.0.18362.535], locale en-US) [√] Android toolchain - develop for Android devices (Android SDK version 29.0.2) [√] Android Studio (version 3.5) [√] VS Code (version 1.41.0) [√] Connected device (1 available) • No issues found! [√] Flutter (Channel stable, v1.12.13+hotfix.5, on Microsoft Windows [Version 10.0.18362.535], locale en-US) [√] Android toolchain - 为Android设备开发(Android SDK version 29.0.2)[ √] Android Studio(3.5 版) [√] VS Code(1.41.0 版) [√] 已连接设备(1 个可用) • 未发现问题!
======================================================================== ================================================== ======================
This issue exists even in official example https://flutter.dev/docs/cookbook/forms/focus即使在官方示例https://flutter.dev/docs/cookbook/forms/focus 中也存在此问题
Because with auto focus, the keyboard show up first but textfield is still not exist因为使用自动对焦,键盘首先出现但文本字段仍然不存在
Workaround is use FocusNode
and WidgetsBinding.instance.addPostFrameCallback
解决方法是使用
FocusNode
和WidgetsBinding.instance.addPostFrameCallback
When TextField show and then move focus to this TextField当 TextField 显示然后将焦点移到此 TextField 时
code snippet代码片段
@override
void initState(){
super.initState();
myFocusNode = FocusNode();
WidgetsBinding.instance.addPostFrameCallback((_){
FocusScope.of(context).requestFocus(myFocusNode);
});
}
full code完整代码
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
FocusNode myFocusNode;
@override
void initState(){
super.initState();
myFocusNode = FocusNode();
WidgetsBinding.instance.addPostFrameCallback((_){
FocusScope.of(context).requestFocus(myFocusNode);
});
}
@override
void dispose() {
// Clean up the focus node when the Form is disposed.
myFocusNode.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: TextField(
//autofocus: true,
focusNode: myFocusNode,
),
),
);
}
}
This bug has been fixed, but as yet, the fix is not in the stable channel ( https://github.com/flutter/flutter/issues/52221 ).此错误已修复,但到目前为止,修复程序不在稳定频道 ( https://github.com/flutter/flutter/issues/52221 ) 中。 If your project allows, you can switch to the dev channel (>1.15) and just use the autofocus.
如果您的项目允许,您可以切换到开发频道(>1.15)并使用自动对焦。
From the command line:从命令行:
flutter channel dev
flutter upgrade
Rebuild your project, and it should work.重建您的项目,它应该可以工作。
in 2020 and this error still occurs even in dev channel...
在 2020 年,即使在开发频道中仍然出现此错误...
my bad, it is working.我不好,它正在工作。 My variable was null and got the error, sorry
我的变量为空并出错,抱歉
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.