如何在 Flutter 中制作具有两行的水平 ListView？

Question

我试图在水平 GridView 或 ListView 内的两行中显示目录列表
而不是单行，列表数据来自服务器 水平 ListView 与一行工作正常 我怎样才能像下面的 GIF 一样做到这一点？

下面的图片我有什么

下面的 gif 我需要什么

[

下面的完整代码水平 ListView 与一行工作正常，我需要将其转换为 GridView 以便它可以显示两行和水平滚动

_catList() {
return Container(
  height: 150,
  child: ListView.builder(
    itemCount: catList.length < 10 ? catList.length : 10,
    scrollDirection: Axis.horizontal,
    shrinkWrap: true,
    physics: AlwaysScrollableScrollPhysics(),
    itemBuilder: (context, index) {
      return Padding(
        padding: const EdgeInsetsDirectional.only(end: 10),
        child: GestureDetector(
          onTap: () async {
            if (catList[index].subList == null ||
                catList[index].subList.length == 0) {
              await Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => ProductList(
                        name: catList[index].name,
                        id: catList[index].id,
                        tag: false,
                        updateHome: widget.updateHome),
                  ));
              if (mounted) setState(() {});
            } else {
              await Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => SubCat(
                        title: catList[index].name,
                        subList: catList[index].subList,
                        updateHome: widget.updateHome),
                  ));
              if (mounted) setState(() {});
            }
          },
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Padding(
                padding: const EdgeInsetsDirectional.only(bottom: 5.0),
                child: new ClipRRect(
                  borderRadius: BorderRadius.circular(25.0),
                  child: new FadeInImage(
                    fadeInDuration: Duration(milliseconds: 50),
                    image: NetworkImage(
                      catList[index].image,
                    ),
                    height: 100.0,
                    width: 100.0,
                    fit: BoxFit.cover,
                    imageErrorBuilder: (context, error, stackTrace) =>
                        erroWidget(100),

                    //  errorWidget: (context, url, e) => placeHolder(50),
                    placeholder: placeHolder(100),
                  ),
                ),
              ),
              Container(
                child: Text(
                  catList[index].name,
                  style: Theme.of(context).textTheme.caption.copyWith(
                      color: colors.fontColor,
                      fontWeight: FontWeight.w600,
                      fontSize: 15),
                  overflow: TextOverflow.ellipsis,
                  textAlign: TextAlign.center,
                ),
                width: 100,
              ),
            ],
          ),
        ),
      );
    },
  ),
);

}

Answer 1

你可以使用网格视图来归档这个东西。这是配置的sn-p。

GridView.count(
                  shrinkWrap: true,
                  crossAxisCount: 2,
                  physics: const ClampingScrollPhysics(),
                  scrollDirection: Axis.horizontal,
                  crossAxisSpacing: 10,
                  mainAxisSpacing: 20,
                  children: ...)

这里 crossAxisCount: 2,scrollDirection: Axis.horizontal是你需要的。

Answer 2

您可以将ListView.builder 与itemCount: catList.length/2 一起使用，并返回带有两个项目（索引和索引+1）的Column

或使用GridView.count:

Container(
  height: 150,
  child: GridView.count(
    shrinkWrap: true,
    scrollDirection: Axis.horizontal,
    crossAxisCount: 2,
    children: catList.isEmpty ? [Container()] : catList.map((cat) {
      return Padding(
        padding: const EdgeInsetsDirectional.only(end: 10),
         child: GestureDetector(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Padding(
                padding: const EdgeInsetsDirectional.only(bottom: 5.0),
                child: new ClipRRect(
                  borderRadius: BorderRadius.circular(25.0),
                  child: new FadeInImage(
                    fadeInDuration: Duration(milliseconds: 50),
                    image: NetworkImage(
                      cat.image,
                    ),
                    height: 100.0,
                    width: 100.0,
                    fit: BoxFit.cover,
                    imageErrorBuilder: (context, error, stackTrace) =>
                        erroWidget(100),
                    placeholder: placeHolder(100),
                  ),
                ),
              ),
              Container(
                child: Text(
                  cat.name,
                  style: Theme.of(context).textTheme.caption.copyWith(
                      color: colors.fontColor,
                      fontWeight: FontWeight.w600,
                      fontSize: 15),
                  overflow: TextOverflow.ellipsis,
                  textAlign: TextAlign.center,
                ),
                width: 100,
              ),
            ],
          ),
        ),
      );
    }).toList(),
  ),
);