返回

从FontWeight.w500没有加粗效果说起，聊一聊Flutter中的文本加粗方法

Android

从FontWeight.w500没有加粗效果说起，聊一聊Flutter中的文本加粗方法

首先先看一张设计图，这是我们公司App中的一张设计图，因为要节省开发资源，设计师只针对iOS出一套设计图，然后Android和iOS实现相关的设计效果（Android也会在个别地方做一些微调）。从截

图上我们可以看到，这是一张“用户协议”页面，在“用户协议”这几个字下面，有一行小字“请仔细阅读并同意以下协议”，如果按照iOS的设计来，那么在Flutter中实现这两个Text文本应该是这样的：

Text(
  '用户协议',
  style: TextStyle(
    fontSize: 22,
    fontWeight: FontWeight.w500,
    color: Colors.black,
  ),
),
Text(
  '请仔细阅读并同意以下协议',
  style: TextStyle(
    fontSize: 16,
    fontWeight: FontWeight.w400,
    color: Colors.grey,
  ),
),

但是当你在Android手机上运行这个代码时，你会发现“用户协议”这几个字并没有加粗，而“请仔细阅读并同意以下协议”这几个字加粗了，这显然不是我们想要的效果。

于是我开始思考，为什么会出现这样的情况呢？我首先想到的是，可能是因为FontWeight.w500在Android系统中没有加粗效果，所以我查阅了Flutter的官方文档，发现确实是这样，FontWeight.w500在Android系统中没有加粗效果，只有FontWeight.w600、FontWeight.w700和FontWeight.w900才有加粗效果。

既然知道了原因，那么解决方法也很简单了，只要把FontWeight.w500改为FontWeight.w600、FontWeight.w700或FontWeight.w900就可以了。

Text(
  '用户协议',
  style: TextStyle(
    fontSize: 22,
    fontWeight: FontWeight.w600,
    color: Colors.black,
  ),
),
Text(
  '请仔细阅读并同意以下协议',
  style: TextStyle(
    fontSize: 16,
    fontWeight: FontWeight.w400,
    color: Colors.grey,
  ),
),

这样就可以实现我们想要的效果了。

除了FontWeight.w500、FontWeight.w600、FontWeight.w700和FontWeight.w900这几个值之外，Flutter中还有其他一些FontWeight值，这些值可以用来设置文本的粗细。这些值包括：

  • FontWeight.w100
  • FontWeight.w200
  • FontWeight.w300
  • FontWeight.w400
  • FontWeight.w500
  • FontWeight.w600
  • FontWeight.w700
  • FontWeight.w800
  • FontWeight.w900

这些值越大，文本就越粗。

在Flutter中，我们还可以通过Text widget的style属性来设置文本的粗细。Text widget的style属性是一个TextStyle对象，TextStyle对象有很多属性，其中就有fontWeight属性，fontWeight属性可以用来设置文本的粗细。

Text(
  '用户协议',
  style: TextStyle(
    fontSize: 22,
    fontWeight: FontWeight.bold,
    color: Colors.black,
  ),
),

上面的代码也可以实现文本加粗的效果，FontWeight.bold相当于FontWeight.w700。

除了上述方法之外，我们还可以通过Flutter的RichText widget来实现文本加粗的效果。RichText widget是一个可以包含多个TextSpan的widget，TextSpan widget是一个可以设置文本样式的widget。

RichText(
  text: TextSpan(
    children: [
      TextSpan(
        text: '用户协议',
        style: TextStyle(
          fontSize: 22,
          fontWeight: FontWeight.bold,
          color: Colors.black,
        ),
      ),
      TextSpan(
        text: '请仔细阅读并同意以下协议',
        style: TextStyle(
          fontSize: 16,
          fontWeight: FontWeight.normal,
          color: Colors.grey,
        ),
      ),
    ],
  ),
)

上面的代码也可以实现文本加粗的效果。

以上就是Flutter中实现文本加粗的几种方法，希望对大家有所帮助。