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

2019-11-13 10:16
有事在發生 閱讀:426 評論: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號 )

时时彩改欢乐生肖 重庆快乐10分走势图爱彩乐 千炮捕鱼游戏下载电脑版 这年月做什么生意最赚钱 大众麻将的玩法和规则 爬行馆赚钱吗 25选5开奖走势图 双色球17018蓝球预测 希诺水杯代理赚钱吗 325经典版下载苹果 千炮捕鱼达人破解版无限 天天捕鱼游戏大厅下载 手游冒险岛如何赚钱 36选7中奖奖金多少 河南快3计划全天 山西快乐10分开奖结果 黑龙江36选7中奖结果查询