flutter_tableview 列表標題欄懸停效果茶鉴，同iOS中的UITableView。

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

flutter_tableview可以理解成iOS中的UITableView必孤。將數(shù)據(jù)源拆分成組的概念持隧，每一組都有最多一個 “組的頭部”晒来，和若干個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;
    }
  }

  // 創(chuàng)建每組的 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'),
      ),
    );
  }

  // 根據(jù) section 和 row, 創(chuàng)建對應的 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 內(nèi)部的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查看