Flutter移動電商實戰-首頁導航區域編寫

1、導航單元素的編寫

從外部看，導航是一個GridView部件，但是每一個導航又是一個上下關系的Column。小伙伴們都知道Flutter有多層嵌套的問題，如果我們都寫在一個組件里，那勢必造成嵌套嚴重，不利於項目以后的維護工作。所以我們單獨把每一個自元素導航拿出來，一個方法，返回一個組件。

代碼如下：詳細的解釋可以觀看視頻。

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

2、GridView制作導航

這個制作我們還是在外層嵌套一個Container組件，然后直接使用GridView。代碼如下：

@override
  Widget build(BuildContext context) {
    return Container(
      height: ScreenUtil().setHeight(320),
      padding:EdgeInsets.all(3.0),
      child: GridView.count(
        crossAxisCount: 5,
        padding: EdgeInsets.all(4.0),
        children: navigatorList.map((item){
          return _gridViewItemUI(context, item);
        }).toList(),
      ),
    );
  }

需要注意的是children屬性，我們使用了map循環，然后再使用toList()進行轉換。

3、數據處理和Bug解決

在HomePage的build方法里聲明一個List變量，然后把數據進行List轉換。再調用TopNavigator自定義組件。

 List<Map> navigatorList =(data['data']['category'] as List).cast(); //類別列表
  TopNavigator(navigatorList:navigatorList),  //導航組件

這時候進行預覽界面，你會發現界面有些問題，就是多了一個類別，並不是我們想要的10個列表，其實如果正常，這應該是后端給數據的一個Bug。但是我們是沒辦法去找后端麻煩的，所以只能自己想辦法解決這個問題。

解決的辦法就是把List進行截取，方法如下。

if(navigatorList.length>10){
      navigatorList.removeRange(10, navigatorList.length);
}

全部完整代碼：

import 'dart:convert';

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


class HomePage extends StatefulWidget {
  _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(); 類別列表

                return Column(
                  children: <Widget>[
                    SwiperDiy(swiperDataList: swiper,),
                    TopNavigator(navigatorList: navigatorList,)
                  ],
                );
              }else{
                  return Center(
                    child: Text("加載中"),
                  );
              }
            },
        )
    );
  }
}

輪播組件
class SwiperDiy extends StatelessWidget {

  final List swiperDataList;

  SwiperDiy({Key key,this.swiperDataList}):super(key:key);

  @override
  Widget build(BuildContext context) {
    ScreenUtil.instance = ScreenUtil(width: 750,height: 1334)..init(context);
    return Container(
      height: ScreenUtil().setHeight(333),
      width: ScreenUtil().setWidth(750),
      child: Swiper(
          itemCount: swiperDataList.length,
          itemBuilder: (BuildContext context,int index){
              return Image.network("${swiperDataList[index]['image']}",fit:BoxFit.fill);
          },
          pagination: SwiperPagination(),
          autoplay: true,
      ),
    );
  }
}

class TopNavigator extends StatelessWidget {

  final List navigatorList;

  TopNavigator({this.navigatorList});

  Widget _gradViewItemUi(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(navigatorList.length>10){
      navigatorList.removeRange(10, navigatorList.length);
    }

    return Container(
      height: ScreenUtil().setHeight(320),
      padding: EdgeInsets.all(3.0),
      child: GridView.count(
          crossAxisCount: 5,
          padding: EdgeInsets.all(4.0),
        children: navigatorList.map((item){
          return _gradViewItemUi(context, item);
        }).toList(),
      ),
    );
  }
}

效果如下圖所示：