html listview ios,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 {

int _counter = 0;

void _incrementCounter() {

setState(() {

_counter++;

_list.add(_counter.toString());

});

}

ListViewGroupHandler _groupHandler;

List _list = [];

@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,

));

}

}

2021-03-02

1、新增无数据时占位widget支持。

2、增加demo。