只在两行上浮动包装内容，并滚动其余内容

Question

我只想将内容包装在两行上，并隐藏和滚动其余项目。

final list = [
"Zumba" , "Yoga" , "Body Buildeing", "Abs" , "Total Weight" ,
"Bodyweight Exercise" , "Total body fit"
];



Container(
height: 100,
child: Wrap(
direction: Axis.horizontal,
runAlignment: WrapAlignment.start,
crossAxisAlignment: WrapCrossAlignment.start,
runSpacing: 5.0,
spacing: 5.0,
children: list.map((item) {
return Card(
elevation: 5,
color: Colors.grey,
margin: EdgeInsets.symmetric(vertical: 5, horizontal: 5),
child: Container(
padding: EdgeInsets.symmetric(vertical: 5, horizontal: 10),
child: Text(item,
style: TextStyle(color: Colors.white, fontSize: 18, fontWeight: FontWeight.bold),
),
),
);
}).toList()
),
),

像这个iamage

https://drive.google.com/file/d/1RBVyam17Z0_dDrpMOpSO5ZLtj_dPkndf/view

Answer 1

您可以在水平滚动方向的Listview中使用一个Column with 2 Rows。

这是代码：

@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: ListView(scrollDirection: Axis.horizontal, children: [
Column(
children: [
Row(
children: getCards(),
),
Row(
children: getCards(),
)
],
)
]),
),
),
);
}
List<Widget> getCards() {
final list = [
"Zumba",
"Yoga",
"Body Buildeing",
"Abs",
"Total Weight",
"Bodyweight Exercise",
"Total body fit"
];
return list.map((item) {
return Card(
elevation: 5,
color: Colors.grey,
margin: EdgeInsets.symmetric(vertical: 5, horizontal: 5),
child: Container(
padding: EdgeInsets.symmetric(vertical: 5, horizontal: 10),
child: Text(
item,
style: TextStyle(
color: Colors.white, fontSize: 18, fontWeight: FontWeight.bold),
),
),
);
}).toList();
}

更新：

我修改了代码，使您的列表分为两行，一半在第一行，另一半在第二行。

我在列中添加了一个crossAxisAlignment，以便在左侧对齐行。

@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: ListView(scrollDirection: Axis.horizontal, children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: getCards(),
)
]),
),
),
);
}
List<Widget> getCards() {
final list = [
"Zumba",
"Yoga",
"Body Buildeing",
"Abs",
"Total Weight",
"Bodyweight Exercise",
"Total body fit"
];
List<Widget> res = [];
res.add(Row(
children: list.sublist(0, list.length ~/ 2 + 1).map((item) {
return Card(
elevation: 5,
color: Colors.grey,
margin: EdgeInsets.symmetric(vertical: 5, horizontal: 5),
child: Container(
padding: EdgeInsets.symmetric(vertical: 5, horizontal: 10),
child: Text(
item,
style: TextStyle(
color: Colors.white, fontSize: 18, fontWeight: FontWeight.bold),
),
),
);
}).toList()));
res.add(Row(
children: list.sublist(list.length ~/ 2 + 1).map((item) {
return Card(
elevation: 5,
color: Colors.grey,
margin: EdgeInsets.symmetric(vertical: 5, horizontal: 5),
child: Container(
padding: EdgeInsets.symmetric(vertical: 5, horizontal: 10),
child: Text(
item,
style: TextStyle(
color: Colors.white, fontSize: 18, fontWeight: FontWeight.bold),
),
),
);
}).toList()));
return res;
}