Flutter 标签字体下沉Bug

2021-09-07  本文已影响0人  RmondJone
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),
      )
上一篇 下一篇

猜你喜欢

热点阅读