具有无限滚动的两行或更多行的Flutter水平ListView

Question

我已经尝试了几次，但似乎带有scrollDirection的ListView.Builder：Axis.horizo​​ntal，只能有一行空间。

是否可以将其分成两行或更多行？

Answer 1

您可以在水平 SingleChildScrollView 小部件中使用垂直包裹小部件，但不要忘记用小宽度的 Container 将整个东西包围起来 试试这个 ： screenshot

Widget buildCatigoriesList(List catigoryList) {

return Container(
  height: 100,
  child: SingleChildScrollView(
    scrollDirection: Axis.horizontal,
    child: Wrap(
      spacing: -1,
      direction: Axis.vertical,
      children: catigoryList
          .map((element) => Container(
              // margin: EdgeInsets.symmetric(horizontal: 5),
              width: 130,
              height: 40,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(25)),
                color: Colors.grey,
              ),
              margin: EdgeInsets.all(5),
              padding: EdgeInsets.all(5),
              child: AutoSizeText(
                element.title,
                maxFontSize: 12,
                minFontSize: 10,
                textAlign: TextAlign.center,
              )))
          .toList(),
    ),
  ),
);

}

Answer 2

是的，您需要拆分组件并添加第二个列表视图

Answer 3

您可能要尝试使用此插件：Flutter Staggered Grid View

在您的情况下，您可以水平进行以下操作：