前端开发进阶篇——Flutter实战之商城首页02

1. 轮播插件Siwiper介绍

        首先我们需要介绍的是首页顶部的轮播组件。我们需要使用flutter的轮播插件siwiper。下面是对其参数的介绍：

 2. 页面轮播模块编写

        页面效果：

        代码如下

            class SwiperDisplay extends StatelessWidget {

              final List swiperDataList;

              const SwiperDisplay({Key key, this.swiperDataList}) : super(key: key);

              @override

              Widget build(BuildContext context) {

                return Container(

                  height: ScreenUtil().setHeight(333),

                  width: ScreenUtil().setWidth(411),

                  child: Swiper(

                    itemCount: swiperDataList.length,

                    itemBuilder: (context, index) {

                      return Image.network("${swiperDataList[index]['image']}",

                          fit: BoxFit.fill);

                    },

                    autoplay: true,

                    pagination: new SwiperPagination(),

                  ),

                );

              }

            }

        在初始化SwiperDisplay类时，我们使用构造函数对于数据进行页面获取，存入swiperDataList中。在轮播页面构造时我们使用itemBuilder对于轮播图片数据进行逐一获取。并对轮播的参数进行了配置。

3. 顶部导航模块编写

        页面效果：

        代码如下:

            class TopNavigator extends StatelessWidget {

              final List navigatorList;

              const TopNavigator({Key key, this.navigatorList}) : super(key: key);

              Widget _gridViewItemUI(BuildContext context, item) {

                // print('进入导航...');

                // print(item);

                return InkWell(

                  onTap: () {

                    print("点击了导航...");

                  },

                  child: Column(

                    children: <Widget>[

                      Image.network(item['image'], width: ScreenUtil().setWidth(40)),

                      Text(item['title'])

                    ],

                  ),

                );

              }

              @override

              Widget build(BuildContext context) {

                // print("进入导航图片遍历");

                return Container(

                  height: ScreenUtil().setHeight(330),

                  padding: EdgeInsets.all(3.0),

                  child: GridView.count(

                    physics: NeverScrollableScrollPhysics(),

                    crossAxisCount: 5,

                    padding: EdgeInsets.all(4.0),

                    children: <Widget>[

                      // navigatorList.forEach((element) {

                      //    _gridViewItemUI(context,element);

                      // })

                      // return _gridViewItemUI(context, item)

                      _gridViewItemUI(context, navigatorList[0]),

                      _gridViewItemUI(context, navigatorList[1]),

                      _gridViewItemUI(context, navigatorList[2]),

                      _gridViewItemUI(context, navigatorList[3]),

                      _gridViewItemUI(context, navigatorList[4]),

                      _gridViewItemUI(context, navigatorList[5]),

                      _gridViewItemUI(context, navigatorList[6]),

                      _gridViewItemUI(context, navigatorList[7]),

                      _gridViewItemUI(context, navigatorList[8]),

                      _gridViewItemUI(context, navigatorList[9]),

                    ],

                  ),

                );

              }

            }

        我们还是利用TopNavigator类的构造函数进行页面数据获取，然后使用GridView布局进行页面布局，我们对于每行显示个数，间距进行了设置。由于GridView中的每一个组件第一样。所以我们抽离出了一个子组件方法用加载。返回的是InkWell组件，它的点击事件目前还未开发，它包括了一张图片和标题描述。其具体代码如下

         return InkWell(

                          onTap: () {

                            print("点击了导航...");

                          },

                          child: Column(

                            children: <Widget>[

                              Image.network(item['image'], width: ScreenUtil().setWidth(40)),

                              Text(item['title'])

                            ],

                          ),

                        );