我正在纠结如何RichText
处理包含其他 RichText
的嵌套跨度实例。只要用户不更改手机的默认字体大小,它就可以正常工作。但是如果他们改变了显示字体大小,事情就会开始出错。
考虑我正在解析一些看起来像这样的 HTML 的情况:
<underline><italic><bold>xxxxx</bold></italic></underline>
从概念上讲,这可以建模为
TextSpan
里面TextSpan
里面TextSpan
,所以我可能有一些人为的代码,如下所示:class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
final inputText = 'The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.';
final initialSpan = TextSpan(text: inputText, style: TextStyle(color: Colors.black));
final boldText = _buildStyledElement(context, initialSpan, Style.bold);
final boldItalised = _buildStyledElement(context, WidgetSpan(child: boldText), Style.italic);
final boldItalisedUnderlined = _buildStyledElement(context, WidgetSpan(child: boldItalised), Style.underline);
return new Scaffold(
appBar: AppBar(title: Text('')),
body: Column(
children: [
Text(inputText), // a simple baseline to compare
boldText,
boldItalised,
boldItalisedUnderlined,
],
),
);
}
RichText _buildStyledElement(BuildContext context, InlineSpan span, Style style) {
// note we're not applying the style because it isn't important... the style parameter
// is just a means of wrapping our heads around a real-world example of nesting
return RichText(text: span);
}
}
正如你在左边看到的,正常字体大小看起来很棒,但在右边,三个
RichText
当您调整手机的字体大小时, shell 不会缩放。这很容易解释……因为
RichText
的默认比例因子是 1.0
所以没有缩放。让我们通过将创建代码更改为如下所示来解决这个问题:return RichText(text: span, textScaleFactor: MediaQuery.of(context).textScaleFactor);
正如你在下面看到的,普通字体看起来仍然不错,但是哇……由于
RichText
,事情真的很快扩大了。嵌套(我假设它将比例因子应用于已经缩放的 child )。现在,我发现的一件事是,如果我允许所有
RichText
使用 1.0
的比例因子创建的小部件,然后将最外层包裹在 RichText
中使用设备的比例因子,它/几乎/工作。例如,删除 _buildStyledElement
中的缩放比例并将这一行添加到主 Column
小部件:RichText(text: WidgetSpan(child: boldItalisedUnderlined), textScaleFactor: MediaQuery.of(context).textScaleFactor),
如您所见,正常字体大小看起来不错,实际上缩放到大字体的正确大小。然而,包装现在已经破了。
我假设这是因为 child 计算的大小
RichText
小部件(因为它们使用的比例因子为 1.0
)在使用媒体查询的比例因子时与总计算空间不匹配。Sooo...我想我的问题是是否有办法真正让它与嵌套的
RichText
一起正常工作实例。我知道对于这个特定的例子,可能还有其他一些选择……但我说的是一般情况,其中 RichText
小部件嵌入其他 RichText
小部件。任何想法将不胜感激。抱歉,帖子太长了。
最佳答案
尽管没有明确的解决方案,但我发现有一种解决方法对我的目的特别有用:
您需要将 Html Widget 的文本比例因子设置为固定为 1,并为 HTML 上的平均文本选择默认字体大小,将其乘以屏幕的当前比例因子(而不是手动固定)。
class ExampleWidget extends StatelessWidget {
final String data;
ExampleWidget({this.data});
@override
Widget build(BuildContext context) {
double scaleFactor = MediaQuery.of(context).textScaleFactor;
int standardFontSize = 14;
int h3FontSize = 18;
return MediaQuery(
data: MediaQueryData(textScaleFactor: 1),
child: Html(
data: data,
style: {
'body': Style(fontSize: FontSize(standardFontSize * scaleFactor)),
'h3': Style(fontSize: FontSize(h3FontSize * scaleFactor))
// other header fonts...
},
),
);
}
}
缺点是每次需要新的字体大小时都需要手动实现,但这可能会解决一个紧迫的问题。
关于flutter - 缩放嵌套 RichText 小部件以实现可访问性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62189595/