「Flutter实战」澳门新莆京娱乐网站_GridView类别导航制作 [复制链接]

2019-11-13 10:16
有事在发生 阅读:2163 评论:0 赞:2
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 Discuz! X3.2© 2001-2019 澳门新莆京娱乐网站-澳门新莆京手机网站(欢迎您).( 粤ICP备15117877号 )

XML 地图 | Sitemap 地图