flutter下拉筛选,flutter搜索框

[Flutter Package]类iOS使用方法的SectionTableView

此控件的package我已经托管到了 pub仓库

如果你被墙住了，也可以看 国内镜像

使用方式就是在你的flutter pubspec.yaml中添加依赖：

然后flutter packages get更新依赖即可

最近写demo时发现Flutter自带的ListView widget很简陋，没有分隔线，没有section/row之分，也没有sectionHeader，如果要实现一个有分割线，有section区分，有section header的ListView，耦合会非常严重：

在 上没有找到封装好的这种TableView，于是乎决定自己写一个，命名为SectionTableView

本人是iOS开发，所以习惯了iOS上的UITableView的调用风格，所以在实现flutter的SectionTableView时，决定实现如下功能

为了实现这些功能，并且方便后期增加滚动功能，上下拉刷新功能，使用了StatefulWidget作为父类：

接着在对应的_SectionTableViewState中的build方法中，返回ListView：

熟悉flutter ListView的同学知道，ListView的builder类方法，有一个itemBuilder回调函数，参数是当前的上下文，和将要渲染的行索引index，index对应想要获取的某一行控件(cell或者叫ListItem)，返回非空的组件就证明这个index有值，返回null就表示列表到尽头了。

我们需要做的就是对index进行映射，判断当前index对应的控件，应该是列表里的section header，还是分隔线devider，还是某一行的真正内容cell。

出于性能的考虑，不可能每次调用 _buildCell的时候，都计算一遍index对应的section和row的位置，所以定义了一个类成员变量indexPathSearch，是数组，数组长度就是ListView所有的行，当 _buildCell 的参数index大于等于indexPathSearch的长度的时候，就返回null，表示列表内容到此为止了。

indexPathSearch里每一个元素，就是index对应的section和row（称为indexPath），index指向实际行(cell)的时候，section和row都是大于等于0的，当section大于等于0，row==-1的时候，表示这里是一个section header，当两者都等于-1的时候，表示这里是一个分割线：

计算好了index到indexPath的映射，剩下的就好说了，在_buildCell中，提取indexPath并判断indexPath的内容，返回对应的控件：

这是我的第一个flutter package，目前还很简陋，flutter目前尚且如此，所以大家一起改善它，

下一步将优化如下内容：

如果大家喜欢，请多多star我的 项目GitHub

相关问答

Q1: Flutter listview下拉刷新，上拉加载更多封装

本文在 pull_to_refresh 的基础上对刷新做了封装，可以根据刷新状态自定义想要的头和尾。

本文刷新头和尾都使用的 lottie 动画,

lottie动画可以参考

接下来就可以在需要使用list view刷新的页面使用了 如下：

效果图：

Q2: Flutter：手把手教你使用滚动型列表组件：ListView

ListView的基础创建使用有三种方式：

通过默认构造函数来创建列表，应用场景 = 短列表

这种方式创建的列表存在一个问题：对于那些长列表或者需要较昂贵渲染开销的子组件，即使还没有出现在屏幕中但仍然会被ListView所创建，这将是一项较大的开销，使用不当可能引起性能问题甚至卡顿。

长列表

列表子项之间需要分割线

ListView的进阶使用主要包括：下拉刷新 上拉加载

在Flutter中，ListView结合RefreshIndicator组件实现下拉刷新

通过包裹一层RefreshIndicator，自定义onRefresh回调方法实现

方式有两种：

通过ListView.controller属性可以判断ListView是否滑动到了底部，再进行上拉加载

NotificationListener是一个Widget，可监听子Widget发出的Notification

ListView在滑动时中会发出ScrollNotification类型的通知，可通过监听该通知得到ListView的滑动状态，判断是否滑动到了底部，从而进行上拉加载

NotificationListener有一个onNotification属性，定义了监听的回调方法，通过它来处理加载更多逻辑

不定期分享关于 安卓开发 的干货，追求 短、平、快 ，但 却不缺深度 。

Q3: Flutter Column嵌套Listview不能滚动的问题

如果做这个筛选界面的时候，刚开始最外层用Column嵌套一个Container(红色部分)和ListView。

然后每个Item也是Column嵌套一个Container（大分类）

和GridView(小分类) 。出现的问题就是不能滚动。

在Listview和GridView外面嵌套一个Expanded，不能滚动是因为Container尺寸计算的问题，Expande就是listview有多大就有多大。

Item嵌套

Q4: Flutter 下拉刷新、上拉加载flutter_easyrefresh的使用

flutter_easyrefresh: ^2.0.5

Pub get一下

下面我就以flutter_easyrefresh这个插件进行讲解。

[参照]{ }

Q5: 下拉刷新功能是哪个公司发明的

Yalantis公司。下拉刷新是LorenBrichter发明的，他还为下拉刷新申请了专利，但他很愿意看到这个机制被其他app采用，也曾经说过申请是防御性的。

正如名字一样，EasyRefresh很容易就能在Flutter应用上实现下拉刷新以及上拉加载操作，它支持几乎所有的Flutter控件。它的功能与Android的SmartRefreshLayout很相似，同样也吸取了很多三方库的优点。EasyRefresh中集成了多种风格的Header和Footer，但是它并没有局限性，你可以很轻松的自定义。使用Flutter强大的动画，甚至随便一个简单的控件也可以完成。EasyRefresh的目标是为Flutter打造一个强大，稳定，成熟的下拉刷新框架。