fluter 瀑布流布局

fluter 瀑布流布局

flutter_staggered_grid_view: ^0.4.0  0.7.0版本有些许问题 使用0.4.0版本

_onRefresh 下拉刷新 需要配合 RefreshIndicator 组件使用

_scrollController 监听滚动事件 上拉加载更多数据

_scrollController.addListener(() {
  if (_scrollController.position.pixels >=
      _scrollController.position.maxScrollExtent - 100) {
    // 到底部了，加载更多
    if (!isLoading && !isNoMore) {
      page++;
      getcartPageDataList();
    }
  }
});

Expanded(
  child: RefreshIndicator(
    onRefresh: _onRefresh,
    child: StaggeredGridView.countBuilder(
      controller: _scrollController,
      padding: EdgeInsets.only(left: 12, right: 12, top: 12),
      mainAxisSpacing: 8.0,
      crossAxisSpacing: 8,
      crossAxisCount: 4,
      // 交叉轴上的子项数量
      itemCount: DataList.length + 1,
      // 子项总数
      itemBuilder: (BuildContext context, int index) {
        if (index < DataList.length) {
          final item = DataList[index];
          return Container(
            decoration: BoxDecoration(
              color: Colors.white,
              border: Border.all(color: Colors.grey.shade300),
              borderRadius: BorderRadius.circular(8),
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Image.network(
                  item.goodsImg,
                  width: double.infinity,
                  height: 133,
                  fit: BoxFit.cover,
                ),
                const SizedBox(height: 4),
                Padding(
                  padding:
                      const EdgeInsets.symmetric(horizontal: 6),
                  child: Text(
                    item.goodsName,
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                    style: const TextStyle(
                        fontSize: 12, color: Colors.black),
                  ),
                ),
                const SizedBox(height: 4),
                Padding(
                  padding:
                      const EdgeInsets.symmetric(horizontal: 6),
                  child: Row(
                    children: [
                      Text(item.currencySymbol,
                          style: const TextStyle(fontSize: 12)),
                      Text(item.shopPrice,
                          style: const TextStyle(
                              fontSize: 12,
                              fontWeight: FontWeight.bold)),
                    ],
                  ),
                ),
                const SizedBox(height: 8),
              ],
            ),
          );
        } else if (index == DataList.length) {
          return Container(
            width: double.infinity,
            padding: const EdgeInsets.symmetric(vertical: 12),
            decoration: BoxDecoration(
                // color: Colors.white,
                // border: Border.all(width: 1, color: Colors.black),
                ),
            child: Center(
              child: CartPageDataList?.total == DataList.length
                  ? const SizedBox(
                      width: double.infinity,
                      child: Text(
                        'No more',
                        textAlign: TextAlign.center,
                        style: TextStyle(fontSize: 12),
                      ),
                    )
                  : SizedBox(
                      width: 14,
                      height: 14,
                      child:
                          CircularProgressIndicator(strokeWidth: 2),
                    ),
            ),
          );
        } else {
          return Text('');
        }
      },
      staggeredTileBuilder: (int index) => StaggeredTile.fit(
          index == DataList.length ? 4 : 2), // 所有项都使用相同的大小
    ),
  ),
),