12-Flutter移动电商实战-首页导航区域编写
1、导航单元素的编写
从外部看，导航是一个GridView部件，但是每一个导航又是一个上下关系的Column。小伙伴们都知道Flutter有多层嵌套的问题，如果我们都写在一个组件里，那势必造成嵌套严重，不利于项目以后的维护工作。所以我们单独把每一个自元素导航拿出来，一个方法，返回一个组件。
代码如下：详细的解释可以观看视频。
classTopNavigatorextendsStatelessWidget{finalListnavigatorList;TopNavigator({Keykey,this.navigatorList}):super(key:key);Widget_gridViewItemUI(BuildContextcontext,item){returnInkWell(onTap:(){print('点击了导航');},child:Column(children:<Widget>[work(item['image'],width:ScreenUtil().setWidth(95)),Text(item['mallCategoryName'])],),);}}
2、GridView制作导航
这个制作我们还是在外层嵌套一个Container组件，然后直接使用GridView。代码如下：
@overrideWidgetbuild(BuildContextcontext){returnContainer(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']asList).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';classHomePageextendsStatefulWidget{_HomePageStatecreateState()=>_HomePageState();}class_HomePageStateextendsState<HomePage>{StringhomePageContent='正在获取数据';@overrideWidgetbuild(BuildContextcontext){returnScaffold(appBar:AppBar(title:Text('百姓生活+'),),body:FutureBuilder(future:getHomePageContent(),builder:(context,snapshot){if(snapshot.hasData){vardata=json.decode(snapshot.data.toString());List<Map>swiper=(data['data']['slides']asList).cast();List<Map>navigatorList=(data['data']['category']asList).cast();类别列表returnColumn(children:<Widget>[SwiperDiy(swiperDataList:swiper,),TopNavigator(navigatorList:navigatorList,)],);}else{returnCenter(child:Text("加载中"),);}},));}}轮播组件classSwiperDiyextendsStatelessWidget{finalListswiperDataList;SwiperDiy({Keykey,this.swiperDataList}):super(key:key);@overrideWidgetbuild(BuildContextcontext){ScreenUtil.instance=ScreenUtil(width:750,height:1334)..init(context);returnContainer(height:ScreenUtil().setHeight(333),width:ScreenUtil().setWidth(750),child:Swiper(itemCount:swiperDataList.length,itemBuilder:(BuildContextcontext,intindex){work("${swiperDataList[index]['image']}",fit:BoxFit.fill);},pagination:SwiperPagination(),autoplay:true,),);}}classTopNavigatorextendsStatelessWidget{finalListnavigatorList;TopNavigator({this.navigatorList});Widget_gradViewItemUi(BuildContextcontext,item){returnInkWell(onTap:(){print("点击了导航");},child:Column(children:<Widget>[work(item['image'],width:ScreenUtil().setWidth(95),),Text(item['mallCategoryName'])],),);}@overrideWidgetbuild(BuildContextcontext){if(navigatorList.length>10){navigatorList.removeRange(10,navigatorList.length);}returnContainer(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 @ -06-15 22:48 niceyoo 阅读(...) 评论(...) 编辑 收藏
