flutter设备图标颜色与字体颜色相同自动适配明与暗的模式
以下内容为AI生成,非原创。亲测可用。
在 Flutter 中,如果你希望 Icon
的颜色跟随当前主题的常用文字颜色,可以这样做:
1️⃣ 使用 DefaultTextStyle
的颜色
Icon(Icons.arrow_forward_ios,size: 16,color: DefaultTextStyle.of(context).style.color,
)
这样图标就会跟随当前文字颜色变化(比如深色模式/浅色模式)。
2️⃣ 使用主题中的文字颜色(推荐方式)
Flutter 的 Material 3 推荐使用 Theme.of(context).colorScheme.onSurface
作为常规文字颜色:
Icon(Icons.arrow_forward_ios,size: 16,color: Theme.of(context).colorScheme.onSurface,
)
onSurface
表示“表面上文字和图标”的颜色,和普通文字颜色一致。- 在深色模式下也能自动适配。
3️⃣ 如果你想跟随 ListTile 的文字颜色
如果这个图标是放在 ListTile
右侧的 trailing 图标,可以不设置 color
,它会自动继承文字颜色:
ListTile(title: Text('设备A'),trailing: Icon(Icons.arrow_forward_ios, size: 16),
)
如果你的页面主题是自定义的,我可以帮你给出一段 可以跟随主题动态变化的通用 Icon 组件,你希望我帮你写吗?