欢迎来到代码驿站!

Android代码

当前位置:首页 > 移动开发 > Android代码

flutter 实现多布局列表的示例代码

时间:2021-02-06 10:06:48|栏目:Android代码|点击:

闲来无事,写个玩安卓的首页,实现多布局、banner的效果。其中涉及知识点侧滑,pageview 切换页面,页面跳转传值及回调数据(在侧滑里)。这些都是基于自己学习做的demo。
当然还有很多瑕疵需要完善。

先看效果:

这里主要讲解多布局,所以其他功能可以参考github
https://github.com/chentaishan/flutter_app

多布局功能代码:

 @override
 void initState() {
  // TODO: implement initState
  super.initState();
  // 获取网络数据 一个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) {
   // 根据规则,抽取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;
    });
   }
  }
 }

上一篇:Android实现微信右侧顶部下拉对话框

栏    目:Android代码

下一篇:Android拍照或从图库选择图片并裁剪

本文标题:flutter 实现多布局列表的示例代码

本文地址:http://www.codeinn.net/misctech/58197.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有