Flutter - 更改 SearchDelegate 的搜索提示文本

Posted 2023-02-22

【中文标题】Flutter - 更改 SearchDelegate 的搜索提示文本

【英文标题】：Flutter - Change search hint text of SearchDelegate

【发布时间】：2019-06-28 08:19:47

【问题描述】：

在SearchDelegate 的当前实现中，没有更改提示文本的选项。当查询为空时，搜索屏幕会在查询字段中显示“搜索” 作为提示文本。

提示文本目前在第 395 行定义如下：

final String searchFieldLabel = MaterialLocalizations.of(context).searchFieldLabel;

不过，有一个existing issue to this subject reported。

我无法为此提出任何解决方案。 您知道该问题的任何解决方法吗？

【参考方案1】：

通过创建您自己的 DefaultMaterialLocalizations 类并将其传递给 MaterialApp 小部件来解决此问题：

void main() => runApp(SearchApp());

class SearchApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      localizationsDelegates: [
        CustomLocalizationDelegate(),
      ],
      home: Scaffold(
        appBar: AppBar(
          title: Text('Search demo'),
        ),
        body: Center(
          child: Builder(
            builder: (context) => MaterialButton(
              child: Text('Search'),
              onPressed: () => showSearch(
                context: context,
                delegate: DummyDelegate(),
              ),
            ),
          ),
        ),
      ),
    );
  


class DummyDelegate extends SearchDelegate<String> 
  @override
  List<Widget> buildActions(BuildContext context) => [];

  @override
  Widget buildLeading(BuildContext context) => IconButton(
    icon: Icon(Icons.close),
    onPressed: () => Navigator.of(context).pop(),
  );

  @override
  Widget buildResults(BuildContext context) => Text('Result');

  @override
  Widget buildSuggestions(BuildContext context) => Text('Suggestion');


class CustomLocalizationDelegate extends LocalizationsDelegate<MaterialLocalizations> 
  const CustomLocalizationDelegate();

  @override
  bool isSupported(Locale locale) => locale.languageCode == 'en';

  @override
  Future<MaterialLocalizations> load(Locale locale) => SynchronousFuture<MaterialLocalizations>(const CustomLocalization());

  @override
  bool shouldReload(CustomLocalizationDelegate old) => false;

  @override
  String toString() => 'CustomLocalization.delegate(en_US)';


class CustomLocalization extends DefaultMaterialLocalizations 
  const CustomLocalization();

  @override
  String get searchFieldLabel => "My hint text";

【讨论】：

太棒了。您能否建议我们如何更改搜索栏的提示文本颜色和光标颜色，因为它不采用主应用程序 ThemeData 中定义的值。

是的，ThemeData 有一个hintColor 属性。

是的，似乎没有办法覆盖光标颜色。有没有？我成功地覆盖了颜色以匹配主题的应用栏，但光标没有改变。

【参考方案2】：

目前 SearchDelegate 有一个可选成员“searchFieldLabel”来指定搜索字段的标签。 它应该看起来像这样：

  @override
  String get searchFieldLabel => 'custom label';

【讨论】：

这应该被检查为正确的答案。第一个是当您的应用中有两个或多个搜索时不起作用的解决方法。

一些改变提示文本样式的技巧？

@riccardogobbo 我打开了一个 PR (github.com/flutter/flutter/pull/54674)，因为 Flutter 目前缺少使用构造函数设置它的正确方法。目前只能使用此解决方法：***.com/questions/61194153/…

简单易行的解决方案！

【参考方案3】：

就提示颜色而言，如果您仍在寻找解决方案，HintColor 将不起作用。像这样使用 ThemeData 的 InputDecoration 属性：

inputDecorationTheme: InputDecorationTheme(hintStyle: Theme.of(context).textTheme.title.copyWith(color: Colors.white),)

【参考方案4】：

class SongSearch extends SearchDelegate<String> 
  SongSearch(
    String hintText = "Song Search",
  ) : super(
          searchFieldLabel: hintText,
          keyboardType: TextInputType.text,
          textInputAction: TextInputAction.search,
        );
.....

【参考方案5】：

您可以只扩展源类并在构造函数中覆盖其默认字段以定义您自己的字段值吗？

例如：

class CustomSearch extends SearchDelegate<String> 
    CustomSearch() : super(searchFieldLabel: "My own hint");

【参考方案6】：

使用 null-safety，您应该执行以下操作：

class MyDelegate extends SearchDelegate<String> 
  final String? hintText;
  MyDelegate(this.hintText);
  
  @override
  String? get searchFieldLabel => hintText;
  
  // Other overrides...

用法：

showSearch<String>(
  context: context,
  delegate: MyDelegate(hintText: 'My hint'),
);