Flutter 文本颜色主题在 ListTile 标题下不起作用答案

【问题标题】：Flutter Text Color Theme doesn't work under ListTile titleFlutter 文本颜色主题在 ListTile 标题下不起作用
【发布时间】：2019-11-29 10:50:28
【问题描述】：

我刚开始使用 Flutter，只是在尝试一些东西。我设置了一个自定义主题，但是 ListTile 的 title 属性下的 Text Widgets 没有得到正确的颜色。此外，领先属性下的图标也没有得到正确的颜色。

我尝试设置一些其他颜色，并整理出来，问题只存在于该元素中。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MyApp',
      theme: ThemeData(
          primaryColor: Colors.black,
          scaffoldBackgroundColor: Color(0xff202020),
          cardTheme: CardTheme(color: Colors.black),
          textTheme: TextTheme(
              body1: TextStyle(color: Colors.white),
              subtitle: TextStyle(color: Colors.white),
              headline: TextStyle(color: Colors.white)),
          iconTheme: IconThemeData(color: Colors.white)),
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  HomePageState createState() => new HomePageState();
}

class HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("HomePage"),
          leading: IconButton(
              icon: Icon(Icons.arrow_back_ios),
              tooltip: "back to the last page.",
              onPressed: () {
                Navigator.pop(context);
              })
        ),
        body: Card(
          child: ListTile(
            title: Text("Test"),
            leading: new Icon(Icons.devices)
            ),
        ));
  }
}

标题的文本应该和图标一样显示为白色，而不是黑色。所有其他文本都是白色的。

【问题讨论】：

使用caption 而不是subtitle 属性为TextTheme 更改ListTile 的subtitle 颜色。

标签： flutter dart

【解决方案1】：

ListTile 上的title 正在使用 Theme 的 subhead textStyle。因此，如果您想在 ThemeData 上配置 ListTile 的颜色，您需要更改 subhead。

textTheme: TextTheme(
          subhead: TextStyle(color: Colors.white),
          ...)

【讨论】：

这很好用，尽管处于领先位置的图标仍然不受颜色变化的影响。尝试设置primaryIconTheme或alternateIconTheme之类的东西并没有解决这个问题。在其他任何地方，图标都得到了正确的颜色。
如果你想为 ListTile 配置主题，我建议你对当前的小部件使用 ListTileTheme 包装器，或者你可以使用 Theme.of(context).color.. 作为图标前导的颜色。 github.com/flutter/flutter/blob/master/examples/flutter_gallery/…
请注意，ListTile 使用的样式会根据它是否在抽屉中使用而有所不同，如果是抽屉，它将是“theme.textTheme.bodyText1”，请参见 _titleTextStyle() 方法，目前在这里：github.com/flutter/flutter/blob/…
@dangngocduc 副标题在颤振 2.5.2 中不再可用，所以我尝试了 TextTheme 的所有内容，但请提供任何想法

【解决方案2】：

为了使用你的主题，你需要使用 Theme.of(context)。

Container(
color: Theme.of(context).accentColor,
child: Text(
'Text with a background color',
style: Theme.of(context).textTheme.title,
 ),
);

在食谱中阅读更多关于它的信息。你在正确的轨道上 https://flutter.dev/docs/cookbook/design/themes

【讨论】：

这是否意味着我必须将主题单独应用于每个小部件，从而破坏了主题的意义？
你还是得告诉 Flutter 使用主题的哪一部分
主题化的重点是预定义您的应用调色板。例如看一下 ThemeData 构造函数。所有这些属性都可以预定义，因此您不必即时做出颜色决定。这将最大限度地减少潜在的设计错误并节省您的时间。 api.flutter.dev/flutter/material/ThemeData-class.html

【解决方案3】：

只需在以下位置将body1改为bodyText1即可：

C:\src\flutter.pub-cache\hosted\pub.dartlang.org\charts_flutter-0.9.0\lib\src\behaviors\legend\legend_entry_layout

这将解决问题。

【讨论】：