Flutter_Web 多行Text行高异常

2020-04-03  本文已影响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
上一篇 下一篇

猜你喜欢

热点阅读