dart Flutter -如何在搜索委托类中更改文本颜色?

bjp0bcyl  于 2023-05-26  发布在  Flutter
关注(0)|答案(6)|浏览(216)

我设法改变了hintStyle-颜色

@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

vwhgwdsa

vwhgwdsa1#

使用SearchDelegate,您可以自定义搜索的文本提示值和颜色以及查询的颜色和大小。要实现这一点:
搜索的文本提示值-->你可以覆盖 searchFieldLabel,它是一个字符串。

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

Search的color -->你可以用Theme类的hintColor属性覆盖:

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

查询的文本颜色和大小-->你需要覆盖delegate的 appBarTheme 方法并改变你所需要的。如果要更改查询的文本颜色,请设置headline 6textTheme

@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;
}
gv8xihay

gv8xihay2#

在应用ThemeData中更改headline6文本样式:

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

wooyq4lh3#

这就是我如何创建搜索委托主题:

@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

42fyovps

42fyovps4#

参考问题评论中的讨论,appBarThemetextTheme属性允许更改颜色。示例代码credit @Matthias
代码:
textTheme: TextTheme(title: TextStyle( color: Colors.white, fontSize: 18,),),

cmssoen2

cmssoen25#

所有这些关于textTheme属性的答案都会影响搜索页面其他部分的Text小部件。所以你最终会得到一些透明的文字在轻主题,因为文字颜色已与背景混合。
所以这是一个不完整的解决方案

fdbelqdn

fdbelqdn6#

我添加了hintColor:Colors.white行,它为我工作。

@override
ThemeData appBarTheme(BuildContext context) {
final ThemeData theme = Theme.of(context);
return theme.copyWith(
  primaryColor: Colors.blue,
  primaryIconTheme: theme.primaryIconTheme.copyWith(color: Colors.white),
  hintColor: Colors.white,
  
  textTheme: TextTheme(
    headline6: TextStyle(color: Colors.white,
    fontSize: 18)
    
  )
);

相关问题