zoukankan      html  css  js  c++  java
  • 15-Flutter移动电商实战-商品推荐区域制作

    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.02.00,5.0),
       decoration: BoxDecoration(
         color:Colors.white,
         border: Border(
           bottom: BorderSide(0.5,color:Colors.black12)
         )
       ),
       child:Text(
         '商品推荐',
         style:TextStyle(color:Colors.pink)
         )
     );
    }

    3、推荐商品单独项编写

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

    先不充关于InkWel的使用

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

    InkWell(
      borderRadiusBorderRadius.circular(8.0), /*圆角*/
      splashColorColors.transparent/*溅墨色(波纹色)*/
      highlightColorColors.transparent/*点击时的背景色(高亮色)*/
      onTap: () {},/*点击事件*/
      childContainer(),
    );

    再回访推荐商品的编写

    Widget _item(index){
        return InkWell(
          onTap: (){},
          child: Container(
            height: ScreenUtil().setHeight(330),
             ScreenUtil().setWidth(250),
            padding: EdgeInsets.all(8.0),
            decoration:BoxDecoration(
              color:Colors.white,
              border:Border(
                left: BorderSide(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(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),
             ScreenUtil().setWidth(250),
            padding: EdgeInsets.all(8.0),
            decoration:BoxDecoration(
              color:Colors.white,
              border:Border(
                left: BorderSide(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),    

    效果图:

  • 相关阅读:
    poj 3280 Cheapest Palindrome(区间DP)
    POJ 2392 Space Elevator(多重背包)
    HDU 1285 定比赛名次(拓扑排序)
    HDU 2680 Choose the best route(最短路)
    hdu 2899 Strange fuction (三分)
    HDU 4540 威威猫系列故事――打地鼠(DP)
    HDU 3485 Count 101(递推)
    POJ 1315 Don't Get Rooked(dfs)
    脱离eclipse,手动写一个servlet
    解析xml,几种方式
  • 原文地址:https://www.cnblogs.com/niceyoo/p/11055169.html
Copyright © 2011-2022 走看看