flutter 實(shí)現(xiàn)多布局列表的示例代碼

更新時間：2020年02月02日 12:04:11 作者：泰山123

這篇文章主要介紹了flutter 實(shí)現(xiàn)多布局列表的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

閑來無事，寫個玩安卓的首頁，實(shí)現(xiàn)多布局、banner的效果。其中涉及知識點(diǎn)側(cè)滑，pageview 切換頁面，頁面跳轉(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ù) 一個banner 一個列表
  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;
    });
   }
  }
 }

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: