贵阳手机网站建设公司,wordpress 黑白 主题,承德网站,网页设计教程这本书讲什么12-Flutter移动电商实战-首页导航区域编写
1、导航单元素的编写
从外部看#xff0c;导航是一个GridView部件#xff0c;但是每一个导航又是一个上下关系的Column。小伙伴们都知道Flutter有多层嵌套的问题#xff0c;如果我们都写在一个组件里#xff0c;那势必造成嵌套严…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自定义组件。 ListMap navigatorList (data[data][category] as List).cast(); //类别列表TopNavigator(navigatorList:navigatorList), //导航组件这时候进行预览界面你会发现界面有些问题就是多了一个类别并不是我们想要的10个列表其实如果正常这应该是后端给数据的一个Bug。但是我们是没办法去找后端麻烦的所以只能自己想办法解决这个问题。
解决的办法就是把List进行截取方法如下。
if(navigatorList.length10){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 StateHomePage {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());ListMap swiper (data[data][slides] as List).cast();ListMap 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.length10){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 阅读(...) 评论(...) 编辑 收藏
