flutter 實(shí)現(xiàn)多布局列表的示例代碼
閑來(lái)無(wú)事,寫(xiě)個(gè)玩安卓的首頁(yè),實(shí)現(xiàn)多布局、banner的效果。其中涉及知識(shí)點(diǎn)側(cè)滑,pageview 切換頁(yè)面,頁(yè)面跳轉(zhuǎn)傳值及回調(diào)數(shù)據(jù)(在側(cè)滑里)。這些都是基于自己學(xué)習(xí)做的demo。
當(dāng)然還有很多瑕疵需要完善。
先看效果:
這里主要講解多布局,所以其他功能可以參考github
https://github.com/chentaishan/flutter_app
多布局功能代碼:
@override void initState() { // TODO: implement initState super.initState(); // 獲取網(wǎng)絡(luò)數(shù)據(jù) 一個(gè)banner 一個(gè)列表 initBannerData(); initHomeList(); } @override Widget build(BuildContext context) { Widget itemColor = Divider( color: Colors.blue, ); Widget nullColor = Divider( color: Colors.white, ); return ListView.separated( itemCount: _homeListBeanEntity.data.datas.length, itemBuilder: (BuildContext context, int index) { // 根據(jù)規(guī)則,抽取banner方法和listitem return _bannerBeanData != null && _bannerBeanData.data.length > 0&&index==0 ? bannerItem(_bannerBeanData) : listItem(_homeListBeanEntity, index); }, separatorBuilder: (BuildContext context, int index) { return index > 0 ? itemColor : nullColor; }, ); }
void initBannerData() async { result = await getNetWorkData("https://www.wanandroid.com/banner/json"); print("list=" + result); if (result.toString().length > 0) { BannerBeanEntity bannerBeanEntity = BannerBeanEntity.fromJson(json.decode(result)); if (bannerBeanEntity != null) { setState(() { _bannerBeanData = bannerBeanEntity; }); } } } getNetWorkData(String url) async { var uri = Uri.parse(url); HttpClient httpClient = new HttpClient(); HttpClientRequest request = await httpClient.getUrl(uri); HttpClientResponse httpClientResponse = await request.close(); var str = await httpClientResponse.transform(utf8.decoder).join(); print(httpClientResponse.toString()); return str; } void initHomeList() async { result =await getNetWorkData("https://www.wanandroid.com/article/list/0/json"); print("list=" + result); if (result.toString().length > 0) { HomeListBeanEntity homeListBeanEntity = HomeListBeanEntity.fromJson(json.decode(result)); if (homeListBeanEntity != null) { setState(() { _homeListBeanEntity = homeListBeanEntity; }); } } }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Flutter 用自定義轉(zhuǎn)場(chǎng)動(dòng)畫(huà)實(shí)現(xiàn)頁(yè)面切換
本篇介紹了 fluro 導(dǎo)航到其他頁(yè)面的自定義轉(zhuǎn)場(chǎng)動(dòng)畫(huà)實(shí)現(xiàn),F(xiàn)lutter本身提供了不少預(yù)定義的轉(zhuǎn)場(chǎng)動(dòng)畫(huà),可以通過(guò) transitionBuilder 參數(shù)設(shè)計(jì)多種多樣的轉(zhuǎn)場(chǎng)動(dòng)畫(huà),也可以通過(guò)自定義的 AnimatedWidget實(shí)現(xiàn)個(gè)性化的轉(zhuǎn)場(chǎng)動(dòng)畫(huà)效果。2021-06-06Flutter?Getx中的put和lazyPut函數(shù)使用案例解析
這篇文章主要為大家介紹了Flutter?Getx中的put和lazyPut函數(shù)使用案例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07Android studio 自動(dòng)換行和取消自動(dòng)換行操作
這篇文章主要介紹了Android studio 自動(dòng)換行和取消自動(dòng)換行操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-04-04Android在項(xiàng)目中接入騰訊TBS瀏覽器WebView的教程與注意的地方
今天小編就為大家分享一篇關(guān)于Android在項(xiàng)目中接入騰訊TBS瀏覽器WebView的教程與注意的地方,小編覺(jué)得內(nèi)容挺不錯(cuò)的,現(xiàn)在分享給大家,具有很好的參考價(jià)值,需要的朋友一起跟隨小編來(lái)看看吧2018-10-10