接著上篇

這篇最主要的是：

1. GridView (flutter的橫向列表，相對于iOS的UICollectionView)

2. httpClient (flutter的網絡請求，暫時會簡單的數據處理，關于數據模型化還沒未到更快捷的方法，需要硬敲出來，沒有類似iOS中的YYModel一樣，直接一套)

3. 頁面的跳轉并傳參(上下級頁面通常需要傳遞參數，類似詳情頁，可以減少網絡請求的次數)

4. flutter_refresh(flutter的一個上拉刷新下拉加載的插件，調用很簡單，關于自定義刷新動畫還需要更多的去了解，順便介紹關于根據條件來動態布局)

1. Flutter的橫向列表GridView

flutter中橫向列表類似iOS中的UICollectionView的是GridView，開發前我沒有了解到這個控件，對于行數不多的，我直接使用listview自定義item硬寫，當然復制代碼也是很快的，但是當然需要更可塑性的布局方式。看下面這張圖我的頁面中的示例。

我的頁面 image

這個頁面總體是個ListView，對應的是每個item，其中紅框就是個GridView，以下是創建GridView的代碼

 //GridView的創建代碼doubleItemWidth= ScreenWidth /4.0;doubleItemHeight=70.0;var cellItemMiddleInfo =new GestureDetector(onTap: ()=>{},child:new Container(width: ScreenWidth,child:new Column(children: [new Container(width: ScreenWidth,height: SmallMiddleHeight *2.0,color: Colors.white,child:new GridView.builder(gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(mainAxisSpacing:0.0,//豎向間距//crossAxisCount: 4,//橫向Item的個數maxCrossAxisExtent: ScreenWidth/4.0,crossAxisSpacing:0.0,//橫向間距childAspectRatio:(ItemWidth/ItemHeight)),primary:false,itemCount: List2.length,itemBuilder: MyItemImageText,)),new Divider(height:1.0,),new Container(width: ScreenWidth,height:15.0,),new Divider(height:1.0,),],)),);//GridView也需要子item，這是子item的代碼////////中間部分的操作欄 私密文章 我的收藏 我的喜歡 等WidgetMyItemImageText(BuildContext context, int index) {doubleScreenWidth= MediaQuery.of(context).size.width;doubleItemWidth= ScreenWidth /4.0;doubleItemHeight=70.0;var Item=new GestureDetector(onTap: (){},child:new Container(width: ItemWidth,height: ItemHeight,//color: Colors.red,child:new Column(children: [///頂部 圖片new Container(alignment: Alignment.center,margin:new EdgeInsets.only(left:10.0, right:10.0, top:14.0),height:18.0,child:new Container(alignment: Alignment.center,height:18.0,width:18.0,child:new Image.asset(List2[index].itemImageSrc),)),//底部的textnew Container(alignment: Alignment.center,margin:new EdgeInsets.only(left:10.0, right:10.0, top:7.0),height:15.0,child:new Text(List2[index].downText, style:new TextStyle(fontSize:12.0, color:new Color.fromARGB(255,123,123,123)), softWrap:false, overflow: TextOverflow.ellipsis),),],),),);return Item;}

工具類

以上就可以實現一個橫向的GridView，我相信閱覽了代碼后也知道如何使用，其中childAspectRatio屬性是用來設置item寬高比的，如果不設置默認寬高一樣。

2. Flutter的網絡請求

 ListdataSource;void _httpClient(var page)async {var responseBody;var httpClient =new HttpClient();var request =await httpClient.getUrl(Uri.parse("https://www.apiopen.top/satinGodApi?type=1&page=${page}"));var response =await request.close();print(page);if (response.statusCode ==200) {responseBody =await response.transform(utf8.decoder).join();ListnewData = jsonDecode(responseBody)["data"];if(page ==1 &&dataSource !=null) {dataSource.clear();}//更新數據setState(() {if(page ==1) {dataSource = newData;}else {for (int a =0; adataSource.add(newData[a]);}}});}else {print("error");}}

還要包含兩個頭文件哦

 import 'dart:io';import 'dart:convert';

頁面一進去的話在這里調用

 void initState() {super.initState();_httpClient(PAGE);}

其中setState這個方法刷新dataSource可以刷新頁面，flutter會檢測哪里用到了dataSource就會刷新那里的頁面，關于數據的是數組直接[index] 是map里取值就直接["key"]，當然你可以封裝一個數組里面包含返回值的所有key，這樣使用的時候就可以直接dataSource.key.key了，但是我這里沒有，因為巨麻煩。等找到高效的方法后再去修改吧。

3. Flutter頁面的跳轉并傳參

在開發中，很多情況下需要傳遞參數到下級頁面，比如詳情頁，外部請求了一次，詳情頁就沒有必要再請求一次，可以上級頁面傳過來使用。跳轉頁面根據Flutter的文檔，routes的靈感來源于reactjs，routes可以翻譯為路由，可以看到這種routes的思路在目前的設計中彼此借鑒，routes的思路不僅在前端流行，比如在vue、reactjs、Angular中用到，而且在后端應用中也非常成熟。

關于頁面跳轉的代碼

 ////跳轉段子詳情pushAnotherView(int index){print(index);Navigator.of(context).push(new MaterialPageRoute(builder: (BuildContext context) {var data =dataSource[index];return new JokeDetailPage(mapd: data);}));}////返回按鈕new FlatButton(onPressed:(){Navigator.pop(context);},color: Colors.white,child:new Icon(Icons.keyboard_backspace,color: Colors.blue, ),),

接下來看看頁面之間如何傳參數

 ////這是二級頁面的接收的寫法class JokeDetailPageextends StatefulWidget { JokeDetailPage ({var key,this.mapd}):super(key:key);//接收從上一個頁面傳來的值 var mapd;@override_JokeDetailPageState createState() =>new _JokeDetailPageState(mapd,mapd);}class _JokeDetailPageStateextends State{ _JokeDetailPageState(var key,this.mapd); var mapd;@override void dispose() { super.dispose(); }void initState() { super.initState(); } @override Widget build(BuildContext context) { return new MaterialApp(); }}

我這里傳的是個var類型的數據，也可以傳其他數據類型的。在上級頁面跳轉的時候就可以有提示了

 ////跳轉段子詳情 其中index是點擊某個item傳過來的 pushAnotherView(int index){print(index); Navigator.of(context).push( new MaterialPageRoute( builder: (BuildContext context) { var data =dataSource[index]; return new JokeDetailPage(mapd: data);////這里就可以傳遞參數了 } ) ); }

4. flutter_refresh

一個上拉加載，下拉刷新的控件。這是個插件，所以我們需要在pubspec.yaml文件中添加這個插件及版本號，然后運行Packages get來拉到本地來，這個插件的鏈接地址：flutter_refresh。

添加插件

使用方法

 ////chiild直接就是Refresh 添加頭部尾部刷新方法和UI即可 return new Container( child:dataSource!=null ? new Refresh( onFooterRefresh: onFooterRefresh, onHeaderRefresh: onHeaderRefresh, child:new ListView.builder( itemCount:dataSource.length, itemBuilder: buildCelljianyouquanItem1, ) ) : new Container(child:new Text(tab.text)), );// 頂部刷新 Future onHeaderRefresh() { return new Future.delayed(new Duration(seconds:2), () { setState(() { PAGE =1; _httpClient(PAGE); }); }); }// 底部刷新 Future onFooterRefresh()async { return new Future.delayed(new Duration(seconds:2), () { setState(() { PAGE +=1; _httpClient(PAGE);});}); }

以上就可以實現基本的刷新頁面了哦。

下拉刷新 上拉加載

這里圖片加載用了一個插件transparent_image，占位符淡入圖片。

 child:new FadeInImage.memoryNetwork( alignment: Alignment.centerLeft, placeholder: kTransparentImage, image:dataSource[index]["thumbnail"], fit: BoxFit.cover, )

還要介紹以下根據條件動態布局，這個我找了好久的資料沒找到，可能找到的方向不對，看到代碼后，原來如此，也很簡單。就拿下面的一段代碼來做示列。

 return new Container( child:dataSource!=null ? new Refresh( onFooterRefresh: onFooterRefresh, onHeaderRefresh: onHeaderRefresh, child:new ListView.builder( itemCount:dataSource.length, itemBuilder: buildCelljianyouquanItem1, ) ):new Container(child:new Text(tab.text)), );

這里我返回的Container根據了dataSource來判斷，如果dataSource有值說明可以創建Listview刷新頁面顯示數據了，但是如果為空的話就返回一個居中的文本，顯示正在加載中。一個簡單的三目運算就可以完成根據數據來布局，這種用法貫穿了很多的布局。所以要Get哦。

最后附上Github上的Demo的地址：Demo傳送門

還有開放API的地址：開放API

還有學習網站：

Flutter中文網

Flutter社區中文資源

如有不正確的地方幫忙指出，謝謝。

本頁內容由塔燈網絡科技有限公司通過網絡收集編輯所得，所有資料僅供用戶學習參考，本站不擁有所有權，如您認為本網頁中由涉嫌抄襲的內容，請及時與我們聯系，并提供相關證據，工作人員會在5工作日內聯系您，一經查實，本站立刻刪除侵權內容。本文鏈接:http://www.junxiaosheng.cn/18058.html