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

桃扇骨 2023-06-01 05:58 6阅读 0赞

### 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(),
                ],
              )   
        );
      }

转载于:https://www.cnblogs.com/crazycode2/p/11324487.html