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

Question

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

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

P.S 一种剪切溢出的 Wrap child 的方法是我所追求的

Answer 1

如果您不想将子元素包装到下一行，可以将溢出的小部件放在 SingleChildScrollView 中。允许 Row在这种情况下，扩展到其外边界而不溢出:

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

实际上，如果您想完整地显示每个项目(意味着不会因为屏幕宽度不足而在中间被截断)，根据屏幕尺寸，您有两个选择:

计算每一项的宽度:

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