Flutter保持页面状态AutomaticKeepAliveClientMixin

使用bottomNavigationBar切换底部tab,再切换回来就会丢失之前的状态(重新渲染列表,丢失滚动条位置)。

解决方法

使用 AutomaticKeepAliveClientMixin

重写 bool get wantKeepAlive => true;

build方法中调用super.build(context);

class _MovieListState extends State<MovieList> with AutomaticKeepAliveClientMixin {
  List movieList = new List();

  @override
  bool get wantKeepAlive => true;
    
  @override
  Widget build(BuildContext context) {
    super.build(context);
    return ListView.builder(
      itemCount: movieList.length,
      itemBuilder: (context, index) {
        return MovieItem(
          item: movieList[index],
        );
      },
    );
  }
}

达到保存列表状态的效果

ss.gif

引用自官网的说明:

Subclasses must implement wantKeepAlive, and their build methods must call super.build (the return value will always return null, and should be ignored).

Then, whenever wantKeepAlive's value changes (or might change), the subclass should call updateKeepAlive.

The type argument T is the type of the StatefulWidget subclass of the State into which this class is being mixed.

参考链接:

AutomaticKeepAliveClientMixin mixin

posted @ 2020-03-09 01:27  SchneiderABB  阅读(2333)  评论(0编辑  收藏  举报