具有省略号功能的 Flutter Wrap 小部件答案

【问题标题】：Flutter Wrap widget with ellipsis functionality具有省略号功能的 Flutter Wrap 小部件
【发布时间】：2021-03-10 07:07:14
【问题描述】：

我想在屏幕上显示一些带有文本的芯片。文本可以很小也可以很大。并且筹码的数量也可以是 5、10 等。所以我将筹码小部件列表包装在 Wrap 小部件中。

如下所示：

我希望带有文本 very very large text 的芯片位于第一行，并且它必须显示省略号，而不是转到下一行。对于文本非常非常非常非常大的文本也是如此。

我怎样才能做到这一点？

这是我正在使用的代码：

   Wrap(
     spacing: 6.0,
     children: [
       Chip(label: Text("text")),
       Chip(label: Text("large text")),
       Chip(label: Text("very large text")),
       Chip(label: Text("very very large text")),
       Chip(label: Text("very very very large text")),
       Chip(label: Text("very very very very large text"))
     ],
   )

【问题讨论】：

你的解释很生硬，需要的最终结果请更具体

标签： flutter

【解决方案1】：

没有默认的方式来省略Chip 小部件内的文本。更好的选择是将您的 Chip 包装在 Container 中，并具有这样的宽度限制。

 Container(
        constraints: BoxConstraints(maxWidth: 150.0),
        child: Chip(
            label: Text(
          "very very very very large text very large text 987636236",
          overflow: TextOverflow.ellipsis,
        ))),

您还可以使用媒体查询使maxWidth 属性动态化。如有疑问请告知。

干杯！！

【讨论】：

字面上不是:) @someuser