Flutter Wrap + List.generate网格布局

原创已于 2023-04-06 14:15:04 修改 · 845 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #android

于 2022-11-14 12:35:30 首次发布

本文介绍如何在Flutter中利用Wrap组件结合List.generate方法，实现灵活的网格布局效果。通过调整参数，你可以轻松创建不同列数的响应式网格，适应不同设备屏幕尺寸。

int _selectPosition = -1;
List<ExpUserCellList> _latticeList = [];
Container(
      alignment: Alignment.topCenter,
      margin: EdgeInsets.only(top: 60.w),
      child: Wrap(
        crossAxisAlignment: WrapCrossAlignment.start,
        alignment: WrapAlignment.start,
        spacing: 20.w,
        runSpacing: 20.w,
        children: List.generate(_latticeList.length, (index) {
          return GestureDetector(
            child: Container(
              alignment: Alignment.center,
              width: Utils().screenWidth(context) * 0.22,
              height: 68.w,
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(5),
                  color: _selectPosition == index?Colors.white:JadeColors.grey_5,
                  border: Border.all(width: 1,color: _selectPosition == index?JadeColors.blue_2:JadeColors.grey_5)
              ),
              child: Text('${_latticeList[index].num}${S.current.grid}',style: TextStyle(color: _selectPosition == index?JadeColors.blue_2 : _latticeList[index].cellPublishStatus == 0?JadeColors.grey_7:JadeColors.grey_2,fontSize: setFontSize(28),fontWeight: FontWeight.w600),),
            ),
            onTap: () {
              if(_latticeList[index].cellPublishStatus== 0){
                return;
              }
              setState(() {
                _selectPosition = index;
              });
            },
          );
        }),
      ),
    )