我有一个存储资产图像位置的列表。使用该列表,我可以并排显示网站中一定宽度的许多卡。
当列表中的项目增加时,该行将溢出。我希望这些卡片显示在下面,以便将其余卡片放在另一行。
我要将这一行返回到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()
答案 0 :(得分: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(),
)
答案 1 :(得分:0)
您可以使用GridView class,因为这样可以保留要在每行中显示的项目的数量。基本上GridView.count()
是适合您的一个。
要控制其中的物品数量,力量将由
赋予crossAxisCount
GridView()
增高,否则,您将看到很多错误。它需要一个父母身高arrayname.map((item) => Your_Widget()).toList().cast<Widget>()
myArray
用于虚拟表演。随时使用您的。这个想法是给您最好的选择 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>()
)
)
)
);
}
)
结果
随时尝试。