12-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。代碼如下：

@overrideWidget?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='正在獲取數據';@overrideWidget?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);@overrideWidget?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'])],),);}@overrideWidget?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(),),);} }

效果如下圖所示：

posted @ 2019-06-15 22:48 niceyoo 閱讀(...) 評論(...) 編輯 收藏

總結

以上是生活随笔為你收集整理的12-Flutter移动电商实战-首页导航区域编写的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。