flutter 仿网易严选（二）

花了3天时间完成了首页和个人中心主页面，目前完成情况：

首页：

首页.gif

个人中心： 个人中心.PNG

实际效果可以去WXYX_HC下载demo，建议使用真机flutter run --release模式跑，模拟器跑debug会很卡，可能我的列表写法不够优化，有大手子可以提下改进意见。

个人中心没啥好说的，主要就是listView从上到下包各种widget，很简单。

主要说说首页的布局。

1. 开始前先说下Json的解析，我使用的是一个工具网址Json to Dart,可以把抓包过来的Json数据转换dart的model类，使用比较简单，你也可以使用一些Json解析的第三方package。

2. 接下来是图片缓存，Image.network()可以从网络加载图片，但并不会缓存到设备中，实际开发中图片还是要有硬盘缓存，确保不会每次启动app都重新请求，我使用了cached_network_image来缓存图片。

3. 首页provide状态管理：
   首页的所有数据操作我都放在了provide里，每当有修改操作时，添加方法并调用notifyListeners()，外界的provide<HomeProvide>会接收通知并重新build。

class HomeProvide with ChangeNotifier {
  int searchCount;//搜索框数量
  HomeModel homeModel;//首页主要model
  HomeGroupModel groupModel;//拼团model
  HomeRecGoodsModel recGoodsModel;//推荐商品model
  Color searchBarBackColor = Color(0xFFAA3A1A);//搜索条默认背景色
  int lastItemId = 0; //推荐最后一个商品id，分页需要

//获取首页数据
  getHomeData() async {
    lastItemId = 0;
    searchCount = 0;

    try {
      await Future.wait([
        //类别，banner，限时购买
        networkGet(api_home).then((val) {
          homeModel = HomeModel.fromJson(val);
        }),
        //搜索框数量
        networkGet(api_search_count).then((val) {
          searchCount = val['count'];
        }),
        //团购商品
        networkGetHostChange(api_group, paramas: {'orderType': 2, 'size': 16})
            .then((val) {
          groupModel = HomeGroupModel.fromJson(val);
        }),
        //推荐商品
        networkGet(api_rec, paramas: {'lastItemId': lastItemId, 'size': 20})
            .then((val) {
          recGoodsModel = HomeRecGoodsModel.fromJson(val);
          lastItemId = recGoodsModel.rcmdItemList.last.id;
        })
      ]).then((val) {
        notifyListeners();
      });
    } catch (e) {
      print(e);
    }
  }

  //改变搜索栏背景色
  changeSearchBarBackColor(color) {
    searchBarBackColor = color;
    notifyListeners();
  }

  //上拉加载商品推荐
  Future getRecommendGoods() async {
    var paramas = {'lastItemId': lastItemId, 'size': 20};
    try {
      await networkGet(api_rec, paramas: paramas).then((val) {
        recGoodsModel.rcmdItemList.addAll(HomeRecGoodsModel.fromJson(val).rcmdItemList);
        recGoodsModel.hasMore = HomeRecGoodsModel.fromJson(val).hasMore;
        lastItemId = recGoodsModel.rcmdItemList.last.id;
        notifyListeners();
      });
    } catch (e) {
      print(e);
    }
  }
}

首页可以分为顶部搜索、banner、类目、每日拼团、限时抢购、推荐。

1. 顶部搜索+banner

合在一起说，因为它有一个效果，搜索条背景色会根据banner的切换而改变。

• flutter_swiper的使用

class HomeBanner extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    HomeModel homeModel = Provide.value<HomeProvide>(context).homeModel;

    return Container(
      height: ScreenUtil().setHeight(350),
      child: Swiper(
        duration: 300,
        pagination: SwiperPagination(),
        itemCount: homeModel.focus.length,
        itemBuilder: (context, index) {
          return GestureDetector(
            onTap: () {
              //跳转webview
            },
            child: CachedNetworkImage(
                fit: BoxFit.cover,
                imageUrl: '${homeModel.focus[index].img}',
                placeholder: (context, url) {
                  return Image.asset(
                    'images/default_goods.jpeg',
                  );
                },
                errorWidget: (context, url, obj) {
                  return Image.asset(
                    'images/default_goods.jpeg',
                  );
                }),
          );
        },
        autoplay: true,
        onIndexChanged: (index) {
          //监听banner滑动，获取后台给的bannner对应颜色
          String color = homeModel.focus[index].backgroundColor;
          String tempColor = '0xFF' + color.substring(1);
          Provide.value<HomeProvide>(context)
              .changeSearchBarBackColor(Color(int.parse(tempColor)));
        },
      ),
    );
  }
}

• 顶部搜索条。AnimatedContainer是一个可以实现隐式动画的容器，这里会对背景色的切换执行渐变动画。

class HomeSearchBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Color backColor = Provide.value<HomeProvide>(context).searchBarBackColor;

    return Provide<HomeProvide>(
      builder: (context, child, val) {
        return AnimatedContainer(
          duration: Duration(milliseconds: 300),
          color: backColor,
          padding: EdgeInsets.fromLTRB(12, 12+ScreenUtil.statusBarHeight, 12, 8),
          child: Column(
            children: <Widget>[_title(), _searchBar(context)],
          ),
        );
      },
    );
  }

2. 类目

• 由GridView和底部滑动指示器组成，GridView的滑动方向是horizontal，副轴crossAxisCount是2，这里生成的排列效果跟真正的小程序有区别，因为这时候主轴其实是横向的，所以他item生成的顺序其实是从上到下，逐渐往右扩展。所以需要对拿到的列表数据处理一下。

• 滑动指示器需要监听GridView的滑动，需要使用ScrollController，给他添加监听方法。

    _scrollController.addListener(() {
      //监听滑动，传递滑动进度,刷新进度条
      setState(() {
        _process = _scrollController.position.pixels /
            _scrollController.position.maxScrollExtent;
      });
    });

3. 每日拼团、限时抢购

主要是水平listView的构建，这个没啥好说的。

Container(
    height: ScreenUtil().setWidth(230),
    padding: EdgeInsets.only(left: 15, right: 15),
    child: ListView.builder(
      scrollDirection: Axis.horizontal,
      itemExtent: ScreenUtil().setWidth(168),
      itemCount: homeModel.timePurchaseItems.itemList.length,
      itemBuilder: (BuildContext context, int index) {
        return _item(homeModel.timePurchaseItems.itemList[index]);
      },
    ),
  );

4. 商品推荐

这里使用了flutter_staggered_grid_view不规则瀑布流

  Widget _recommendView(context) {
    HomeRecGoodsModel homeRecGoodsModel =
        Provide.value<HomeProvide>(context).recGoodsModel;
    return Container(
      padding: EdgeInsets.fromLTRB(12, 10, 10, 10),
      child: StaggeredGridView.countBuilder(
        physics: NeverScrollableScrollPhysics(),
        shrinkWrap: true,
        crossAxisCount: 4,
        itemCount: homeRecGoodsModel.rcmdItemList.length,
        itemBuilder: (BuildContext context, int index) => new Container(
          color: Colors.white,
          child: _item(homeRecGoodsModel.rcmdItemList[index].categoryItem ??
              homeRecGoodsModel.rcmdItemList[index].pinItem),
        ),
        staggeredTileBuilder: (int index) => new StaggeredTile.fit(2),
        mainAxisSpacing: 10,
        crossAxisSpacing: 10,
      ),
    );
  }

5. 上拉加载

使用了flutter_easyrefresh,下面是主页入口的代码

注意点：

1. 要在切换tab后保持滑动视图的滑动状态，需要混入mixins AutomaticKeepAliveClientMixin，并重写 wantKeepAlive 。
2. 要在主页初始化ScreenUtil的设计图尺寸。

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage>
    with AutomaticKeepAliveClientMixin {
  EasyRefreshController _controller;

  @override
  bool get wantKeepAlive => true;

  @override
  void initState() {
    _controller = EasyRefreshController();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    //宽高自适应初始化
    ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);

    return Scaffold(
        body: FutureBuilder(
      future: _getHomeData(context),
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          return Provide<HomeProvide>(builder: (context, child, val) {
            return EasyRefresh(
              enableControlFinishLoad: true,
              controller: _controller,
              child: ListView(
                shrinkWrap: true,
                children: <Widget>[
                  HomeSearchBar(),
                  HomeBanner(),
                  HomeTopNavi(),
                  HomeGroup(),
                  HomeTimeBuy(),
                  HomeRecommend()
                ],
              ),
              onLoad: () async {
                HomeProvide homeProvide = Provide.value<HomeProvide>(context);
                await homeProvide.getRecommendGoods();
                _controller.finishLoad(
                    success: true, noMore: !homeProvide.recGoodsModel.hasMore);
              },
              footer: ClassicalFooter(
                bgColor: Colors.white,
                textColor: Colors.black,
                infoColor: Colors.black,
              ),
            );
          });
        } else {
          return Center(
            child: CircularProgressIndicator(),
          );
        }
      },
    ));
  }

  _getHomeData(context) async {
    await Provide.value<HomeProvide>(context).getHomeData();
    return '完成';
  }
}

主页大致就是以上这些内容了，还有一些小程序的小元素没实现，比较懒，有空补上，下一篇我会完成分类页面。

第一篇链接：flutter仿网易严选（一）
第二篇链接：flutter仿网易严选（二）
第三篇链接：flutter仿网易严选（三）
第四篇链接：flutter仿网易严选（四）

终：源码地址在我的github：WXYX_HC。，有什么问题可以在评论处留言，多多交流。