我用TextFormField收集用户输入,当用户按下FloatingActionButton表示他们已经完成时,我想解散屏幕上的键盘。
如何让键盘自动消失?
import 'package:flutter/material.dart';
class MyHomePage extends StatefulWidget {
MyHomePageState createState() => new MyHomePageState();
}
class MyHomePageState extends State<MyHomePage> {
TextEditingController _controller = new TextEditingController();
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(),
floatingActionButton: new FloatingActionButton(
child: new Icon(Icons.send),
onPressed: () {
setState(() {
// send message
// dismiss on screen keyboard here
_controller.clear();
});
},
),
body: new Container(
alignment: FractionalOffset.center,
padding: new EdgeInsets.all(20.0),
child: new TextFormField(
controller: _controller,
decoration: new InputDecoration(labelText: 'Example Text'),
),
),
);
}
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new MyHomePage(),
);
}
}
void main() {
runApp(new MyApp());
}
======解散键盘后,点击TextField =======
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () => FocusScope.of(context).unfocus(), //this will dismiss keyboard
child: Scaffold(
body: SafeArea(
.........
======滚动屏幕时关闭键盘=======
ListView(
keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.onDrag, //this will dismiss
children: [
..........
SingleChildScrollView小部件也有这个属性。
在Flutter中,一切都是一个小部件,我决定包装FocusScope.of(context).unfocus();在一个简短的实用程序小部件中实现。
只需创建KeyboardHider小部件:
import 'package:flutter/widgets.dart';
/// A widget that upon tap attempts to hide the keyboard.
class KeyboardHider extends StatelessWidget {
/// Creates a widget that on tap, hides the keyboard.
const KeyboardHider({
required this.child,
Key? key,
}) : super(key: key);
/// The widget below this widget in the tree.
final Widget child;
@override
Widget build(BuildContext context) {
return GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: () => FocusScope.of(context).unfocus(),
child: child,
);
}
}
现在,您可以用KeyboardHider小部件包装任何小部件(在使用好的IDE时非常方便),然后当您点击某个东西时,键盘将自动关闭。它与表单和其他可点击区域一起工作得很好。
class SimpleWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return KeyboardHider(
/* Here comes a widget tree that eventually opens the keyboard,
* but the widget that opened the keyboard doesn't necessarily
* takes care of hiding it, so we wrap everything in a
* KeyboardHider widget */
child: Container(),
);
}
}
对于Flutter版本2或最新版本:
由于颤振2零安全,这是最好的方法:
FocusManager.instance.primaryFocus?.unfocus();
注意:使用旧的方法会导致一些问题,如保持重建状态;
对于颤动版本< 2:
自Flutter v1.7.8+热修复。2、要走的路是:
FocusScope.of(context).unfocus();
评论一下PR:
现在#31909 (be75fb3)已经着陆,您应该使用
FocusScope.of(context).unfocus()代替
FocusScope.of(context).requestFocus(FocusNode()),因为FocusNodes
ChangeNotifiers,并且应该正确地处理。
- >不使用q r e̶̶̶̶̶u e̶s t F c o̶̶̶̶̶u s̶̶(F c o̶̶̶̶̶u s e N o d̶̶̶̶̶̶̶了。
F̶o̶c̶u̶s̶S̶c̶o̶p̶e̶.̶o̶f̶(̶c̶o̶n̶t̶e̶x̶t̶)̶.̶r̶e̶q̶u̶e̶s̶t̶F̶o̶c̶u̶s̶(̶F̶o̶c̶u̶s̶N̶o̶d̶e̶(̶)̶)̶;̶
在flutter文档中阅读有关FocusScope类的更多信息。
FocusScope.of(上下文).unfocus ();是行不通的。
这段代码为我工作在颤振2.2.3和零安全。
WidgetsBinding.instance?.focusManager.primaryFocus?.unfocus()
来源:https://github.com/flutter/flutter/issues/20227 # issuecomment - 512860882
例如,把这段代码放在MyAppState中,当整个应用程序触摸外部时应用隐藏键盘。
return GestureDetector(
onTap: () =>
WidgetsBinding.instance?.focusManager.primaryFocus?.unfocus(),
child: MaterialApp(
title: 'Flutter Demo',
theme: getTheme(),
home: _body(),
),
);