Flutter Text Color Theme在ListTile标题下不起作用

n8ghc7c1  于 2022-11-25  发布在  Flutter
关注(0)|答案(4)|浏览(233)

我刚开始使用Flutter,只是在尝试一些东西。我设置了一个自定义主题,但是ListTile的title属性下的文本小部件没有得到正确的颜色。leading属性下的图标也没有得到正确的颜色。
我试着设置一些其他的颜色,并整理出,问题只存在于该元素内。

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

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

tyg4sfes

tyg4sfes1#

ListTile上的 * 标题 * 正在使用主题的 * 副标题文本样式 *。因此,如果要配置ThemeData上的ListTile**的颜色,则需要更改 * 副标题 *。

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

k3fezbri2#

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

sdnqo3pr

sdnqo3pr3#

在我目前使用的Flutter 3中,titleMedium定义了ListTiletitle的文本样式。

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

例如上面的主题使主题相对较大。
Flutter团队应该为开发者提供这些风格的参考,目前你可以通过试错找到哪个风格对应哪个widget。

up9lanfz

up9lanfz4#

只需在以下位置将body 1更改为bodyText 1:
C:\src\flutter.pub-cache\hosted\pub.dartlang.org\charts_flutter-0.9.0\lib\src\行为\图例\图例条目布局
这将解决问题。

相关问题