每日见闻之Flutter 怎么设置全局字体

411 阅读1分钟

1 在项目中添加字体文件,位置无所谓只要自己能找到

image.png

2 在yaml文件声明

fonts:
  - family: CalSans-Regular
    fonts:
      - asset: assets/fonts/CalSans-Regular.ttf

之后我们用的字体就是 CalSans-Regular

3 设置全局字体

3.1 在 MaterialApp 的theme设置

theme: ThemeData(
   fontFamily: "CalSans-Regular",

3.2 在Material 的 textStyle 设置

 Material(
  color: bgColor ?? const Color(0xFFECECF7),
  textStyle: const TextStyle(
    fontFamily: "CalSans-Regular"
  ),

等等等。。。

但是发现设置了之后,可能还是有部分不生效

4 为什么不生效呢?

@override
Widget build(BuildContext context) {
  final DefaultTextStyle defaultTextStyle = DefaultTextStyle.of(context);
  TextStyle? effectiveTextStyle = style;
  if (style == null || style!.inherit) {
    effectiveTextStyle = defaultTextStyle.style.merge(style);
  }
  if (MediaQuery.boldTextOf(context)) {
    effectiveTextStyle = effectiveTextStyle!.merge(const TextStyle(fontWeight: FontWeight.bold));
  }

上面的代码是Text 组建的build方法中的代码,注意这里 DefaultTextStyle,如果我们没有手动给Text的style 设置字体,那么就会使用这里返回的DefaultTextStyle 中的字体。

DefaultTextStyle.of(context) 这种代码大家应该很熟悉,就是向上查找找到第一个指定类型的 InheritedWidget。

在 Material MaterialApp 这些组件中设置字体,最终也是生成了一个DefaultTextStyle,包裹住了他的子组件。

如果你设置了字体但是不生效,大概率就是在组件链中被插入了DefaultTextStyle,导致没有应用你设置的字体。

同理如果你只是想让局部应用某种字体,那么你也可以嵌套一层DefaultTextStyle。