Flutter移动电商实战 --（19）首页_火爆专区商品接口制作

Dart中可选参数的设置

上节课在作通用方法的时候，我们的参数使用了一个必选参数，其实我们可以使用一个可选参数。Dart中的可选参数，直接使用“{}”(大括号)就可以了。可选参数在调用的时候必须使用paramName:value的形式。

我们把上节课的后端接口代码改为如下:

Future request(url,{formData})async{
    try{
      print('开始获取数据...............');
      Response response;
      Dio dio = new Dio();
      dio.options.contentType=ContentType.parse("application/x-www-form-urlencoded");
      if(formData==null){

          response = await dio.post(servicePath[url]);
      }else{
          response = await dio.post(servicePath[url],data:formData);
      }
      if(response.statusCode==200){
        return response.data;
      }else{
          throw Exception('后端接口出现异常，请检测代码和服务器情况.........');
      }
    }catch(e){
        return print('ERROR:======>${e}');
    }
}

然后调用的时候，采用的方式是request('homePageBelowConten',formData:formPage),这样就可以实现可选参数了。

读取火爆专区数据

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

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方法里执行,就会得到数据了。

火爆专区标题编写

火爆专区，我们先采用State的原始方法，来进行制作，因为这也是很多小伙伴要求的，所以我们主要讲解一下StatefulWidget的使用。下次我们写分类页面的时候会用Redux的方法，以为StatefulWidget的方法会让程序耦合性很强，不利于以后程序的维护。

因为首页我们采用StatefulWidget的方法，所以把标题写在内部。这次我们不采用方法返回Widget的方法了，而是采用变量的方法。

代码如下：

//火爆专区标题
  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(hotGoodsList.length!=0){
       List<Widget> listWidget = hotGoodsList.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(),
            ],
          )
    );
  }

.