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

Question

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

我尝试设置一些其他颜色，并解决了问题仅存在于该元素中。

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)
            ),
        ));
  }
}

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

Answer 1

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

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

Answer 2

在我当前使用的 Flutter 3 中，

titleMedium

 定义了 

title

s 的 

ListTile

 的文本样式。

MaterialApp(
  theme: ThemeData(
    textTheme: Typography().black.copyWith(
      titleMedium: const TextStyle(
        fontSize: 32,
      ),
  ),
)

比如上面的主题，使得主题比较大。

Flutter团队应该为开发者提供这些风格的参考。目前，您可以通过反复试验找出哪种样式对应于哪种小部件。

Answer 3

为了使用你的主题，你需要使用 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

Answer 4

仅供参考... ListTile 上的文本和图标颜色由 ListTile.textColor 和 ListTile.iconColor 属性确定。这些似乎覆盖了文本样式属性中定义的颜色，例如 ListTile.titleTextStyle。

因此，在文本样式中使用什么颜色并不重要。

参见ListTile文档中的示例：

https://api.flutter.dev/flutter/material/ListTile-class.html

Answer 5

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

C:\src lutter.pub-cache\hosted\pub.dartlang.or