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移动电商实战-首页导航区域编写的更多相关文章

  1. 微信小程序电商实战-首页(上)

    嗨,大家好!经过近两周的精心准备终于开始微信小程序电商实战之路喽.那么最终会做成什么样呢?当然可以肯定不会只做一个静态demo哦,先把我们小程序电商实战的整体架构发出来晒一下,请看下图:   架构图. ...

  2. Flutter移动电商实战 --(12)首页导航区域编写

    1.导航单元素的编写 从外部看,导航是一个GridView部件,但是每一个导航又是一个上下关系的Column.小伙伴们都知道Flutter有多层嵌套的问题,如果我们都写在一个组件里,那势必造成嵌套严重 ...

  3. Flutter移动电商实战 --(4)打通底部导航栏

    关于界面切换以及底栏的实现可参考之前写的一篇文章:Flutter实 ViewPager.bottomNavigationBar界面切换 1.新建4个基本dart文件 在pages目录下,我们新建下面四 ...

  4. Flutter移动电商实战 --(3)底部导航栏制作

    1.cupertino_IOS风格介绍 在Flutter里是有两种内置风格的: material风格: Material Design 是由 Google 推出的全新设计语言,这种设计语言是为手机.平 ...

  5. Flutter移动电商实战 --(43)详细页_补充首页跳转到详细页

    首页轮播点击到详细页 修改我们轮播这里的代码:SwiperDiy这个类这里的代码 return InkWell( onTap: (){ Application.router.navigateTo(co ...

  6. Flutter移动电商实战 --(23)分类页_左侧类别导航制作

    自动生成dart类 https://javiercbk.github.io/json_to_dart/ 生成的代码 class Autogenerated { String code; String ...

  7. Flutter移动电商实战 --(20)首页上拉加载更多功能的制作

    这节课学习一下上拉加载效果,其实现在上拉加载的插件有很多,但是还没有一个插件可以说完全一枝独秀,我也找了一个插件,这个插件的优点就是服务比较好,作者能及时回答大家的问题.我觉的选插件也是选人,人对了, ...

  8. Flutter移动电商实战 --(14)首页_拨打电话操作

    拨打电话的功能在app里也很常见,比如一般的外卖app都会有这个才做.其实Flutter本身是没给我们提供拨打电话的能力的,那我们如何来拨打电话那? 1.编写店长电话模块 这个小伙伴们一定轻车熟路了, ...

  9. Flutter移动电商实战 --(19)首页_火爆专区商品接口制作

    Dart中可选参数的设置 上节课在作通用方法的时候,我们的参数使用了一个必选参数,其实我们可以使用一个可选参数.Dart中的可选参数,直接使用“{}”(大括号)就可以了.可选参数在调用的时候必须使用p ...

随机推荐

  1. Word 图片表格自动编号、交叉引用、批量更改图片标题格式、生成图录和表录

    1. 前言 论文往往里往往需要插入很多图片,下放需要标上 图a-b,其中 a 是章节号码,b是该章节中第几张图.比如第一章第二副图就是 图1-2.但是有个问题,每次我们插入了一张图或删掉了一张,前后的 ...

  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 ...

  3. 安装Nexus时报Error occurred shutting down framework: java.lang.NumberFormatException: null

    Error occurred shutting down framework: java.lang.NumberFormatException: null 原因 :路径中有中文

  4. ElasticSearch 调优

    来源:http://tinyurl.com/y4gnzbje 第一部分:调优索引速度 第二部分-调优搜索速度 英文原文:https://www.elastic.co/guide/en/elastics ...

  5. C#各种字段类型对比

    一.常量.只读字段.静态字段和静态只读字段对比 public class ModelClass { //常量在定义时必须赋初始值 //public const string constField; p ...

  6. Thymeleaf前后端分页查询

    分页查询是一个很常见的功能,对于分页也有很多封装好的轮子供我们使用. 比如使用mybatis做后端分页可以用Pagehelper这个插件,如果使用SpringDataJPA更方便,直接就内置的分页查询 ...

  7. 【转】Dubbo分布式服务框架

    Dubbo是一个分布式服务框架,致力于提供高性能和透明化的远程服务调用方案. Dubbo架构 官网架构图: 节点角色说明: Provider: 暴露服务的服务提供方. Consumer: 调用远程服务 ...

  8. 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 ...

  9. 旋转图像 给定一个 n × n 的二维矩阵表示一个图像。

    给定一个 n × n 的二维矩阵表示一个图像. 将图像顺时针旋转 90 度. 说明: 你必须在原地旋转图像,这意味着你需要直接修改输入的二维矩阵.请不要使用另一个矩阵来旋转图像. 示例 : 给定 ma ...

  10. dedecms更换默认编辑器为百度编辑器ueditor

    由于体验过ueditor编辑器,再次使用Dedecms编辑器感觉很别扭,所以就有了更换编辑器的想法.操作顺序如下所述: 1.首先,下载ueditor包,官网http://ueditor.baidu.c ...