flutter 瀑布流分頁 已實現

瀑布流插件：flutter_staggered_grid_view

參考：https://segmentfault.com/a/1190000019716289

說明：在瀑布流的上方還有很多ui內容，獨自封裝的瀑布流會使布局出現問題，本文方法使用LIstView中的刷新，接口調用是根據id來獲取最新數據，和參考的不太一樣，但是都可以用

 

頁面布局：

 

1.引入插件

import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

 

2.瀑布流組件及controller

ScrollController _scrollController = new ScrollController();

 

//  瀑布流
  Widget pubu() {
    return StaggeredGridView.countBuilder(
          shrinkWrap: true,
          controller: _scrollController,
          crossAxisCount: 4,
          crossAxisSpacing: 10,
          mainAxisSpacing: 10,
          itemCount: recommendPublishs.length,
          itemBuilder: (context, index) {
            return GestureDetector(
                  onTap: (){
                    NavigatorUtil.pushNamedWithParam(context, Routes.productdetail, recommendPublishs[index]['id']);
                  },
                  child: Container(
                      color: Colors.pink,
                      child: new Container(
                        color: Colors.white,
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Container(
                              margin: EdgeInsets.only(bottom: 10),
//                              color: Colors.orange,
                              child: FormFactory.netImg(recommendPublishs[index]['headImg'][0] ?? '',fit: BoxFit.fitWidth,height: null,width: null),
                            ),
                            Container(
                              margin: EdgeInsets.only(bottom: 10),
                              padding: EdgeInsets.only(left: 10, right: 10),
                              child:  Text(recommendPublishs[index]['title'], maxLines: 2, overflow: TextOverflow.ellipsis, style: TextStyle(fontSize: ScreenUtil().setSp(20)),),
                            ),
                            Container(
                              padding: EdgeInsets.only(left: 13, right: 13, bottom: 15),
                              child: Row(
                                children: [
                                  Expanded(
                                      child: Row(
                                        children: [
                                          Expanded(
                                            child: Row(
                                              children: [
                                                Text("¥", style: TextStyle(fontSize: ScreenUtil().setSp(17), color: Colors.red),),
                                                Text(recommendPublishs[index]['price']??'', style: TextStyle(fontSize: ScreenUtil().setSp(20), color: Colors.red),),
                                              ],
                                            ),
                                          ),

                                          Container(
                                            margin: EdgeInsets.only(left: 10),
                                            child: Text("已售1萬+", style: TextStyle(fontSize: ScreenUtil().setSp(17), color: Color(0xff777777)),),
                                          ),

//                                  Container(
//                                    margin: EdgeInsets.only(left: 10),
//                                    child: Text("2323付款"),
//                                  ),
                                        ],
                                      )
                                  ),
//                            IconButton(icon: Icon(Icons.more_horiz), onPressed: null)
                                ],
                              ),
                            ),
                          ],
                        ),

                      )
                  )
              );
          },
//        staggeredTileBuilder: (index) =>
//            StaggeredTile.count(2, index == 0 ? 2.9 : 2.9)

          staggeredTileBuilder: (index) =>
              StaggeredTile.fit(2) //自適應高度
      );
  }

 

3.下拉刷新

// 下拉刷新數據
  void _dataRequest(bool _beAdd) async{

    DioManager.get(Ajax.queryRecomendPublish, {"next": _id}, (result, resp) {
      var resultDataArr = result['data'];
      if (resultDataArr.length != 0) {
        for (var data in resultDataArr) {
          recommendPublishs.add(data);
          print("我應該要獲取到數據");
          print(recommendPublishs);
          print(data);
        }
        _id = result['next'];
        if (mounted) {
          setState(() {
            if (!_beAdd) {
              recommendPublishs.clear();
              recommendPublishs = resultDataArr;
            } else {
              recommendPublishs.addAll(resultDataArr);
            }
          });
        }
      }else{
       // _pucontroller.finishLoad(noMore: true);
      }
    });
  }

 

4.上拉加載

// 上拉加載數據
  Future<Null> _addMoreData() async {

    _dataRequest(true);
  }

 

5.在 initState()中

 _dataRequest(true); // 初始化加載
    
    _scrollController.addListener(() { if (_scrollController.position.pixels == _scrollController.position.maxScrollExtent) { _addMoreData(); // 上拉加載更多 print("我已經是最底部了，要從這里請求"); } });