「Flutter实战」北京福彩网_GridView类别导航制作 [复制链接]

2019-11-13 10:16
有事在发生 阅读:349 评论:0 赞:1
Tag:  Flutter GridView

北京福彩网导航区的制作

「Flutter实战」12.北京福彩网_GridView类别导航制作

外面用一个gridview来写。里面单独提出来

新建导航组件

还是在home_page.dart里面写代码

新建一个静态的组件:

快捷键写组件的时候选择哪个stlessW的,这样把构造函数也帮你初始化好了。

「Flutter实战」12.北京福彩网_GridView类别导航制作

「Flutter实战」12.北京福彩网_GridView类别导航制作

定义一个内部的方法 ,返回的是一个column,内部方法名开头用下划线开头。

定义方法 _gridViewItemUI接收两个参数一个是上下文对象,一个item相当于我们每一个导航项

我们导航项点一下肯定要有页面的变化,或者是路由的跳转。这个时候就是使用使用我们的小部件InkWell。外层用InkWell主要是它可以接受一个点击事件。

当前我们只输出一句话就可以了。然后里面的Child我们用Column就可以了

「Flutter实战」12.北京福彩网_GridView类别导航制作

把我们的ScreenUtil初始化放在,main。dart中第一个调用的页面

「Flutter实战」12.北京福彩网_GridView类别导航制作

「Flutter实战」12.北京福彩网_GridView类别导航制作

注意引入:import 'package:flutter_screenutil/flutter_screenutil.dart';

「Flutter实战」12.北京福彩网_GridView类别导航制作

这样就相当于我们进行了全局设置。

这样我们的Column就写完了。

「Flutter实战」12.北京福彩网_GridView类别导航制作

北京福彩网外层套一个Container方便扩展

「Flutter实战」12.北京福彩网_GridView类别导航制作

因为我们上面已经接收一个list了。这里children的地方我们直接用navigatorList进行遍历

「Flutter实战」12.北京福彩网_GridView类别导航制作

北京福彩网map里面接收一个回调,map后就不是list对象了。因此最后需要加上toList()

「Flutter实战」12.北京福彩网_GridView类别导航制作

return直接调用我们写的内部方法就可以了。

「Flutter实战」12.北京福彩网_GridView类别导航制作

然后在FutureBuilder里面调用我们写的TopNavigator组件

「Flutter实战」12.北京福彩网_GridView类别导航制作

预览效果:

「Flutter实战」12.北京福彩网_GridView类别导航制作

往下滚动 发现最下面多了一个

「Flutter实战」12.北京福彩网_GridView类别导航制作

这个是后台接口的锅,按说应该是10个的,所以只能从前端想一些办法来处理了。

「Flutter实战」12.北京福彩网_GridView类别导航制作

「Flutter实战」12.北京福彩网_GridView类别导航制作

最终代码

index_page.dart

「Flutter实战」12.北京福彩网_GridView类别导航制作

「Flutter实战」12.北京福彩网_GridView类别导航制作

我来说两句
您需要登录后才可以评论 登录 | 立即注册
facelist
所有评论(0)
领先的中文移动开发者社区
18620764416
7*24全天服务
意见反馈:1294855032@qq.com

扫一扫关注我们

Powered by X3.2北京福彩网© 2001-2019 ( )

江西快3走势图 吉林快3 欢乐生肖官方网站 青海福彩网 上海体彩网 上海福彩网 上海福彩网 天津福彩网 北京福彩网 吉林体彩网