gridview添加按钮事件_「Flutter实战」12.首页_GridView类别导航制作

首页导航区的制作

外面用一个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

index_page.dart

home_page.dart

home_page.dart

---

如果您觉得阅读本文对您有帮助，请点一下“推荐”按钮，您的“推荐”将是我最大的写作动力！欢迎各位转载，但是未经作者本人同意，转载文章之后必须在文章页面明显位置给出作者和原文连接，否则保留追究法律责任的权利。