Flutter移动电商实战 --（15）商品推荐区域制作

本是古典何须时尚 2023-06-01 05:57 11阅读 0赞

#### 1、推荐商品类的编写 ####

这个类接收一个List参数，就是推荐商品的列表，这个列表是可以左右滚动的。

/*商品推荐*/
    class Recommend extends StatelessWidget {
      final List  recommendList;
    
      Recommend({Key key, this.recommendList}) : super(key: key);
    }

#### 2、推荐标题内部方法的编写 ####

实际开发中，要尽量减少嵌套，我们需要把复杂的组件，单独拿出一个方法进行编写。这里就把商品推荐标题单独拿出一个方法进行编写。

/*推荐商品标题*/
    Widget _titleWidget(){
     return Container(
       alignment: Alignment.centerLeft,
       padding: EdgeInsets.fromLTRB(10.0, 2.0, 0,5.0),
       decoration: BoxDecoration(
         color:Colors.white,
         border: Border(
           bottom: BorderSide(width:0.5,color:Colors.black12)
         )
       ),
       child:Text(
         '商品推荐',
         style:TextStyle(color:Colors.pink)
         )
     );
    }

#### 3、推荐商品单独项编写 ####

把推荐商品的每一个子项我们也分离出来。每一个子项都使用InkWell，这样为以后的页面导航作准备。里边使用了Column，把内容分成三行。

##### 先不充关于InkWel的使用 #####

InkWell有的叫溅墨效果，有的叫水波纹效果。使用场景是给一些无点击事件的部件添加点击事件时使用（也支持长按、双击等事件），同时你也可以去修改它的颜色和形状。

InkWell(
      borderRadius: BorderRadius.circular(8.0), /*圆角*/
      splashColor: Colors.transparent, /*溅墨色（波纹色）*/
      highlightColor: Colors.transparent, /*点击时的背景色（高亮色）*/
      onTap: () {},/*点击事件*/
      child: Container(),
    );

再回访推荐商品的编写

Widget _item(index){
        return InkWell(
          onTap: (){},
          child: Container(
            height: ScreenUtil().setHeight(330),
            width: ScreenUtil().setWidth(250),
            padding: EdgeInsets.all(8.0),
            decoration:BoxDecoration(
              color:Colors.white,
              border:Border(
                left: BorderSide(width:0.5,color:Colors.black12)
              )
            ),
            child: Column(
              children: <Widget>[
                Image.network(recommendList[index]['image']),
                Text('￥${recommendList[index]['mallPrice']}'),
                Text(
                  '￥${recommendList[index]['price']}',
                  style: TextStyle(
                    decoration: TextDecoration.lineThrough,
                    color:Colors.grey
                  ),
                )
              ],
            ),
          ),
        );
    }

#### 4、横向列表组件的编写 ####

横向列表组件也进行单独编写，以减少嵌套，这样我们就把每一个重要的部分都进行了分离。

Widget _recommedList(){
    
      return Container(
        height: ScreenUtil().setHeight(330),
        child: ListView.builder(
          scrollDirection: Axis.horizontal,
          itemCount: recommendList.length,
          itemBuilder: (context,index){
            return _item(index);
          },
        ),
      );
    }

有了这三个基本组件，最后我们在build方法里进行组合，形成商品推荐区域。

@override
    Widget build(BuildContext context) {
    return Container(
       height: ScreenUtil().setHeight(380),
       margin: EdgeInsets.only(top: 10.0),
       child: Column(
         children: <Widget>[
           _titleWidget(),
           _recommedList()
         ],
       ),
    );
    }

#### 5、整个组件的类代码如下 ####

// 商品推荐
    class Recommend extends StatelessWidget {
      final List  recommendList;
    
      Recommend({Key key, this.recommendList}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return Container(
           height: ScreenUtil().setHeight(380),
           margin: EdgeInsets.only(top: 10.0),
           child: Column(
             children: <Widget>[
               _titleWidget(),
               _recommedList()
             ],
           ),
        );
      }
    
    // 推荐商品标题
      Widget _titleWidget(){
         return Container(
           alignment: Alignment.centerLeft,
           padding: EdgeInsets.fromLTRB(10.0, 2.0, 0,5.0),
           decoration: BoxDecoration(
             color:Colors.white,
             border: Border(
               bottom: BorderSide(width:0.5,color:Colors.black12)
             )
           ),
           child:Text(
             '商品推荐',
             style:TextStyle(color:Colors.pink)
             )
         );
      }
    
      Widget _recommedList(){
    
          return Container(
            height: ScreenUtil().setHeight(330),
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: recommendList.length,
              itemBuilder: (context,index){
                return _item(index);
              },
            ),
          );
      }
    
      Widget _item(index){
        return InkWell(
          onTap: (){},
          child: Container(
            height: ScreenUtil().setHeight(330),
            width: ScreenUtil().setWidth(250),
            padding: EdgeInsets.all(8.0),
            decoration:BoxDecoration(
              color:Colors.white,
              border:Border(
                left: BorderSide(width:0.5,color:Colors.black12)
              )
            ),
            child: Column(
              children: <Widget>[
                Image.network(recommendList[index]['image']),
                Text('￥${recommendList[index]['mallPrice']}'),
                Text(
                  '￥${recommendList[index]['price']}',
                  style: TextStyle(
                    decoration: TextDecoration.lineThrough,
                    color:Colors.grey
                  ),
                )
              ],
            ),
          ),
        );
      }
    }

#### 6、准备数据并进行调用 ####

在 HomePage build 中继续添加：

List<Map> recommendList = (data['data']['recommend'] as List).cast(); 
     Recommend(recommendList:recommendList),

效果图：

![1090399-20190811223449770-1589992473.png][]

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

[1090399-20190811223449770-1589992473.png]: /images/20230601/b97769c5d8f84edab09c9a54ba3b9ec2.png