flutter_tableview ListView标题栏悬停效

先附上源码地址:flutter_tableview
https://github.com/chenfanfang/flutter_tableView

flutter_tableview可以理解成iOS中的UITableView。将数据源拆分成组的概念，每一组都有最多一个 “组的头部”，和若干个cell item。每一组的头部都会悬停在最顶部，下面来看下效果图。

simple_demo.gif wrap_refresh_demo.gif

安装flutter_tableview:

在flutter项目中的 pubspec.yaml 文件添加如下依赖:

dependencies:
  flutter_tableView: ^1.0.1

如何使用

使用方法和iOS的UITableView大致是一样的思路

class SimpleDemoPageBody extends StatefulWidget {
  @override
  _SimpleDemoPageBodyState createState() => _SimpleDemoPageBodyState();
}

class _SimpleDemoPageBodyState extends State<SimpleDemoPageBody> {
  // 有多少个组
  int sectionCount = 3;

  // 每组有多少行（每组有多少个cell item）
  int _rowCountAtSection(int section) {
    if (section == 0) {
      return 5;
    } else if (section == 1) {
      return 10;
    } else {
      return 20;
    }
  }

  // 创建每组的 section header widget
  Widget _sectionHeaderBuilder(BuildContext context, int section) {
    return InkWell(
      onTap: () {
        print('click section header. -> section:$section');
      },
      child: Container(
        alignment: Alignment.centerLeft,
        padding: EdgeInsets.only(left: 16.0),
        color: Color.fromRGBO(220, 220, 220, 1),
        height: 100,
        child: Text('I am section header -> section:$section'),
      ),
    );
  }

  // 根据 section 和 row, 创建对应的 cell item widget
  Widget _cellBuilder(BuildContext context, int section, int row) {
    return InkWell(
      onTap: () {
        print('click cell item. -> section:$section row:$row');
      },
      child: Container(
        padding: EdgeInsets.only(left: 16.0),
        alignment: Alignment.centerLeft,
        decoration: BoxDecoration(
            border: Border(
                bottom: BorderSide(
          color: Color.fromRGBO(240, 240, 240, 1),
        ))),
        height: 50.0,
        child: Text('I am cell -> section:$section  row$row'),
      ),
    );
  }

  // section header widget 的高度
  double _sectionHeaderHeight(BuildContext context, int section) {
    return 50.0;
  }

  // cell item widget 的高度
  double _cellHeight(BuildContext context, int section, int row) {
    return 50.0;
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      //FlutterTableView
      child: FlutterTableView(
        sectionCount: sectionCount,
        rowCountAtSection: _rowCountAtSection,
        sectionHeaderBuilder: _sectionHeaderBuilder,
        cellBuilder: _cellBuilder,
        sectionHeaderHeight: _sectionHeaderHeight,
        cellHeight: _cellHeight,
      ),
    );
  }
}

如果你想让FlutterTableView 内部的ListView嵌套一层自定义的Widget (比如嵌套一个下拉刷新或者上拉加载更多的Widget flutter_easyrefresh)方法如下:

FlutterTableView(
        sectionCount: this.dataSourceList.length,
        rowCountAtSection: _rowCountAtSection,
        sectionHeaderBuilder: _sectionHeaderBuilder,
        cellBuilder: _cellBuilder,
        sectionHeaderHeight: _sectionHeaderHeight,
        cellHeight: _cellHeight,
        listViewFatherWidgetBuilder: (BuildContext context, Widget listView) {
          return EasyRefresh(
            key: _easyRefreshKey,
            limitScroll: true,
            refreshHeader: MaterialHeader(key: _headerKey),
            refreshFooter: MaterialFooter(key: _footerKey),
            onRefresh: () async {},
            loadMore: () async {},
            child: listView,
          );
        },
      ),
      
// 具体使用方法请下载demo查看