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 ...
随机推荐
- Word 图片表格自动编号、交叉引用、批量更改图片标题格式、生成图录和表录
1. 前言 论文往往里往往需要插入很多图片,下放需要标上 图a-b,其中 a 是章节号码,b是该章节中第几张图.比如第一章第二副图就是 图1-2.但是有个问题,每次我们插入了一张图或删掉了一张,前后的 ...
- POJ 1251 Jungle Roads - C语言 - Kruskal算法
Description The Head Elder of the tropical island of Lagrishan has a problem. A burst of foreign aid ...
- 安装Nexus时报Error occurred shutting down framework: java.lang.NumberFormatException: null
Error occurred shutting down framework: java.lang.NumberFormatException: null 原因 :路径中有中文
- ElasticSearch 调优
来源:http://tinyurl.com/y4gnzbje 第一部分:调优索引速度 第二部分-调优搜索速度 英文原文:https://www.elastic.co/guide/en/elastics ...
- C#各种字段类型对比
一.常量.只读字段.静态字段和静态只读字段对比 public class ModelClass { //常量在定义时必须赋初始值 //public const string constField; p ...
- Thymeleaf前后端分页查询
分页查询是一个很常见的功能,对于分页也有很多封装好的轮子供我们使用. 比如使用mybatis做后端分页可以用Pagehelper这个插件,如果使用SpringDataJPA更方便,直接就内置的分页查询 ...
- 【转】Dubbo分布式服务框架
Dubbo是一个分布式服务框架,致力于提供高性能和透明化的远程服务调用方案. Dubbo架构 官网架构图: 节点角色说明: Provider: 暴露服务的服务提供方. Consumer: 调用远程服务 ...
- python day 18: thinking in UML与FTP作业重写
目录 python day 18 1. thinking in UML读书小感 2. FTP作业重写 2.1 软件目录结构 2.2 FTPClient端脚本 2.3 FTPServer端脚本 pyth ...
- 旋转图像 给定一个 n × n 的二维矩阵表示一个图像。
给定一个 n × n 的二维矩阵表示一个图像. 将图像顺时针旋转 90 度. 说明: 你必须在原地旋转图像,这意味着你需要直接修改输入的二维矩阵.请不要使用另一个矩阵来旋转图像. 示例 : 给定 ma ...
- dedecms更换默认编辑器为百度编辑器ueditor
由于体验过ueditor编辑器,再次使用Dedecms编辑器感觉很别扭,所以就有了更换编辑器的想法.操作顺序如下所述: 1.首先,下载ueditor包,官网http://ueditor.baidu.c ...