Flutter-ListView分组(像iOS一样优雅)

iOS的tableView使用分组是很方便的，但是flutter就没有那么友好了，

像网上找的解决方法都是很多的固定场景，

每次使用都要写不同的逻辑，而且代码和逻辑耦合很严重，

不知道有没有人弄过，但是我没找到，

于是自己动手造个轮子，通过逻辑处理封装，

使用方法和iOS的基本一致，

当然目前只提供了数据分组、sectionHeader、sectionFooter、无数据占位和列表header和footer。

601592793365_.pic.jpg

如上图，红色的是整个列表的header，一般会放个轮播图什么的，

时间是section的header，下面的帖子就是第一个section的row。

使用方法也很简单：

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
      _list.add(_counter.toString());
    });
  }

  ListViewGroupHandler _groupHandler;
  List<String> _list = <String>[];

  @override
  Widget build(BuildContext context) {
    _groupHandler = ListViewGroupHandler(
      //日志开关
      openLog: true,
      //分组数量，需要自行根据data设置，默认1
      numberOfSections: 1,
      //每组cell个数，需要自行根据data设置
      numberOfRowsInSection: (section) => _list.length,
      //indexPath: IndexPath(section,row,index)
      cellForRowAtIndexPath: (indexPath) => Text(_list[indexPath.row]),
      //头部
      header: () => Text("header"),
      //占位Placeholder
      emptyPlaceholder: () {
        return Center(
          child: Text("暂无数据！"),
        );
      },
    );

    return Scaffold(
        appBar: AppBar(
          // Here we take the value from the MyHomePage object that was created by
          // the App.build method, and use it to set our appbar title.
          title: Text(widget.title),
        ),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: () => _incrementCounter(),
        ),
        body: ListView.builder(
          itemBuilder: (context, index) => _groupHandler.cellAtIndex(index),
          itemCount: _groupHandler.allItemCount,
        ));
  }
}

Git 链接地址:
https://gitee.com/zeng_li_zhi/ListViewGroupHandler
安装，在pubspec文件里添加:

list_group_handler:
    git:
      url: https://gitee.com/zeng_li_zhi/ListViewGroupHandler.git
      ref: 'v0.0.1' #这是tag, nullsafe 支持为'v1.0.0'

2021-03-02
1、新增无数据时占位widget支持。
2、增加demo。

2021-07-11
1、新增nullsafe版本 v1.0.0，上一版本为v0.0.1

2022-07-20
1、推荐官方类似效果 sticky_headers https://www.jianshu.com/p/a25d747be7b4

最后编辑于：2022.07.20 16:06:18