英文:
Equivalent of onSubmitted callback in Flutter's SearchAnchor/SearchBar
问题
在Flutter的SearchAnchor/SearchBar小部件中输入搜索词时,按下回车键以提交搜索是很自然的。但是,没有明显的方法来监听这个事件。与TextField不同,没有像"onSubmitted"回调函数。
那么,我应该如何检测是否按下了回车键,以便关闭SearchAnchor/SearchBar并显示搜索结果呢?
注意:这个问题是关于在Flutter 3.10.0中首次发布的SearchBar/SearchAnchor小部件。
我已经检查了SearchAnchor/SearchBar的API,并尝试了各种方法来发现用户何时按下回车键,如下面的代码片段所示:
import 'package:flutter/material.dart';
class SearchView extends StatefulWidget {
const SearchView({super.key});
@override
State<SearchView> createState() => _SearchViewState();
}
class _SearchViewState extends State<SearchView> {
final searchController = SearchController();
@override
void initState() {
searchController.addListener(() {
// 当按下回车键时不会调用此方法。
});
super.initState();
}
@override
Widget build(BuildContext context) {
return SearchAnchor(
// 没有onSubmitted回调参数。
searchController: searchController,
builder: (context, controller) {
return SearchBar(
// 没有onSubmitted回调参数
onTap: () => controller.openView(),
controller: controller,
onChanged: (text) {
// 当按下回车键时不会调用此方法。
},
);
},
suggestionsBuilder: (context, controller) {
// 在controller.text中找不到回车字符。
return [];
},
);
}
}
如果您需要更多帮助,请随时提问。
英文:
When entering a search term in Flutter's SearchAnchor/SearchBar widget, it's natural to press the enter key to submit the search. There isn't an obvious way to listen for this event though. There isn't a "onSubmitted" callback like TextField has.
So, how can I detect when the enter key was pressed so I can close the SearchAnchor/SearchBar and show the search results?
Note: This question refers to the SearchBar / SearchAnchor widgets first released in Flutter 3.10.0
I've examined the SearchAnchor/SearchBar API and experimented with various approaches for discovering when the user taps the enter key, as noted in this code snippet:
import 'package:flutter/material.dart';
class SearchView extends StatefulWidget {
const SearchView({super.key});
@override
State<SearchView> createState() => _SearchViewState();
}
class _SearchViewState extends State<SearchView> {
final searchController = SearchController();
@override
void initState() {
searchController.addListener(() {
// Not called when enter key pressed.
});
super.initState();
}
@override
Widget build(BuildContext context) {
return SearchAnchor(
// No onSubmitted callback parameter.
searchController: searchController,
builder: (context, controller) {
return SearchBar(
// No onSubmitted callback parameter
onTap: () => controller.openView(),
controller: controller,
onChanged: (text) {
// Not called when enter key pressed.
},
);
},
suggestionsBuilder: (context, controller) {
// Enter character not found in controller.text
return [];
},
);
}
}
答案1
得分: 1
这是一个关于Flutter仓库的问题和相关的拉取请求,它实现了这个功能。
英文:
There is an issue and related pull request on Flutter's repo that implements this.
答案2
得分: -1
将您的文本字段/搜索栏/任何带有文本的部分包装在RawKeyboardListener
小部件中。文档在此处。
简而言之,您的代码将如下所示:
RawKeyboardListener(
focusNode: 与您的文本字段类型部件具有相同的焦点节点,
onKey: (key) {
if (key.isKeyPressed(LogicalKeyboardKey.enter)) enterPressed(); // <-- 在文本字段中按下回车键时执行某些操作
},
child: 您的子文本字段类型小部件
);
如果您想要在按下回车键时关闭文本字段类型的部分并清除文本,请执行类似于以下操作:
FocusScope.of(context).unfocus(); // 关闭键盘/取消文本字段类型小部件的焦点
textEditingController.clear(); // 清除文本
希望这有所帮助!
英文:
Wrap your textfield/searchbar/anything-with-text in a RawKeyboardListener
widget. Docs here.
In short, your code will look like this:
RawKeyboardListener(
focusNode: SAME FOCUS NODE YOUR TEXTFIELD-TYPE THING HAS,
onKey: (key) {
if (key.isKeyPressed(LogicalKeyboardKey.enter)) enterPressed(); // <-- do something here on enter key being pressed while in textfield
},
child: YOUR CHILD TEXTFIELD-TYPE WIDGET
);
If you want to close the textfield-type thing on the enter key being pressed and clear the text, do something like this:
FocusScope.of(context).unfocus(); // closes the keyboard/unfocuses textfield-type widget
textEditingController.clear(); // clears the text
Hopefully this helps!
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论