颤音：richtext with darktheme

发布于 2025-01-26 02:20:58 字数 599 浏览 2 评论 0原文

在整个应用程序中，我使用一些RichText在两者之间的文本和显示小部件之间切换颜色。

例如，

RichText(
 text: TextSpan(text: 'text1', style: TextStyle(color: Colors.black), 
 children: [
   WidgetSpan(alignment: PlaceholderAlignment.middle, child: SomeWidget()),
   TextSpan(text: 'text2', style: TextStyle(color: Colors.blue),
   WidgetSpan(alignment: PlaceholderAlignment.middle, child: Icon(Icons.someIcon)),
   TextSpan(text: 'text3'),
  ]
));

现在的问题是，当切换到黑暗模式时，黑色测试与黑色背景形成鲜明对比，因此不可见。常规的文本（'一些文本'）小部件将默认情况下自动显示黑色，但会在黑暗模式下变为白色。使用richttext时，如何实现相同或类似的东西？

原文

I use some RichText throughout my application to switch colors between text and display widgets in between.

E.g.

RichText(
 text: TextSpan(text: 'text1', style: TextStyle(color: Colors.black), 
 children: [
   WidgetSpan(alignment: PlaceholderAlignment.middle, child: SomeWidget()),
   TextSpan(text: 'text2', style: TextStyle(color: Colors.blue),
   WidgetSpan(alignment: PlaceholderAlignment.middle, child: Icon(Icons.someIcon)),
   TextSpan(text: 'text3'),
  ]
));

The problem now is that when switching to dark mode, the black test is contrasted to a black background and thus invisible. The regular Text('some text') widget will automatically display black by default but will become white in dark mode. How can I achieve the same or something similar when using RichtText?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

心不设防 2025-02-02 02:20:58

好吧，您定义了RichText像这样：

textspan（text：'text1'，样式：textStyle（color：colors.black）

，您知道color 您传递给小部件的参数具有最高的优先级，因此，您的textspan始终是黑色

。

Theme.of(context).textTheme.bodyText2?.color

的此主题看起来像这样：

/// The default text style for [Material].
TextStyle? get bodyText2 => bodyMedium;

如果您使用此方法，textspan和常规text小部件通常应该具有相同的颜色。优先使用主题而不是硬编码颜色。

Well you defined your RichText like this:

TextSpan(text: 'text1', style: TextStyle(color: Colors.black)

As you know the color argument that you pass to a Widget has the highest priority, therefore, your TextSpan will always be black.

One solution is instead of hardcoding the color you can do this:

Theme.of(context).textTheme.bodyText2?.color

If we look at the definition of this theme it looks like this:

/// The default text style for [Material].
TextStyle? get bodyText2 => bodyMedium;

If you use this approach your TextSpan and normal Text widgets should have the same color. In general one should always prefer working with themes over hardcoding colors. If your user switches to dark mode the theme will switch too and therefore, all styles should be switched correctly as well.

回复收藏 0 原文

~没有更多了~