Flutter實戰視頻-移動電商-15.首頁_商品推薦模塊編寫

15.首頁_商品推薦模塊編寫

商品推薦，咱們作成能夠橫向滾動的

 

分析：

上面是標題，下面是ListView，裏面是一個Column，

column分三層，第一是圖片，第二是價格，第三是市場價格

小細節就是上面有個間距

 

解決一個以前留下的坑。超過屏幕出現黃色的警示黃條

解決方法加加一個SingleChildScrollView，讓它單獨滾動

 

最終效果：

 

stlessW快捷鍵生成商品推薦的代碼

由於是列表，因此接收List參數recommentList.。而後傳遞給構造函數，這樣咱們就接收了一個list的參數

 

頭部

咱們使用內部方法來建立咱們的小組件。

標題下面是有下劃線的，因此這裏咱們用BoxDecoration

 

圖片和價格

由於商品點擊是要跳轉到商品的詳情頁的，因此這裏咱們返回的是一個InkWell

width由於是750除以3就是250

 

糾正本身單詞寫錯的了一個錯誤。推薦應該是recommend。最後一個字母是D我寫成了t了。在這裏糾正一下

 

列表的方法

有了上面兩個方法以後，咱們再寫列表的方法。

這裏咱們使用ListView.builder生成器

itemBuilder是構造器

 

開始寫build方法

準備recommendList數據

 

效果展現

效果出來了 可是展現效果不大正常

 

下節課再調解這些問題

最終代碼

import 'package:flutter/material.dart';
import '../service/service_method.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'dart:convert';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:url_launcher/url_launcher.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  String homePageContent='正在獲取數據';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('百姓生活+')),
      body: FutureBuilder(
        future: getHomePageContent(),
        builder: (context, snapshot) {
          if(snapshot.hasData){
            var data=json.decode(snapshot.data.toString());
            List<Map> swiper=(data['data']['slides'] as List).cast();
            List<Map> navigatorList=(data['data']['category'] as List).cast();
            String adPicture=data['data']['advertesPicture']['PICTURE_ADDRESS'];
            String leaderImage=data['data']['shopInfo']['leaderImage'];
            String leaderPhone=data['data']['shopInfo']['leaderPhone'];
            List<Map> recommendList=(data['data']['recommend'] as List).cast();

            return SingleChildScrollView(
              child: Column(
                children: <Widget>[
                  SwiperDiy(swiperDateList: swiper),
                  TopNavigator(navigatorList:navigatorList ,),
                  AdBanner(adPicture:adPicture),
                  LeaderPhone(leaderImage: leaderImage,leaderPhone: leaderPhone,),
                  Recommend(recommendList:recommendList)
                ],
              ),
            );
          }else{
            return Center(child: Text('加載中....'));
          }
        },
      ),
    );
  }
}
//首頁輪播插件
class SwiperDiy extends StatelessWidget {
  final List swiperDateList;
  //構造函數
  SwiperDiy({this.swiperDateList});

  @override
  Widget build(BuildContext context) {
  
   

    // print('設備的像素密度：${ScreenUtil.pixelRatio}');
    // print('設備的高：${ScreenUtil.screenWidth}');
    // print('設備的寬：${ScreenUtil.screenHeight}');

    return Container(
      height: ScreenUtil().setHeight(333),//
      width:ScreenUtil().setWidth(750),
      child: Swiper(
        itemBuilder: (BuildContext context,int index){
          return Image.network("${swiperDateList[index]['image']}",fit: BoxFit.fill,);
        },
        itemCount: swiperDateList.length,
        pagination: SwiperPagination(),
        autoplay: true,
      ),
    );
  }
}

class TopNavigator extends StatelessWidget {
  final List navigatorList;

  TopNavigator({Key key, this.navigatorList}) : super(key: key);

  Widget _gridViewItemUI(BuildContext context,item){
    return InkWell(
      onTap: (){print('點擊了導航');},
      child: Column(
        children: <Widget>[
          Image.network(item['image'],width: ScreenUtil().setWidth(95)),
          Text(item['mallCategoryName'])
        ],
      ),
    );
  }
  @override
  Widget build(BuildContext context) {
    if(this.navigatorList.length>10){
      this.navigatorList.removeRange(10,this.navigatorList.length);//從第十個截取，後面都截取掉
    }
    return Container(
      height: ScreenUtil().setHeight(320),//只是本身大概預估的一個高度，後續能夠再調整
      padding: EdgeInsets.all(3.0),//爲了避免讓它切着屏幕的邊緣，咱們給它一個padding
      child: GridView.count(
        crossAxisCount: 5,//每行顯示5個元素
        padding: EdgeInsets.all(5.0),//每一項都設置一個padding，這樣他就不挨着了。
        children: navigatorList.map((item){
          return _gridViewItemUI(context,item);
        }).toList(),
      ),
    );
  }
}

class AdBanner extends StatelessWidget {
  final String adPicture;

  AdBanner({Key key, this.adPicture}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Image.network(adPicture),
    );
  }
}

//店長電話模塊
class LeaderPhone extends StatelessWidget {
  final String leaderImage;//店長圖片
  final String leaderPhone;//店長電話 


  LeaderPhone({Key key, this.leaderImage,this.leaderPhone}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: InkWell(
        onTap: _launchURL,
        child: Image.network(leaderImage),
      ),
    );
  }

  void _launchURL() async {
    String url = 'tel:'+leaderPhone;
    //String url = 'http://jspang.com';
    if(await canLaunch(url)){
      await launch(url);
    }else{
      throw 'url不能進行訪問，異常';
    }
  }
}

//商品推薦
class Recommend extends StatelessWidget {

home_page.dart