iOS 15下 Flutter1.17.2版本Text组件默认文本变粗

1,675 阅读2分钟

前言

近期苹果系统发布了15.0版本,升级之后发现,APP中好多数字、英文突然变粗,如图所示:

flutter字体变粗示例图1.png

一、问题原因

经排查后发现是项目采用的flutter版本的问题,由于公司项目采用flutter_boost框架,且因为flutter_boost 3.0 beta版下APP中存在一些无法解决的问题,无法升级flutter框架版本固定在了1.17.2

Text组件中未设置fontWeight属性,查看源码发现,不设置的话默认fontWeight为 FontWeight.normal也就是FontWeight.w400,

在iOS15下,英文与数字会变粗,上图中,中文、英文、数字均在同一个Text下

Container(
  child: Text('我是子组件abc 13343'),
);

二、解决方案

尝试后发现通过设置fontWeight为FontWeight.w300 可跟之前接近,(跟Android下的FontWeight.w400比会稍微细一些)

如下是对比图,左边是安卓(由于截图时模拟器尺寸未调整一致,导致字体大小不同,原谅我的不严谨,[捂脸哭])

flutter字体变粗处理对比.png

那么问题来了,虽然找到了解决方法,但是APP中未设置fontWeight的Text组件太多了,挨个去找工作量巨大且容易有遗漏,那有没有全局统一改的方法呢,突然想到了,MaterialApp 中可通过builder设置全局字体不跟随系统字体变化的方法,那有没有方法设置fontWeight呢?

 @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(title: 'Flutter Demo Home Page'),
      builder: (context, widget) {
        return MediaQuery(
          //设置文字大小不随系统设置改变
          data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0, boldText: false),
          child: widget,
        );
      },
    );
  }

在MaterialApp的配置项中找了半天,没找到合适的方法。那怎么办呢,总不能真的要挨个去改吧。

三、最终方案

通过查资料发现,还有个DefaultTextStyle ,可以指定字体的默认样式,试了一下,发现可以生效,那他在嵌套的深层组件中生效吗,通过尝试发现,可以 (该奏乐了)

所以最终解决方案是,在每个页面的根组件外面包一层DefaultTextStyle

Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: DefaultTextStyle(// 在Scaffold外面包也不生效,所以只能在body中加
        style: TextStyle(
          fontWeight: Platform.isIOS ? FontWeight.w300 : FontWeight.normal,
          color: Colors.black
        ), 
        child: Text('组件 abc 1234')
      )
)

有的小伙伴会说这样也还是麻烦,需要挨个页面去改,确实,最好的方法当然是升级flutter,但是我们的项目由于各种原因无法升级,所以只能采用这个临时方案。有大神知道更好的方法吗?欢迎指正