flutter 仿网易严选（四）

这篇主要完成商品详情页的功能，因为gif压缩图像有些差，真实效果背景无杂色：

首先分析整个页面效果，商品详情页最底部的部分是可以上拉加载的推荐商品模块，那么最好使用列表滑动加载实现，下面是商品详情页的结构：

Stack(
      children: <Widget>[
        CustomScrollView(
          controller: _scrollController,
          slivers: <Widget>[
            //商品轮播图
            SliverToBoxAdapter(
              child: GoodsDetailBanner(),
            ),
            //商品信息
            SliverToBoxAdapter(
              child: GoodsDetailHeader(),
            ),
            //配送及服务
            SliverToBoxAdapter(
              child: GoodsDetailInfo(),
            ),
            //广告
            SliverToBoxAdapter(
              child: GoodsDetailAdBanner(),
            ),
            //评论
            SliverToBoxAdapter(
              child: GoodsDetailComment(),
            ),
            //商品规格
            SliverToBoxAdapter(
              child: GoodsDetailAttrlist(),
            ),
            //商品展示图
            SliverToBoxAdapter(
              child: Html(
                data: val.goodsDetailModel.itemDetail['detailHtml'],
              ),
            ),
            //推荐商品列表
            // SliverList(
            //   delegate:
            //       SliverChildBuilderDelegate((BuildContext context, int index) {
            //     //这里可以写推荐商品实现，参考类别页面实现
            //
            //   }, childCount: itemCount),
            // )
          ],
        ),
        //底部购物栏
        Positioned(
          bottom: 0,
          left: 0,
          child: GoodsDetailBottomBar(),
        )
      ],
    );

这里介绍一下Stack，这是一个类似iOS中UIView的widget，children存放着它的子视图，子视图自上而下重叠展示，处于children列表最后一个widget在最顶部的位置。子widget使用Positioned包裹，可以设置在stack内部距离上下左右的约束，我这里把购物栏固定在了底部。没有用Positioned包裹的widget会默认填充整个Stack，这里即整个商品详情的滑动列表。

布局方面都是基础widget的合成，具体实现代码可以去项目源码中查看，这里再简单介绍一下加载html代码的package:flutter_html,使用：

Html(
   data: val.goodsDetailModel.itemDetail['detailHtml'],
),

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

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