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

Posted 2023-02-23

【中文标题】如果 Flutter Row 溢出，则忽略子项

【英文标题】：Flutter Row ignore children if it overflows

【发布时间】：2019-06-13 16:38:22

【问题描述】：

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

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

P.S 一种剪辑溢出 Wrap 孩子的方法是我所追求的

【问题讨论】：

见：api.flutter.dev/flutter/widgets/ClipRect-class.html

【参考方案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