记一次flutter长列表的滚动优化

2,964

在一般的app中,列表是必不可少的,一般的列表分为两种,一种是静态列表,一种是动态列表

静态列表:

已经知道列表的总长度,不会去变动列表内容

动态列表:

列表内容可能为空也可能为无限加载列表。

列表的展示方式

如果列表内容不超过屏幕而且列表内容不是太复杂的话直接使用column组件或者是ListView

column组件和ListView会一次性全部渲染他的子组件。

超过了屏幕而且列表内容比较复杂,则使用listView.builder()或者是使用CustomScrollView中的SliverList

这两个组件会判断子组件是否是在可视区内,在可视区内就渲染,不在就销毁组件,以节省性能

SliverList 必须指定一个delegate,有两个SliverChildBuilderDelegateSliverChildDelegate

SliverChildBuilderDelegate是用于加载动态列表

SliverChildDelegate是用来加载静态列表

sliverList的子组件必须是sliver家族的,也可以使用SliverToBoxAdapter来显示其他类型的组件。

CustomScrollView(
            slivers: <Widget>[
              SliverToBoxAdapter(child: Banners()),
              SliverList(
                delegate: SliverChildBuilderDelegate(
                  (BuildContext context, int index) {
                    var ele = this.articles[index];
                    return Container(
                      margin: EdgeInsets.symmetric(vertical: 5),
                      child: Material(
                        color: Color.fromRGBO(29, 19, 17, 1),
                        child: Ink(
                          child: InkWell(
                            splashColor: Color.fromRGBO(12, 4, 6, 1),
                            highlightColor: Color.fromRGBO(33, 33, 33, 0.5),
                            child: Articles(articleInfo: ele),
                            onTap: () async {
                              Navigator.pushNamed(
                                context,
                                '/articleInfo',
                                arguments: ele,
                              );
                            },
                          ),
                        ),
                      ),
                    );
                  },
                  childCount: articles.length,
                ),
              )
            ],
          ),