Flutter - 如何更改搜索委托类中的文本颜色？答案

【问题标题】：Flutter - how to change textcolor in search delegate class?Flutter - 如何更改搜索委托类中的文本颜色？
【发布时间】：2020-09-30 23:42:16
【问题描述】：

我设法改变了hintStyle-color

@override
ThemeData appBarTheme(BuildContext context) {
  return ThemeData(
    primaryColor: kPrimaryColor,
    primaryIconTheme: IconThemeData(
      color: Colors.white,
    ),
    inputDecorationTheme: InputDecorationTheme(
      hintStyle:
        Theme.of(context).textTheme.title.copyWith(color: Colors.white),
    ),
  );
}

但是如果我在 appbar 搜索字段中输入一些内容，颜色仍然是黑色...

如何正确更改SearchDelegate 类中的textcolor？

【问题讨论】：

在appBarTheme 检查textTheme 属性。
我尝试添加textTheme: TextTheme(display2: TextStyle(color: Colors.white)),，但它不起作用。或者你的意思是别的什么@dev-aentgs？
尝试关注这个stackoverflow.com/questions/56277722/…
@Matthias 发现 this 有点相似，无需处理 appBarTheme
对不起@dev-aentgs，你的第一个建议是对的。我试图更改display2，但我需要更改title。我将 textTheme: TextTheme(title: TextStyle( color: Colors.white, fontSize: 18,),), 添加到 'appBarTheme 并且它起作用了。谢谢！。我想写一个答案，我可以接受：D

标签： flutter dart colors flutter-layout textcolor

【解决方案1】：

使用 SearchDelegate 您可以自定义搜索的文本提示值和颜色以及查询的颜色和大小。要实现这一点：

搜索的文本提示值 --> 你可以覆盖 searchFieldLabel 这是一个字符串。

@override
String get searchFieldLabel => 'Your Custom Hint Text...';

搜索的颜色 --> 您可以使用 Theme 类的 hintColor 属性覆盖：

@override
  ThemeData appBarTheme(BuildContext context) {
    return Theme.of(context).copyWith(
      hintColor: Colors.white,
    );
  }

查询的文本颜色和大小 --> 您需要覆盖委托的 appBarTheme 方法并更改您需要的内容。要更改查询的文本颜色，请设置 headline6 的 textTheme：

@override
ThemeData appBarTheme(BuildContext context) {
assert(context != null);
final ThemeData theme = Theme.of(context).copyWith(
  textTheme: TextTheme(
    headline6: TextStyle(
      color: Colors.white,
      fontSize: 18.0,
    ),
  ),
);
assert(theme != null);
return theme;
}

【讨论】：

【解决方案2】：

在您的应用程序ThemeData 中更改headline6 文本样式：

MaterialApp(
      theme: ThemeData(
      textTheme: TextTheme(
          headline6: TextStyle(color: 'Your Prefered Color'))
      ),
      home: Home()
    );

【讨论】：

【解决方案3】：

所有这些关于 textTheme 属性的答案都会影响搜索页面其他部分的 Text 小部件。所以你最终会在浅色主题中得到一些透明的文本，因为文本颜色已经与背景混合。

所以这是一个不完整的解决方案

【讨论】：

我使用了 search_page 库，你从主题中调用 copyWith() 并覆盖它的属性
但是当我们有多个主题比如darkTheme、lightTheme和blueTheme时，我们如何根据选择的主题来改变文本的颜色呢？因为这里的copyWith()方法context 只是一个常量，不会随着主题的变化而改变。
有一个 getter 方法来检测您当前使用的主题，然后返回适当的主题数据
我添加了新的答案，也解决了这个问题。

【解决方案4】：

这就是我为搜索代理设置主题的方式：

  @override
  ThemeData appBarTheme(BuildContext context) {
    return Theme.of(context).copyWith(
      inputDecorationTheme: searchFieldDecorationTheme,
      textTheme: Theme.of(context).textTheme.copyWith(
        headline6: TextStyle(color: Colors.white),
      ),
    );
  }

我复制全局 textTheme 样式，并仅覆盖特定标题。如需更多搜索样式（如提示颜色、搜索输入大小、输入下划线等），请使用 inputDecorationTheme。

【讨论】：

【解决方案5】：

参考问题 cmets 中的讨论，appBarTheme 的textTheme 属性允许更改颜色。示例代码信用@Matthias

代码：

textTheme: TextTheme(title: TextStyle( color: Colors.white, fontSize: 18,),),

【讨论】：

这似乎是评论而不是答案。拥有更多声望点，you will be able to post comments。也可以查看this article 来回答问题。
那是我的错@Aleksey Potapov。他在问题下的评论部分指出了这一点，因为它解决了我的问题，所以我让他写一个答案以便我接受。
好的，很高兴他帮助了你。我只是按照审核说明进行操作。