Flutter--分组列表实现思路

代码


import 'package:flutter/material.dart';class TableView extends StatelessWidget {final Widget Function(BuildContext context, int section) buildHeader;final Widget Function(BuildContext context, int section) buildFooter;final Widget Function(BuildContext context, int section, int row) buildItem;final int number;final int Function(int section) itemCount;final Widget Function(BuildContext context, int section) sectionSpacer;final Widget Function(BuildContext context, int row) itemSpacer;final EdgeInsetsGeometry padding;const TableView({@required this.buildItem,@required this.itemCount,@required this.number,this.buildHeader,this.buildFooter,this.sectionSpacer,this.itemSpacer,this.padding});@overrideWidget build(BuildContext context) {return ListView.separated(padding: padding,itemBuilder: (context, section) {ListView itemsView = ListView.separated(physics: NeverScrollableScrollPhysics(),itemBuilder: (context, row) => buildItem(context, section, row),separatorBuilder: itemSpacer ?? (context, row) => SizedBox(width: 0, height: 0,),itemCount: itemCount(section),shrinkWrap: true,);return Column(children: [if (buildHeader != null) buildHeader(context, section),itemsView,if (buildFooter != null) buildFooter(context, section),],mainAxisSize: MainAxisSize.min,);},itemCount: number,separatorBuilder: sectionSpacer ?? (context, section) => SizedBox(width: 0, height: 0,),);}}

使用

  @overrideWidget build(BuildContext context) {return TableView(buildItem: (BuildContext context, int section, int row) {Color color = Colors.white;if (section == 0) color = Colors.red;if (section == 1) color = Colors.blue;return Container(child: Row(children: [Text('row: $row')],), color: color,);},itemCount: (int section) {if (section == 0) return 1;if (section == 1) return 2;return 3;},number: 3,buildHeader: (context, section) => Text("HeaderView: $section"),buildFooter: (context, section) => Text("FooterView: $section"),sectionSpacer: (context, section) => SizedBox(height: 20,),itemSpacer: (context, row) => SizedBox(height: 2,),);}

Flutter--分组列表实现思路相关推荐

flutter 分组列表
先看看效果是不是你想要的 library grouped_listview;import 'package:flutter/material.dart'; typedef TGroup GroupFu ...
【Android 仿微信通讯录导航分组列表-下】自定义View为RecyclerView打造右侧索引导航栏IndexBar
本篇文章已授权微信公众号 guolin_blog (郭霖)独家发布转载请标明出处: http://blog.csdn.net/zxt0601/article/details/52420706 本文出 ...
[WP8.1UI控件编程]SemanticZoom控件实现分组列表
11.1.5 SemanticZoom实现分组列表 SemanticZoom控件可以让用户实现一种更加高级的列表,这种列表可以对列表的项目进行分组,同时这个SemanticZoom控件会提供两个具有相 ...
Android 仿微信通讯录导航分组列表-上】使用ItemDecoration为RecyclerView打造带悬停头部的分组列表
本文是Android导航分组列表系列上,因时间和篇幅原因分上下,最终上下合璧,完整版效果如下: 上部残卷效果如下:两个ItemDecoration,一个实现悬停头部分组列表功能,一个实现分割线(官 ...
【Android 仿微信通讯录导航分组列表-上】使用ItemDecoration为RecyclerView打造带悬停头部的分组列表
*本篇文章已授权微信公众号 guolin_blog (郭霖)独家发布转载请标明出处: http://blog.csdn.net/zxt0601/article/details/52355199 本文 ...
高级控件之分组列表视图(ExpandableListView)
一．ExpandableListView的基础知识和ListView不同的是它是一个两级的滚动列表视图,每一个组可以展开,显示一些子项,类似于 QQ列表,这些项目来至于ExpandableListA ...
elasticsearch：使用top_hits聚合获取分组列表
文章目录业务需求实现 java代码 kibana请求体返回示例业务需求需要获取分组列表,查询返回值不是一个列表,而是根据某个字段分组每组返回前5条,不足5条,则返回全部按照时间倒序实现 ...
电商-商品搜索列表设计思路
商品搜索列表主要元素:1.主图 2.价格 3.是否包邮 4付款人数 5.主标题 6.店铺所在省市 7.店铺名称 8.店铺认证以上八大要素,构成了es商品索引的基本内容,其他内容尽量不要在商品索引中 ...
仿QQ分组列表（UITableView）
// // ViewController.m // 仿QQ分组列表 // // Created by lanqs on 15/1/26. // Copyright (c) 2015年 Tanqihon ...
Android 自定义RecycleView实现多级树(类似qq分组列表)
由于工作需要开发一个类似qq分组列表功能,所以就自定义RecycleView来实现功能效果图: 自定义View: import java.util.ArrayList; import java.ut ...

Flutter--分组列表实现思路

Flutter--分组列表实现思路相关推荐

最新文章

热门文章