Question

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

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

P.S是一种剪辑溢出的Wrap子项的方法，

Answer 1

使用OverflowBox类：

https://docs.flutter.io/flutter/widgets/OverflowBox-class.html

另请参阅：

RenderConstrainedOverflowBox，了解有关如何呈现OverflowBox的详细信息。
SizedOverflowBox，这是一种特定大小的小部件，但是将其原始约束传递给了它的子项，然后该子项可能会溢出。
UnconstrainedBox，一个试图让其子项不受限制绘制的容器。

Answer 2

如果您不想将子级包装到下一行，您可以将溢出的小部件放在 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

Flutter Row如果溢出则忽略子级

2 个答案: