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。代码如下:
@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(),
),
);
}
}
效果如下图所示:
12-Flutter移动电商实战-首页导航区域编写的更多相关文章
- 微信小程序电商实战-首页(上)
嗨,大家好!经过近两周的精心准备终于开始微信小程序电商实战之路喽.那么最终会做成什么样呢?当然可以肯定不会只做一个静态demo哦,先把我们小程序电商实战的整体架构发出来晒一下,请看下图: 架构图. ...
- Flutter移动电商实战 --(12)首页导航区域编写
1.导航单元素的编写 从外部看,导航是一个GridView部件,但是每一个导航又是一个上下关系的Column.小伙伴们都知道Flutter有多层嵌套的问题,如果我们都写在一个组件里,那势必造成嵌套严重 ...
- Flutter移动电商实战 --(4)打通底部导航栏
关于界面切换以及底栏的实现可参考之前写的一篇文章:Flutter实 ViewPager.bottomNavigationBar界面切换 1.新建4个基本dart文件 在pages目录下,我们新建下面四 ...
- Flutter移动电商实战 --(3)底部导航栏制作
1.cupertino_IOS风格介绍 在Flutter里是有两种内置风格的: material风格: Material Design 是由 Google 推出的全新设计语言,这种设计语言是为手机.平 ...
- Flutter移动电商实战 --(43)详细页_补充首页跳转到详细页
首页轮播点击到详细页 修改我们轮播这里的代码:SwiperDiy这个类这里的代码 return InkWell( onTap: (){ Application.router.navigateTo(co ...
- Flutter移动电商实战 --(23)分类页_左侧类别导航制作
自动生成dart类 https://javiercbk.github.io/json_to_dart/ 生成的代码 class Autogenerated { String code; String ...
- Flutter移动电商实战 --(20)首页上拉加载更多功能的制作
这节课学习一下上拉加载效果,其实现在上拉加载的插件有很多,但是还没有一个插件可以说完全一枝独秀,我也找了一个插件,这个插件的优点就是服务比较好,作者能及时回答大家的问题.我觉的选插件也是选人,人对了, ...
- Flutter移动电商实战 --(14)首页_拨打电话操作
拨打电话的功能在app里也很常见,比如一般的外卖app都会有这个才做.其实Flutter本身是没给我们提供拨打电话的能力的,那我们如何来拨打电话那? 1.编写店长电话模块 这个小伙伴们一定轻车熟路了, ...
- Flutter移动电商实战 --(19)首页_火爆专区商品接口制作
Dart中可选参数的设置 上节课在作通用方法的时候,我们的参数使用了一个必选参数,其实我们可以使用一个可选参数.Dart中的可选参数,直接使用“{}”(大括号)就可以了.可选参数在调用的时候必须使用p ...
随机推荐
- js中基本包装类型详情
基本包装类型 基本包装类型有Boolean,Number和string类型,每当读取一个基本类型值时,后台就会创建一个对应的基本包装类型对象. 从逻辑上,基本类型值不是对象,没有方法,但从技术上来看, ...
- Win10各个PC版本的差别
新的电脑有的已经不能够支持安装win7了,也就是说新电脑的硬件支持只能安装win10.那么win10有都有那些版本呢?这些版本之间又有什么样区别?我相信很多人并不是很了解.今天就来整理一下这些资料.据 ...
- 【代码优化】C#遍历所有控件(Control方法)
直接上代码: /// <summary> /// 判断价格是否可以购买技能的方法 /// </summary> /// <param name="btnBuyA ...
- C# vb .net实现装饰边框效果滤镜
在.net中,如何简单快捷地实现Photoshop滤镜组中的装饰边框效果呢?答案是调用SharpImage!专业图像特效滤镜和合成类库.下面开始演示关键代码,您也可以在文末下载全部源码: 设置授权 第 ...
- installer
if (args.Length == 0) { ServiceBase[] ServicesToRun; ServicesToRun = new ServiceBase[] { new MyServi ...
- python爬虫-有道翻译-js加密破解
有道翻译-js加密破解 这是本地爬取的网址:http://fanyi.youdao.com/ 一.分析请求 我们在页面中输入:水果,翻译后的英文就是:fruit.请求携带的参数有很多,先将参数数据保存 ...
- SOFT-NMS (二) (non maximum suppression,非极大值抑制)
import numpy as np boxes = np.array([[200, 200, 400, 400], [220, 220, 420, 420], [200, 240, 400, 440 ...
- activiti工作流(传智播客)
1:工作流的概念 说明: 1) 假设:这两张图就是华谊兄弟的请假流程图 2) 图的组成部分: A. 人物:范冰冰 冯小刚 王中军 B. 事件(动作):请假.批准.不批准 工作流(Wo ...
- localStorage&sessionStorage&Cookie
localStorage.sessionStorage.Cookie三者区别如下:
- 关于定义变量名为"name"的坑!!!
昨天下午没有什么工作可做,闲来无事就上博客园看看了,有个问题让我一直很纳闷. 直接上代码吧: 再用表达式创建函数时遇到的问题,这里的代码按照正常逻辑只有那个在变量定义后面的函数执行打印的值才是&quo ...