在Flutter的SearchAnchor/SearchBar中等价的onSubmitted回调是什么?

huangapple go评论84阅读模式
英文:

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 &#39;package:flutter/material.dart&#39;;

class SearchView extends StatefulWidget {
  const SearchView({super.key});

  @override
  State&lt;SearchView&gt; createState() =&gt; _SearchViewState();
}

class _SearchViewState extends State&lt;SearchView&gt; {
  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: () =&gt; 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(); // &lt;-- 在文本字段中按下回车键时执行某些操作
  },
  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(); // &lt;-- 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!

huangapple
  • 本文由 发表于 2023年5月29日 03:31:06
  • 转载请务必保留本文链接:https://go.coder-hub.com/76353281.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定