美文网首页
Flutter_Web 多行Text行高异常

Flutter_Web 多行Text行高异常

作者: 倪大头 | 来源:发表于2020-04-03 14:51 被阅读0次

下面的代码是一个多行的Text,在移动端展示正常,在web端最后一行却被截取掉一块:

Container(
  margin: EdgeInsets.fromLTRB(0, 0, 0, 5),
  child: Text(
    content,
    style:
    TextStyle(fontSize: 15, color: hexColor('#666666')),
    softWrap: true,
    maxLines: 3,
  ),
),

iOS端:


image.png

Web端:


image.png

可以看到web端被截掉一块,不知是不是web端的适配还不太完善,Flutter版本是1.16.4

解决方法:
在TextStyle里加一个height字段,height是行高,值要填写字号的倍数,比如height: 1.1 height: 1.2:

Container(
  margin: EdgeInsets.fromLTRB(0, 0, 0, 5),
  child: Text(
    content,
    style:
    TextStyle(fontSize: 15, color: hexColor('#666666'), height: 1.1),
    softWrap: true,
    maxLines: 3,
  ),
),

再试一下就可以了


image.png

相关文章

网友评论

      本文标题:Flutter_Web 多行Text行高异常

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