「Flutter實戰」首頁_GridView類別導航制作 [復制鏈接]

2019-11-13 10:16
有事在發生 閱讀:398 評論: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全天服務
意見反饋:[email protected]

掃一掃關注我們

Powered by Discuz! X3.2© 2001-2019 Comsenz Inc.( 粵ICP備15117877號 )

重庆时时彩开奖模拟器 浙江11选5什么时候开 北京快乐八开奖 吉林11选5走势图彩经网 汇盈盘 贵州快3走势图一定牛 无敌单双王的网址 淘宝快3开奖走势图 天津时时彩走势图彩经 登山赛车快速 今天3d开奖结果是 浙江六加一开奖结果查询 刘伯温六肖选一肖中特