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

闲来无事,写个玩安卓的首页,实现多布局、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;
    });
   }
  }
 }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Flutter质感设计之列表项

    本文为大家分享了Flutter实现列表项的具体代码,供大家参考,具体内容如下 创建achievement_view_list_item.dart文件,具体的实现每一个列表项. import 'package:flutter/material.dart'; // 创建类,成就目标 class Target { // 常量,构建函数 const Target({ // 自变量,目标名称 this.name, // 自变量,目标奖励 this.reward }); // 最终值,成就目标名称 fina

  • android使用flutter的ListView实现滚动列表的示例代码

    现如今打开一个 App,比如头条.微博,都会有长列表,随着我们不断地滑动,视窗内的内容也会不断地更新.今天就用 Flutter 实现一下这种效果. 这里的表现其实就相当于有一个固定长度的容器,然后超出的内容是不可见的,只有当你向上或向下滑动屏幕时,视窗外看不见的内容才会出现在视窗中.如果在 web 开发时,是需要容器加上样式 overflow: auto; 要想用 Flutter 实现,其实也是很简单的,因为 Flutter 为我们提供了 ListView 组件. ListView 主要有以下几

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

    闲来无事,写个玩安卓的首页,实现多布局.banner的效果.其中涉及知识点侧滑,pageview 切换页面,页面跳转传值及回调数据(在侧滑里).这些都是基于自己学习做的demo. 当然还有很多瑕疵需要完善. 先看效果: 这里主要讲解多布局,所以其他功能可以参考github https://github.com/chentaishan/flutter_app 多布局功能代码: @override void initState() { // TODO: implement initState sup

  • Flutter实现自定义筛选框的示例代码

    目录 一.首先自定义筛选框的按钮视图,布局很简单,一个listView就可以搞定. 二.定义筛选数据展示列表视图. 一.首先自定义筛选框的按钮视图,布局很简单,一个listView就可以搞定. 1.在数据model中添加了一个selectedModel属性,用来记录当前已选择的筛选项(目前仅支持单选). 2.当按钮数量小于3个时,按钮最大宽度为屏幕宽度的1/3:小于屏幕宽度时,则为屏幕宽度/按钮数量. 具体代码如下: var text = model.selectedFilterModel !=

  • Android ItemDecoration 实现分组索引列表的示例代码

    本文介绍了Android ItemDecoration 实现分组索引列表的示例代码,分享给大家.具体如下: 先来看看效果: 我们要实现的效果主要涉及三个部分: 分组 GroupHeader 分割线 SideBar 前两个部分涉及到一个ItemDecoration类,也是我们接下来的重点,该类是RecyclerView的一个抽象静态内部类,主要作用就是给RecyclerView的ItemView绘制额外的装饰效果,例如给RecyclerView添加分割线. 使用ItemDecoration时需要继

  • python实现合并两个有序列表的示例代码

    题目描述 将两个升序链表合并为一个新的升序链表并返回.新链表是通过拼接给定的两个链表的所有节点组成的. LeetCode原题地址:https://leetcode-cn.com/problems/merge-two-sorted-lists/ 测试用例 示例1 输入:l1 = [1,2,4], l2 = [1,3,4] 输出:[1,1,2,3,4,4] 示例2 输入:l1 = [], l2 = [] 输出:[] 示例3 输入:l1 = [], l2 = [0] 输出:[0] 代码详解 因为Lee

  • 微信小程序拖拽排序列表的示例代码

    拖拽排序列表 思路 界面分为两层: 底层,正常列表展示,拖拽的时候不做处理(大牛直接加了动画,原谅我技艺不精,还没实现) 顶层,movable-view组件,不长按不展示,之后长按才展示,且没有点击事件. 事件 主要监听:longpress , touchmove , touchend 三个事件 longpress 保障长按才有效,并设定许多其他值. touchmove 滑动的时候触发 判断是否需要滑动页面,因为 movable-area组件 滑动事件被catch掉,无法滑动: 记录滑动经过的项

  • 使用JavaScript制作待办事项列表的示例代码

    目录 JavaScript待办事项列表 如何制作JavaScript待办事项列表 第 1 步: 项目的基本结构 第 2 步: 使用 HTML 创建一个输入位置 第 3 步: 制作查看 Todo 文本的列表 第 4 步: 使用 JavaScript 激活待办事项列表 JavaScript 解释 JavaScript待办事项列表 我在此处展示了有关如何使用 JavaScript创建待办事项列表 HTML 的完整信息和教程.我借助HTML 和 CSS来设计它.在 JavaScript 的帮助下实现.

  • Flutter实现资源下载断点续传的示例代码

    目录 协议梳理 实现步骤 写在最后 协议梳理 一般情况下,下载的功能模块,至少需要提供如下基础功能:资源下载.取消当前下载.资源是否下载成功.资源文件的大小.清除缓存文件.而断点续传主要体现在取消当前下载后,再次下载时能在之前已下载的基础上继续下载.这个能极大程度的减少我们服务器的带宽损耗,而且还能为用户减少流量,避免重复下载,提高用户体验. 前置条件:资源必须支持断点续传.如何确定可否支持?看看你的服务器是否支持Range请求即可. 实现步骤 1.定好协议.我们用的http库是dio:通过校验

  • 利用React实现虚拟列表的示例代码

    目录 列表项高度固定 代码实现 列表项高度动态 代码实现 思路说明 一些需要注意的问题 结尾 大家好,我是前端西瓜哥.这次我们来看看虚拟列表是什么玩意,并用 React 来实现两种虚拟列表组件. 虚拟列表,其实就是将一个原本需要全部列表项的渲染的长列表,改为只渲染可视区域内的列表项,但滚动效果还是要和渲染所有列表项的长列表一样. 虚拟列表解决的长列表渲染大量节点导致的性能问题: 一次性渲染大量节点,会占用大量 GPU 资源,导致卡顿: 即使渲染好了,大量的节点也持续占用内存.列表项下的节点越多,

  • QT实现制作一个ListView列表的示例代码

    目录 1.概述 2.代码示例 1.自定义QListWidget 2.自定义QListWidgetItem 3.使用 3.图片演示 1.概述 案例:使用Qt制作一个ListView.点击ListView的Item可以用于测试OpenCV的各种效果 自定义一个:MainListView继承QListWidget .MainListViewItem继承QListWidgetItem 2.代码示例 1.自定义QListWidget mainlistview.h class MainListView :

随机推荐