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

        首先我们对首页布局进行一个简单介绍，首页我们分为四部分：顶部轮播、顶部导航、新人专享、秒杀商品、火爆商品。它们分别作为一个类进行编写。

        页面整体效果如下：

1. 页面主体编写

        Widget build(BuildContext context) {

            return Scaffold(

              appBar: AppBar(

                title: Text('京东商城'),

              ),

              body: FutureBuilder(

                  future: getHomePageContent(),

                  builder: (context, snapshot) {

                    if (snapshot.hasData) {

                      List swiperDataList = snapshot.data['data']['swipers'];

                      List navigatorDataList = snapshot.data['data']['logos'];

                      List quickProductDataList =

                          snapshot.data['data']['quicksProduct'];

                      List newUserDataList = snapshot.data['data']['newUser'];

                      return SingleChildScrollView(

                          child: Column(

                        children: <Widget>[

                          SwiperDisplay(

                            swiperDataList: swiperDataList,

                          ),

                          TopNavigator(navigatorList: navigatorDataList),

                          NewUser(userImage: newUserDataList),

                          QuickProduct(quickProductList: quickProductDataList),

                          _hotGoods(),

                        ],

                      ));

                    } else {

                      return Center(

                        child: Text("加载中"),

                      );

                    }

                  }),

            );

          }

        因为们要使用接口返回的异步数据来动态更新UI，所以我们这里使用了FutureBuilder，它会根据所依赖的Future的状态来动态构建自身。它包括如下参数：

• future：FutureBuilder依赖的Future，通常是一个异步耗时任务。

• initialData：初始数据，用户设置默认数据。

• builder：Widget构建器。

        这里我们使用到了future用来加载后台接口数据，我们定义了一个Future组件getHomePageContent()。下面是其代码：

            Future getHomePageContent() async {

              try {

                // print('开始获取首页数据...............');

                Response response;

                Dio dio = new Dio();

                // dio.options.responseType = ResponseType.plain;

                response = await dio.post(servicePath['homePageContent']);

                if (response.statusCode == 200) {

                  // print("数据返回成功");

                  return response.data;

                } else {

                  throw Exception('后端接口出现异常，请检测代码和服务器情况.........');

                }

              } catch (e) {

                return print(e);

              }

            }

        这里我们使用了Dart的第三方Http请求库dio，我么使用它来访问我们定义的接口数据。由于页面数据请求路径众多，所以我们又进行了一次封装。serviceUrl 是我们在fastmock的远程URl，servicePath是具体不同数据的接口，下面是定义访问路径的具体代码：

        const serviceUrl =

            'https://www.fastmock.site/mock/66ea7ba7bd788d97c976b1c64065ebf9/shop_data';

        const servicePath = {

          'homePageContent': serviceUrl + '/HomePageData',

          'RecommendContent': serviceUrl + '/RecommendData',

          'CategoriesContent': serviceUrl + '/CategoriesData',

          'GoodContent': serviceUrl + '/GoodData',

        };

        当我们使用getHomePageContent()获取到数据时，我们就使用Widget构建器builder进行页面构建。构建器中的snapshot会包含当前异步任务的状态信息及结果信息 。我们通过snapshot.hasData来判断是否返回有数据，如果有我们对其返回的数据进行分模块存储，然后将数据传递到个模块组件进行页面构建。否则显示“加载中”。

       下面就是我们构建器需要返回的组件代码，我们分别用SingleChildScrollView滑动组件、Colum组件对顶部轮播、顶部导航、新人专享、秒杀商品，火爆商品模块进行包裹。

    return SingleChildScrollView(

                              child: Column(

                            children: <Widget>[

                              SwiperDisplay(

                                swiperDataList: swiperDataList,

                              ),

                              TopNavigator(navigatorList: navigatorDataList),

                              NewUser(userImage: newUserDataList),

                              QuickProduct(quickProductList: quickProductDataList),

                              _hotGoods(),

                            ],

                          ));

        以上是对商城首页的整体布局、代码组成进行了简单介绍，后面的文章将对其每一个页面模块进行介绍。