「Flutter实战」首页_GridView类别导航制作

348 阅读2分钟
现创建了一个Android开发水友圈,圈内会不定时更新一些Android中高级的进阶资料,欢迎大家带着技术问题来讨论,共同成长进步!(包含资深UI工程师,Android底层开发工程师,Android架构师,原生性能优化及混合优化,flutter专精);希望有技术的大佬加入,水圈内解决的问题越多获得的权利越大!

首页导航区的制作

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

新建导航组件

还是在home_page.dart里面写代码
新建一个静态的组件:
快捷键写组件的时候选择哪个stlessW的,这样把构造函数也帮你初始化好了。
定义一个内部的方法 ,返回的是一个column,内部方法名开头用下划线开头。
定义方法 _gridViewItemUI接收两个参数一个是上下文对象,一个item相当于我们每一个导航项
我们导航项点一下肯定要有页面的变化,或者是路由的跳转。这个时候就是使用使用我们的小部件InkWell。外层用InkWell主要是它可以接受一个点击事件。
当前我们只输出一句话就可以了。然后里面的Child我们用Column就可以了
把我们的ScreenUtil初始化放在,main.dart中第一个调用的页面
注意引入:import 'package:flutter_screenutil/flutter_screenutil.dart';
这样就相当于我们进行了全局设置。
这样我们的Column就写完了。
外层套一个Container方便扩展
因为我们上面已经接收一个list了。这里children的地方我们直接用navigatorList进行遍历
map里面接收一个回调,map后就不是list对象了。因此最后需要加上toList()
return直接调用我们写的内部方法就可以了。
然后在FutureBuilder里面调用我们写的TopNavigator组件

预览效果:

往下滚动 发现最下面多了一个
这个是后台接口的锅,按说应该是10个的,所以只能从前端想一些办法来处理了。

最终代码

index_page.dart
觉得有帮助的可以关注和转发,若有任何疑问可通过 私信或者留言联系我,留言不一定回

进圈方式:点赞+关注,私信回复我‘资料’即可进圈。