[英]Hide/Dismiss keyboard on ListView scroll in Flutter app
我在 Flutter 应用中有聊天窗口。 消息在ListView
小部件内显示为小部件,我还有附加到窗口底部的消息输入小部件。
我想要
ListView
时隐藏键盘InputWidget
添加新消息时滚动到最后一条消息代码:
class _MessagesPageState extends State<MessagesPage> {
final ScrollController listScrollController = ScrollController();
@override
Widget build(BuildContext context) {
return Scaffold(
....
body: Stack(
children: [
ListView.builder(
controller: listScrollController
....
),
InputWidget()]
);
}
class InputWidget extends StatelessWidget {
final TextEditingController _textEditingController = TextEditingController();
....
Row (
children: [
TextField(
controller: _textEditingController
),
IconButton(icon: ...., onPressed: (){})
]
)}
要在列表视图滚动时隐藏键盘,您只需向其添加keyboardDismissBehavior 。 例子
ListView(
keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.onDrag,
children: [],
)
至于你的第 1 点问题:
您可以为listScrollController
创建一个侦听器函数, listScrollController
包含对匿名FocusNode
的调用(想法取自此高度投票的答案),并且当发生任何滚动事件时,焦点将从您的TextField
获取,并且键盘将被解除:
class _MessagesPageState extends State<MessagesPage> {
final ScrollController listScrollController = ScrollController();
@override
void initState() {
listScrollController.addListener(_scrollListener);
super.initState();
}
_scrollListener() {
FocusScope.of(context).requestFocus(FocusNode());
}
@override
Widget build(BuildContext context) {
return Scaffold(
....
body: Stack(
children: [
ListView.builder(
controller: listScrollController
....
),
InputWidget(controller: listScrollController)]
);
}
第 2 点:
您会注意到我修改了InputWidget
以将ScrollController
作为参数,因此您可以将ListView
控制器传递给它。 而当IconButton
被按下时, listScrollController
会根据您的需要跳转到最后。
class InputWidget extends StatelessWidget {
InputWidget({Key key,this.controller}) : super(key: key);
final ScrollController controller ;
final TextEditingController _textEditingController = TextEditingController();
....
Row (
children: [
TextField(
controller: _textEditingController
),
IconButton(icon: ...., onPressed: (){
controller.jumpTo(controller.position.maxScrollExtent);
})
]
)}
很简单..按照这些步骤..
StatefullWidget
final ScrollController listScrollController = ScrollController();
ListView 应该是这样的:
ListView.builder( controller: listScrollController, reverse: true,
如果您像这样使用 firebase 更改顺序:
.orderBy('timestamp', descending: true)
在您的发送按钮中添加此代码
listScrollController.animateTo(0.0,duration: Duration(milliseconds: 300), curve: Curves.easeOut);
自动向上滚动你的 textField,在Stack
添加你的textField
和ListView
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.