flutter Swiper+GridView

嬌嫩的黃瓜發表於2019-01-25

flutter  Swiper+GridView

Swiper+GridView 巢狀在CustomScrollView中

    Widget _getShopView() {
    int page = 6; //一頁顯示的數量
    var container = Container(
      child: Center(
        child: Text("為你推薦"),
      ),
      height: 45,
      color: Color(0xFFF1f1f1),
    );
    if (_list_recommend == null || _list_recommend.length == 0) {
      return SliverToBoxAdapter(
        child: Column(children: <Widget>[
          container,
        ]),
      );
    }
    List<Widget> list = List();
    list.add(container);

    var itemCount = (_list_recommend.length * 1.0 / page).ceil();

    list.add(new Container(
        height: 370,
        color: Colors.white,
        child: new Swiper(
            itemBuilder: (BuildContext context, int index) {
              return new GridView.count(
                physics: new NeverScrollableScrollPhysics(), //禁止滑動
                crossAxisCount: 3,//一行顯示幾個
                children: _getIconItem(index == 0 ? 1 : index + 1, page),
                padding: const EdgeInsets.all(0), // padding 是防止GridView計算狀態列的高度
                childAspectRatio: 0.8,//GridView的寬高比
              );
            },
            pagination: new SwiperPagination(
                builder: DotSwiperPaginationBuilder(
                  color: Colors.black54,
                  activeColor: Colors.red,
                ),
                margin: EdgeInsets.only(top: 10, bottom: 10)),
            itemCount: itemCount,
            control: null,
            scrollDirection: Axis.horizontal,
            autoplay: false,
            loop: false,
            onTap: (index) => print('點選了第$index個'))));

    return SliverToBoxAdapter(
      child: Column(
        children: list,
        crossAxisAlignment: CrossAxisAlignment.stretch,
      ),
    );
  }
  
    List<Widget> _getIconItem(int index, int page) {
    List<Widget> list = List();
    for (var i = 0; i < _list_recommend.length; i++) {
      if ((index - 1) * page <= i && i < index * page) {
        list.add(new Padding(
          padding: EdgeInsets.only(left: 10, right: 10),
          child: new Container(
            child: new Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                new Image.network(
                  Api.getInstance().photo + _list_recommend[i].path,
                  width: 100,
                  height: 100,
                  fit: BoxFit.fill,
                ),
                new Text(
                  _list_recommend[i].name,
                  maxLines: 2,
                  overflow: TextOverflow.ellipsis,
                  style: TextStyle(fontSize: 12),
                ),
                new Text(
                  "¥${_list_recommend[i].priceM}",
                  softWrap: false,
                  overflow: TextOverflow.ellipsis,
                ),
              ],
            ),
            width: 100,
          ),
        ));
      }
    }
    return list;
  }


複製程式碼

相關文章