flutter RichText在iOS上文本显示问题

问题:

在Flutter中有一些场景会需要展示多格式的文本也就是富文本,这个时候我们可以使用RichText+TextSpan的方式来做展示。不过会发现iOS系统中如果设置字体显示很大,这里的文本显示就会很小。

先直接说解决方式:

用Text.rich来代替RichText

原因分析

问题的关键是textScaleFactor,代表字体缩放因子,是指每个逻辑像素对应的实际字体像素,例如如果textScaleFactor这个值是1.5,那么字体将会比指定的字体大小大50%

在Text.rich的实现中,最终构建widget仍然是RichText:

  Widget result = RichText(
      textAlign: textAlign ?? defaultTextStyle.textAlign ?? TextAlign.start,
      textDirection: textDirection, // RichText uses Directionality.of to obtain a default if this is null.
      locale: locale, // RichText uses Localizations.localeOf to obtain a default if this is null
      softWrap: softWrap ?? defaultTextStyle.softWrap,
      overflow: overflow ?? defaultTextStyle.overflow,
      textScaleFactor: textScaleFactor ?? MediaQuery.textScaleFactorOf(context),
      maxLines: maxLines ?? defaultTextStyle.maxLines,
      strutStyle: strutStyle,
      textWidthBasis: textWidthBasis ?? defaultTextStyle.textWidthBasis,
      textHeightBehavior: textHeightBehavior ?? defaultTextStyle.textHeightBehavior ?? DefaultTextHeightBehavior.of(context),
      text: TextSpan(
        style: effectiveTextStyle,
        text: data,
        children: textSpan != null ? <InlineSpan>[textSpan] : null,
      ),
    );

其中textScaleFactor是这样实现的:
textScaleFactor: textScaleFactor ?? MediaQuery.textScaleFactorOf(context),
如果传来的参数为空,则去用mediaQuery查询获得。

而直接使用RichText时,默认的textScaleFactor为1,不会随着系统字体设置而变化。

 RichText({
    Key key,
    @required this.text,
    this.textAlign = TextAlign.start,
    this.textDirection,
    this.softWrap = true,
    this.overflow = TextOverflow.clip,
    this.textScaleFactor = 1.0,
    this.maxLines,
    this.locale,
    this.strutStyle,
    this.textWidthBasis = TextWidthBasis.parent,
    this.textHeightBehavior,
  }) 

总结

从Text.rich和RichText的构造方式中也可以看出,Text.rich本身的实现也是调用RichText,不过有了更多默认属性的设置,这就给开发带来一些便利,特别是可以覆盖开发考虑不到的属性,因此在实际开发中,需要在Flutter中使用富文本时,开发中推荐使用Text.rich这种方式。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 跟随《Flutter实战·第二版》[https://book.flutterchina.club]学习,建议直接看...
    QYCD阅读 2,920评论 0 0
  • Text Widget “文本”小组件显示单个样式的文本字符串。字符串可能会跨越多行,也可能全部显示在同一行上,具...
    飞羽_ifeiyv阅读 4,290评论 0 2
  • 邂逅FLutter 万物皆是Widget 一般缩进2个空格 文字居中 Widget Center() Materi...
    JackLeeVip阅读 8,599评论 0 4
  • 原文在此,此处只为学习 Text Text文本属性如下所示 Text用于显示简单样式文本,它包含一些控制文本显示样...
    lltree阅读 3,919评论 0 0
  • 一、Widget Flutter设计思想,Everything is Widget。 Widget 是一个比较宽泛...
    磊Se阅读 3,964评论 0 1

友情链接更多精彩内容