flutter 避免长断字

06odsfpq  于 2022-12-05  发布在  Flutter
关注(0)|答案(1)|浏览(142)

我有一个图标按钮,上面有图标和标题。按钮的标题来自API,是两个词的组合,有时候是两个以上的词的组合。比如中餐馆或墨西哥餐厅。有时候,如果名称太大,它会破坏“餐厅”一词,其他时候也会破坏名称。那么有没有什么方法可以解决这个问题,这样我就可以看到完整的名字而不破坏这个词呢?我试过使用它。

textOverflow: TextOverflow.ellipsis,

也尝试了最大线到2/3。但我没有得到想要的结果。
在大屏幕上,它的工作很好,我只有在小设备上才有问题。
有什么帮助或建议吗?谢谢。

IconButton(
    icon:  Icon(Icon.resutaurant),
    title: restaurantname,
    textOverflow: TextOverflow.ellipsis,
    onPressed: () {},
),
r7s23pms

r7s23pms1#

如果文本太长,超出了可用空间,您需要减小字体大小。这可以通过使用TextPainter手动计算所需的空间来完成,或者您可以选择一个现成的软件包(如auto_size_text)来为您管理。
在其最基本的形式中,可以这样使用它

AutoSizeText(
  'A really long String',
  style: TextStyle(fontSize: 30),
  maxLines: 2,
)

style参数用于在有足够空间时设置字体。如果要这样调用,请使用“目标字体大小”。
Github repository中提供了许多定制选项。
下面的动画取自上面链接的GitHub repo,它很好地展示了自动调整大小对文本的影响。当涉及到文本截断与字体大小调整的UX问题时,this question可以作为这个主题的介绍。

相关问题