如果 Flutter Row 溢出，则忽略子项

Question

如果 Row 溢出，如何计算或忽略 Row 的 Children 小部件。我不想使用 Wrap 将内容放到下一行，我想隐藏溢出的子小部件

Container(
                padding: EdgeInsets.only(top: 3.0),
                child: Row(
                  children: searchResult.serviceNames
                      .map((service) => getServiceLabels(service))
                      .toList(),
                ),
              ),

PS 一种剪切溢出的 Wrap 儿童的方法是我所追求的

Answer 1

如果您不想将子级包裹到下一行，您可以将溢出的小部件放在 a 中SingleChildScrollView，这样Row在这种情况下允许扩展到其外部边界而不溢出：

SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: Container(
        padding: EdgeInsets.only(top: 3.0),
        child: Row(
                  children: searchResult.serviceNames
                      .map((service) => getServiceLabels(service))
                      .toList(),
          ),
        ),
      ),
    );

实际上，如果您想完整地显示每个项目（意味着不会因为屏幕宽度不足而在中间被切断），根据屏幕尺寸，您有 2 个选项：

• 计算每个项目的宽度：

var itemWidth = MediaQuery.of(context).width // 3; // 3 is number of items you want to display

• 计算物品数量：

var itemNumbers = MediaQuery.of(context).width // 150; // 150 is the item's width you want to display