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

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

龙江福彩p62开奖 美国次级贷后什么最赚钱 江西麻将 微乐官网 彩立方彩票群 矿泉水公司如何赚钱 湖北麻将卡五星1元群 英雄联盟我的时代 魔域刷女神材料赚钱 转转麻将软件赢钱 做代购真的很赚钱吗 不卖隔夜肉如何赚钱 大红鹰彩票安卓 2018春节庙会赚钱么 太阁立志5 什么最赚钱 华阳彩票安卓 大学校门摆啥地毯赚钱了 卖封边条赚钱不