• <rp id="vcwyv"></rp>

      <b id="vcwyv"></b>
      <tt id="vcwyv"></tt>

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

      2019-11-13 10:16
      有事在發生 閱讀:1643 評論:0 贊:2
      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全天服務
      意見反饋:1294855032@qq.com

      掃一掃關注我們

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

      夫妻性姿势真人示范 - 视频 - 在线观看 - 影视资讯 - 唯爱网