Question

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

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

我要将这一行返回到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（）小部件下，整个列将返回到SingleChildScrollView（）

Answer 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(),
)

Answer 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>()
                )
              )
            )
          );
        }
      )

结果

随时尝试。

如果溢出，包装行小部件的内容

2 个答案: