美文网首页
Flutter 标签字体下沉Bug

Flutter 标签字体下沉Bug

作者: RmondJone | 来源:发表于2021-09-07 12:00 被阅读0次
image.png
@override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 3,vertical: 1),
      decoration: BoxDecoration(
          color: widget.tagBackGroundColor,
          borderRadius: BorderRadius.circular(3)),
      child: Text(
        widget.tagString,
        textAlign: TextAlign.center,
        style: TextStyle(color: widget.tagTextColor, fontSize: 10),
      ),
    );
  }

测试阶段发现,标签在不同的机器上,标签的样式都不一样。如果什么都不设置就会导致字体偏下。基于之前的React开发经验,基本可以确定是字体行高导致的问题。但是Flutter Text组件没有直接设置行高的地方,这就比较蛋疼,后来找到了解决方案,只需Text设置strutStyle,指定fontSize和外层style设置的字体一致就可以了

 child: Text(
        widget.tagString,
        textAlign: TextAlign.center,
        strutStyle: StrutStyle(fontSize: 10),
        style: TextStyle(color: widget.tagTextColor, fontSize: 10),
      )

相关文章

网友评论

      本文标题:Flutter 标签字体下沉Bug

      本文链接:https://www.haomeiwen.com/subject/rbnuwltx.html