【问题标题】:Flutter/Material 3: AppBar ignores icon themesFlutter/Material 3:AppBar 忽略图标主题
【发布时间】:2023-01-08 09:07:58
【问题描述】:

在我的 AppBar 中,标题显示为白色文本,但图标是深灰色或其他颜色。 我也想让图标变成白色。

但是图标主题中的颜色没有效果!

不是直接添加到 AppBar 时......

Scaffold(
  appBar: AppBar(automaticallyImplyLeading: false,
      actionsIconTheme: IconThemeData(color: Colors.white),
      iconTheme: IconThemeData(color: Colors.white),

而且也不在主题中...

appBarTheme: AppBarTheme(
    backgroundColor: Colors.blue,
    foregroundColor: Colors.white,
    actionsIconTheme: IconThemeData(color: Colors.white),
    iconTheme: IconThemeData(color: Colors.white),

),

我想让主题正常工作!在图标上单独设置颜色不是一种选择。

我究竟做错了什么? Material 3 真的可以量产了吗?

谢谢!

注意:这是一个 Material 3 问题!在 Material 2 中,一切都按预期工作!

【问题讨论】:

    标签: flutter android-appbarlayout flutter-appbar flutter-theme material3


    【解决方案1】:

    我测试了你的代码,一切似乎都有效,你确定你没有向onPressed提供空值吗?这样它可能是disabled

    child: Scaffold(
            appBar: AppBar(
              automaticallyImplyLeading: false,
              actionsIconTheme: IconThemeData(color: Colors.white),
              iconTheme: IconThemeData(color: Colors.white),
              title: const Text('Screen A'),
              actions: [
                IconButton(
                  icon: Icon(Icons.add),
                  onPressed: () {},
                ),
                const IconButton(
                  icon: Icon(Icons.add),
                  onPressed: null,
                )
              ],
            ),
    

    @编辑

    在 material3 中也有效 - 你确定你没有覆盖图标的主题吗?

    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          theme: ThemeData(
            useMaterial3: true,
            primarySwatch: Colors.blue,
          ),
          debugShowCheckedModeBanner: false,
          home: Scaffold(
            appBar: AppBar(
              automaticallyImplyLeading: false,
              actionsIconTheme: IconThemeData(color: Colors.white),
              iconTheme: IconThemeData(color: Colors.white),
              title: const Text('Screen A'),
              actions: [
                IconButton(
                  icon: Icon(Icons.add),
                  onPressed: () {},
                ),
                const IconButton(
                  icon: Icon(Icons.add),
                  onPressed: null,
                )
              ],
            ),
          ),
        );
      }
    }
    

    更新:

    你是对的 - 它不能正常工作:

    根据documentation,IconButton 的 Material3 正在为 Flutter 开发

    【讨论】:

    • 有趣的!不,按钮正在工作。他们只是颜色不对。你确定你用的是Material 3?
    • 好的,我创建了一个新的默认 Flutter 项目并将您的代码复制到其中,但我仍然没有得到带有白色图标的蓝色背景。事实上,背景是白色的,图标是黑色的(第二个 + 是灰色的,因为它被禁用了)。就像您添加的屏幕截图一样。所以你的例子也不起作用!白色图标颜色被忽略。
    • 您能否更改您的示例,使 AppBars 背景为蓝色而文本和图标为白色?
    • 我已经为此报告了一个错误... github.com/flutter/flutter/issues/111339
    • 似乎已为下一次 Flutter 更新修复
    【解决方案2】:

    使用Theme 小部件包装您的AppBar 小部件,并在ThemeData 对象内将iconTheme 自定义为您的预期设计。

    例如:

    Theme(
        data: ThemeData(
            appBarTheme: const AppBarTheme(
                iconTheme: IconThemeData(color: ColorsPalette.white),
            ),
        ),
        child: AppBar(
            automaticallyImplyLeading: false,
            ...
        )
    )
    

    【讨论】:

      猜你喜欢
      • 2021-12-06
      • 2021-10-03
      • 2019-10-07
      • 2021-05-16
      • 2018-10-22
      • 2021-12-19
      • 1970-01-01
      • 1970-01-01
      • 2019-12-30
      相关资源
      最近更新 更多