Flutter 仅在两行上抖动包裹内容，并滚动其余内容

我只想将内容包装在两行上，隐藏并滚动其余项目。如下图所示

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

---

您可以在滚动方向水平的Listview中使用一个包含两行的列

代码如下：

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

@覆盖
小部件构建（构建上下文）{
返回脚手架(
正文：中(
子：容器(
子项：列表视图（滚动方向：Axis.horizontal，子项：[
纵队(
儿童：[
划船(
儿童：getCards（），
),
划船(
儿童：getCards（），
)
],
)
]),
),
),
);
}
列出卡片（）{
最终名单=[
“尊巴”，
“瑜伽”，
“健身”，
“Abs”，
“总重量”，
“体重训练”，
“全身健康”
];
返回列表.map（（项）{
回程卡(
标高：5，
颜色：颜色。灰色，
边缘：边缘组。对称（垂直：5，水平：5），
子：容器(
填充：边缘组。对称（垂直：5，水平：10），
子：文本(
项目,，
样式：TextStyle(
颜色：Colors.white，fontSize:18，fontwweight:fontwweight.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;
  }

@覆盖
小部件构建（构建上下文）{
返回脚手架(
正文：中(
子：容器(
子项：列表视图（滚动方向：Axis.horizontal，子项：[
纵队(
crossAxisAlignment:crossAxisAlignment.start，
儿童：getCards（），
)
]),
),
),
);
}
列出卡片（）{
最终名单=[
“尊巴”，
“瑜伽”，
“健身”，
“Abs”，
“总重量”，
“体重训练”，
“全身健康”
];
列表res=[]；
res.add（第行）(
子项：list.sublist（0，list.length~/2+1）.map（（项）{
回程卡(
标高：5，
颜色：颜色。灰色，
边缘：边缘组。对称（垂直：5，水平：5），
子：容器(
填充：边缘组。对称（垂直：5，水平：10），
子：文本(
项目,，
样式：TextStyle(
颜色：Colors.white，fontSize:18，fontwweight:fontwweight.bold），
),
),
);
}).toList（））；
res.add（第行）(
子项：list.sublist（list.length~/2+1）.map（（项）{
回程卡(
标高：5，
颜色：颜色。灰色，
边缘：边缘组。对称（垂直：5，水平：5），
子：容器(
填充：边缘组。对称（垂直：5，水平：10），
子：文本(
项目,，
样式：TextStyle(
颜色：Colors.white，fontSize:18，fontwweight:fontwweight.bold），
),
),
);
}).toList（））；
返回res；
}

这两次显示相同的内容，我知道我不想多次显示该项目，但我没有处理该逻辑，因为这不是你的问题。你希望他们如何被分开？我将更新答案中的代码。谢谢@l-gangemi，我希望列表的一半显示在第一个列表视图中，其余部分显示在另一个列表视图中。在第一个列表中显示“ZunBA”、“瑜珈”、“身体构建”、“ABS”，并显示第二个列表中的其他项目。我编辑了代码，请考虑接受或至少对答案进行支持。