如果溢出，则包装 Row 小部件的内容答案

【问题标题】：Wrapping contents of Row widget if overflowed如果溢出，则包装 Row 小部件的内容
【发布时间】：2020-07-31 19:56:27
【问题描述】：

我有一个存储资产图像位置的列表。使用该列表，我在网站内并排显示了许多特定宽度的卡片。

当列表中的项目增加时，行溢出。我希望这些卡片出现在下方，以便将其余卡片放在另一行中。

我将此行返回给 singleChildScrollView 父小部件。

Row(
   mainAxisAlignment: MainAxisAlignment.spaceEvenly,
   children: ProjectData.map((item) => Container(
                constraints: BoxConstraints(maxHeight: 320, maxWidth: 240),
                child: Card(
                  child: Image.asset(item.fileLoc),
           ),
       )).toList(),
    ),

这一行位于 Column() 小部件下，整个 Column 返回到 SingleChildScrollView()

【问题讨论】：

你想要发生什么？您想滚动以查看列表的其余部分，或者您希望列表扩展到多行？发布当前布局的图片或图表可能会有所帮助，而不仅仅是内部行。
我希望他们移到下一行。
嘿@KaranOwalekar 查看答案，根据您的场景，它具有最佳用例。随时查看，并分享您对此的宝贵反馈:)

标签： flutter flutter-layout

【解决方案1】：

使用Wrap widget：

在多个水平或垂直运行中显示其子级的小部件。

在你的情况下，你可以使用如下：

Wrap(
  spacing: 8.0, // gap between adjacent cards
  runSpacing: 4.0, // gap between lines
  children: ProjectData.map((item) => Container(
                constraints: BoxConstraints(maxHeight: 320, maxWidth: 240),
                child: Card(
                  child: Image.asset(item.fileLoc),
           ),
       )).toList(),
)

【讨论】：

谢谢！为了你的努力:)
还有一件事，我们可以指定一行显示的元素数量吗？
您可以使用GridView 并将其crossAxisCount 设置为每行中的元素数。 api.flutter.dev/flutter/widgets/GridView-class.html@KaranOwalekar
我使用 singleChildScrollView 作为父小部件，所以它会引发错误。
您需要将GridView 小部件的shrinkWrap 属性设置为true @KaranOwalekar

【解决方案2】：

您可以使用GridView class，因为您可以保留每行要显示的项目的数量。基本上GridView.count() 最适合你。

控制里面的物品数量，权力将由crossAxisCount给予

不要忘记给GridView() 提供高度，否则你会看到很多错误。它需要一个父高度
我们将项目传递为arrayname.map((item) => Your_Widget()).toList().cast<Widget>()
我已将我的myArray 用于虚拟表演目的。随意使用你的。我们的想法是为您提供最佳选择
如果您想探索SingleChildScrollView class，它会派上用场

     LayoutBuilder(
        builder: (BuildContext context, BoxConstraints viewportConstraints) {
          return SingleChildScrollView(
            child: ConstrainedBox(
              constraints: BoxConstraints(
                minHeight: viewportConstraints.maxHeight,
              ),
              child: Container(
                height: MediaQuery.of(context).size.height * 0.7,
                width: MediaQuery.of(context).size.width,
                child: GridView.count(
                  crossAxisCount: 2, // here you keep track of count
                  children: myArray.map((item) => Container(
                    margin: EdgeInsets.only(left: 15.0, right: 15.0, top: 15.0),
                    constraints: BoxConstraints(maxHeight: 320, maxWidth: 240),
                    decoration: BoxDecoration(
                      color: Colors.redAccent,
                      borderRadius: BorderRadius.circular(15.0)
                    )
                  )).toList().cast<Widget>()
                )
              )
            )
          );
        }
      )

结果

请随意尝试。

【讨论】：