flutter ThemeData 应用

最新推荐文章于 2025-03-27 08:40:04 发布

weixin_46642112

最新推荐文章于 2025-03-27 08:40:04 发布

阅读量709

点赞数

分类专栏： flutter

本文链接：https://blog.youkuaiyun.com/weixin_46642112/article/details/116231465

版权

本文介绍了Flutter中如何运用ThemeData进行UI主题配置，包括iconTheme的Icon颜色设置，Theme组件在MaterialApp和页面中的应用，以及如何实现应用的暗黑模式适配。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.iconTheme
设置Icon的颜色，按钮、AppBar中的Icon无效

iconTheme: IconThemeData(
          color: Colors.red,
        )

2.Theme组件
我们可以用Theme组件来MaterialApp中的ThemeData
materialApp

MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        brightness: Brightness.dark,// 应用整体主题的亮度。用于按钮之类的小部件，以确定在不使用主色或强调色时选择什么颜色。
        // 与卡片和画布颜色形成对比的图标主题
        iconTheme: IconThemeData(
          color: Colors.yellow,
        ),
        primarySwatch: Colors.blue,// 定义一个单一的颜色以及十个色度的色块。
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    )

page1页面

Theme(
// 如果使用ThemeData这个组件，它会在当前组件内完全替代原来的主题；
  // 如果使用Theme.of(context).copyWith，它只会覆盖掉设置的这些主题属性
        data: ThemeData(
          iconTheme: IconThemeData(
            color: Colors.red,
          ),
        ),
        /*
        Theme.of(context).copyWith(
          iconTheme: IconTh