「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號 )

重庆时时彩开奖模拟器 欢乐捕鱼人赢话费正版 极速快乐十分彩开奖app 三个人找贵金属赚钱的节目 内蒙古快3号码图 淘股吧股票论坛 广东快乐十分开奖结果查询历史 彩37 app 双色球神奇的兰球杀码公式 北京pk赛车计划 甘肃十一选五预测下期号码 新亚洲娱乐 时时彩稳赚万能码