当我在 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 抛出错误
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): ════════════════════════════════════════════════════════════════════════════════════════════════════
为什么,我该如何解决这个问题?
我的 Flutter 版本:
[√] Flutter(Channel stable,v1.12.13+hotfix.5,在 Microsoft Windows [版本 10.0.18362.535],语言环境 en-US)[√] Android 工具链 - 为 Android 设备开发(Android SDK 版本 29.0.2) [√] Android Studio(版本 3.5) [√] VS Code(版本 1.41.0) [√] 连接的设备(1 个可用) • 未发现问题!
====================================================== =========================
即使在官方示例中也存在此问题https://flutter.dev/docs/cookbook/forms/focus
因为使用自动对焦,键盘首先出现,但文本字段仍然不存在
解决方法是使用
FocusNode
和 WidgetsBinding.instance.addPostFrameCallback
代码片段
@override
void initState(){
super.initState();
myFocusNode = FocusNode();
WidgetsBinding.instance.addPostFrameCallback((_){
FocusScope.of(context).requestFocus(myFocusNode);
});
}
完整代码
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,
),
),
);
}
}
此错误已被修复,但到目前为止,该修复尚未在稳定通道中(https://github.com/flutter/flutter/issues/52221)。 如果您的项目允许,您可以切换到开发频道(>1.15)并仅使用自动对焦。
从命令行:
flutter channel dev
flutter upgrade
重建你的项目,它应该可以工作。
如果您使用
focusNode
进行对焦,请考虑以下更改。
从此改变
late FocusNode myFocusNode;
@override
void initState() {
myFocusNode = FocusNode();
myFocusNode.requestFocus();
}
到
late FocusNode myFocusNode;
@override
void initState() {
myFocusNode = FocusNode();
WidgetsBinding.instance.addPostFrameCallback((_) {
FocusScope.of(context).requestFocus(myFocusNode); // request focus here
});
}