flutter设备图标颜色与字体颜色相同自动适配明与暗的模式

以下内容为AI生成,非原创。亲测可用。


在 Flutter 中,如果你希望 Icon 的颜色跟随当前主题的常用文字颜色,可以这样做:

1️⃣ 使用 DefaultTextStyle 的颜色

dart 复制代码
Icon(
  Icons.arrow_forward_ios,
  size: 16,
  color: DefaultTextStyle.of(context).style.color,
)

这样图标就会跟随当前文字颜色变化(比如深色模式/浅色模式)。


2️⃣ 使用主题中的文字颜色(推荐方式)

Flutter 的 Material 3 推荐使用 Theme.of(context).colorScheme.onSurface 作为常规文字颜色:

dart 复制代码
Icon(
  Icons.arrow_forward_ios,
  size: 16,
  color: Theme.of(context).colorScheme.onSurface,
)
  • onSurface 表示"表面上文字和图标"的颜色,和普通文字颜色一致。
  • 在深色模式下也能自动适配。

3️⃣ 如果你想跟随 ListTile 的文字颜色

如果这个图标是放在 ListTile 右侧的 trailing 图标,可以不设置 color,它会自动继承文字颜色:

dart 复制代码
ListTile(
  title: Text('设备A'),
  trailing: Icon(Icons.arrow_forward_ios, size: 16),
)

如果你的页面主题是自定义的,我可以帮你给出一段 可以跟随主题动态变化的通用 Icon 组件,你希望我帮你写吗?