tp7309 / flutter_sticky_and_expandable_list

粘性头部与分组列表Sliver实现 Build a grouped list, which support expand/collapse section and sticky headers, support use it with sliver widget.
MIT License
140 stars 29 forks source link

Performance issue #25

Closed xiangtailiang closed 3 years ago

xiangtailiang commented 3 years ago

All item in ExampleSection.items will call initState at once time, although the item is not visible. This will affect the smoothness of scrolling and the expanded/collapse action.

The example code as follow, the ExampleSection.items size set to 50.


  @override
  Widget build(BuildContext context) {
    //In this example, we create a custom model class(ExampleSection).
    //class ExampleSection implements ExpandableListSection<String> {}
    //so: SliverExpandableChildDelegate<String, ExampleSection>()
    return Scaffold(
        appBar: AppBar(title: Text("ListView Example")),
        body: ExpandableListView(
          builder: SliverExpandableChildDelegate<String, ExampleSection>(
              sectionList: sectionList,
              headerBuilder: _buildHeader,
              itemBuilder: (context, sectionIndex, itemIndex, index) {
                String item = sectionList[sectionIndex].items[itemIndex];
                return ListItem(index, item);

              }),
        ));
  }

class ListItem extends StatefulWidget {
  final int index;
  final String item;

  ListItem(this.index, this.item);

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

class _ListItemState extends State<ListItem> {
  @override
  Widget build(BuildContext context) {
    return ListTile(
      leading: CircleAvatar(
        child: Text("${widget.index}"),
      ),
      title: Text(widget.item),
    );
  }

  @override
  void initState() {
    print("tiger-test initState: ${widget.index}");
    super.initState();
  }

  @override
  void dispose() {
    print("tiger-test dispose: ${widget.index}");
    super.dispose();
  }
}

The log: I/flutter (16350): tiger-test initState: 1 I/flutter (16350): tiger-test initState: 2 ... 省略 ... I/flutter (16350): tiger-test initState: 49 I/flutter (16350): tiger-test initState: 50

tp7309 commented 3 years ago

ExpandableListView is a ListView of sections, all items in an section are build at once. If you want item build when visible, use sectionBuilder, wrap a sub listview in custom section:

class _SectionWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 100,
      child: ListView(xxx),
    );
  }
}
tp7309 commented 3 years ago

I have update an nested listview example, may be it can help you.