性久久久久久,性色av浪潮av色欲av,国产日韩精品在线观看,亚洲色成人网一二三区

歡迎您光臨深圳塔燈網(wǎng)絡(luò)科技有限公司!
電話圖標(biāo) 余先生:13699882642

網(wǎng)站百科

為您解碼網(wǎng)站建設(shè)的點點滴滴

Flutter開發(fā) 項目實戰(zhàn)02

發(fā)表日期:2018-10 文章編輯:小燈 瀏覽次數(shù):2203

接著上篇

這篇最主要的是:

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

  2. httpClient (flutter的網(wǎng)絡(luò)請求,暫時會簡單的數(shù)據(jù)處理,關(guān)于數(shù)據(jù)模型化還沒未到更快捷的方法,需要硬敲出來,沒有類似iOS中的YYModel一樣,直接一套)

3. 頁面的跳轉(zhuǎn)并傳參(上下級頁面通常需要傳遞參數(shù),類似詳情頁,可以減少網(wǎng)絡(luò)請求的次數(shù))

  1. flutter_refresh(flutter的一個上拉刷新下拉加載的插件,調(diào)用很簡單,關(guān)于自定義刷新動畫還需要更多的去了解,順便介紹關(guān)于根據(jù)條件來動態(tài)布局)

1. Flutter的橫向列表GridView

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

我的頁面 image

這個頁面總體是個ListView,對應(yīng)的是每個item,其中紅框就是個GridView,以下是創(chuàng)建GridView的代碼

 //GridView的創(chuàng)建代碼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的個數(shù)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;}
工具類

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

2. Flutter的網(wǎng)絡(luò)請求

 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();}//更新數(shù)據(jù)setState(() {if(page ==1) {dataSource = newData;}else {for (int a =0; adataSource.add(newData[a]);}}});}else {print("error");}}

還要包含兩個頭文件哦

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

頁面一進去的話在這里調(diào)用

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

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

3. Flutter頁面的跳轉(zhuǎn)并傳參

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

關(guān)于頁面跳轉(zhuǎn)的代碼

 ////跳轉(zhuǎn)段子詳情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, ),),

接下來看看頁面之間如何傳參數(shù)

 ////這是二級頁面的接收的寫法class JokeDetailPageextends StatefulWidget { JokeDetailPage ({var key,this.mapd}):super(key:key);//接收從上一個頁面?zhèn)鱽淼闹?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類型的數(shù)據(jù),也可以傳其他數(shù)據(jù)類型的。在上級頁面跳轉(zhuǎn)的時候就可以有提示了

 ////跳轉(zhuǎn)段子詳情 其中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);////這里就可以傳遞參數(shù)了 } ) ); }

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);});}); }

以上就可以實現(xiàn)基本的刷新頁面了哦。

下拉刷新 上拉加載

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

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

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

 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根據(jù)了dataSource來判斷,如果dataSource有值說明可以創(chuàng)建Listview刷新頁面顯示數(shù)據(jù)了,但是如果為空的話就返回一個居中的文本,顯示正在加載中。一個簡單的三目運算就可以完成根據(jù)數(shù)據(jù)來布局,這種用法貫穿了很多的布局。所以要Get哦。

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

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

還有學(xué)習(xí)網(wǎng)站:

Flutter中文網(wǎng)

Flutter社區(qū)中文資源

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


本頁內(nèi)容由塔燈網(wǎng)絡(luò)科技有限公司通過網(wǎng)絡(luò)收集編輯所得,所有資料僅供用戶學(xué)習(xí)參考,本站不擁有所有權(quán),如您認(rèn)為本網(wǎng)頁中由涉嫌抄襲的內(nèi)容,請及時與我們聯(lián)系,并提供相關(guān)證據(jù),工作人員會在5工作日內(nèi)聯(lián)系您,一經(jīng)查實,本站立刻刪除侵權(quán)內(nèi)容。本文鏈接:http://caipiao93.cn/18058.html
相關(guān)APP開發(fā)
 八年  行業(yè)經(jīng)驗

多一份參考,總有益處

聯(lián)系深圳網(wǎng)站公司塔燈網(wǎng)絡(luò),免費獲得網(wǎng)站建設(shè)方案及報價

咨詢相關(guān)問題或預(yù)約面談,可以通過以下方式與我們聯(lián)系

業(yè)務(wù)熱線:余經(jīng)理:13699882642

Copyright ? 2013-2018 Tadeng NetWork Technology Co., LTD. All Rights Reserved.