Flutter如何实现双行横向可滚动的分类列表（ListView/GridView改造）

改造实现方案 #

你只需要把原代码中的ListView.builder替换为GridView.builder，配置网格参数即可实现双行横向滚动效果，核心改动如下：

• 滚动方向保持Axis.horizontal不变
• 配置SliverGridDelegateWithFixedCrossAxisCount，设置crossAxisCount: 2指定双行布局
• 调整外层Container高度适配双行item的总高度
• 原有item的布局、点击逻辑完全不用修改

改造后完整代码 #

_catList() {
return Container(
  // 调整高度适配双行布局，可根据实际效果微调
  height: 270,
  child: GridView.builder(
    itemCount: catList.length < 10 ? catList.length : 10,
    scrollDirection: Axis.horizontal,
    shrinkWrap: true,
    physics: const AlwaysScrollableScrollPhysics(),
    // 网格布局配置
    gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 2, // 纵轴展示2行，实现双行效果
      crossAxisSpacing: 8, // 两行之间的垂直间距
      mainAxisSpacing: 10, // 同一行相邻item的水平间距
      childAspectRatio: 1.1, // 单个item的宽高比，可根据你的设计调整
    ),
    itemBuilder: (context, index) {
      return 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: ClipRRect(
                  borderRadius: BorderRadius.circular(25.0),
                  child: FadeInImage(
                    fadeInDuration: const Duration(milliseconds: 50),
                    image: NetworkImage(
                      catList[index].image,
                    ),
                    height: 100.0,
                    width: 100.0,
                    fit: BoxFit.cover,
                    imageErrorBuilder: (context, error, stackTrace) =>
                        erroWidget(100),
                    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,
              ),
            ],
          ),
        );
    },
  ),
);
}

如果出现item显示挤压的情况，微调childAspectRatio和外层Container的高度即可适配你的设计效果。

内容的提问来源于stack exchange，提问作者soma