12.火爆专区

a164d9fcd293f7bdf00ff3c0caea7e7.png

读取数据
我们先声明两个变量，一个是火爆专区的商品列表数据，一个是当前的页数

int page = 1;
  List<Map> hotGoodsList=[];

获取数据的方法

//火爆商品接口
  void _getHotGoods(){
     var formPage={'page': page};
     request('homePageBelowConten',formData:formPage).then((val){

       var data=json.decode(val.toString());
       List<Map> newGoodsList = (data['data'] as List ).cast();
       setState(() {
         hotGoodsList.addAll(newGoodsList);
         page++; 
       });
     });
  }

做好方法后，再initState方法里执行,就会得到数据了。

  @override
  void initState(){
    super.initState();

    _getHotGoods();
  }

专区标题

//火爆专区标题
  Widget hotTitle = Container(
    margin: EdgeInsets.only(top: 10.0),
    padding: EdgeInsets.all(5.0),
    alignment: Alignment.center,
    decoration: BoxDecoration(
      color: Colors.white,
      border: Border(
        bottom: BorderSide(width:0.5 ,color:Colors.black12)
      ),
    ),
    child: Text('火爆专区'),
  );

Warp流式布局
看到下面的火爆商品列表时，很多小伙伴会想到GridView Widget ，其实GridView组件的性能时很低的，毕竟网格的绘制不难么简单，所以这里使用了Warp来进行布局。Warp是一种流式布局。

可以先把火爆专区数据作成List<Widget>,然后再进行Warp布局。

//火爆专区子项
    Widget  _wrapList(){
      if (hotGoodList.length != 0) {
        List<Widget> listWidget = hotGoodList.map((val){
          return InkWell(
            onTap: (){print('点击了火爆商品');},
            child: Container(
              width: ScreenUtil().setWidth(372),
              color: Colors.white,
              padding: EdgeInsets.all(5.0),
              margin: EdgeInsets.only(bottom:3.0),
              child: Column(
                children: <Widget>[
                  Image.network(val['image'],width: ScreenUtil().setWidth(375)),
                  Text(
                    val['name'],
                    maxLines: 1,
                    overflow:TextOverflow.ellipsis ,
                    style: TextStyle(color:Colors.pink,fontSize: ScreenUtil().setSp(26)),
                  ),
                  Row(
                    children: <Widget>[
                      Text('￥${val['mallPrice']}'),
                      Text(
                        '￥${val['price']}',
                        style: TextStyle(color:Colors.black26,decoration: TextDecoration.lineThrough),

                      )
                    ],
                  )
                ],
              ),
            ),
          );
        }).toList();
        return Wrap(
          spacing: 2,//两列
          children: listWidget,
        );
      }else{
        return Text('暂无数据 ');
      }
    }

有了标题和商品列表组件，我们就可以把这两个组件组合起来了，当然你不组合也是完全可以的

//火爆专区组合
   Widget _hotGoods(){
      return Container(
        child: Column(
          children: <Widget>[
            hotTitle,
            _wrapList()
          ],
        ),
      );
   }