alibaba / fish-redux

An assembled flutter application framework.
https://github.com/alibaba/fish-redux
Apache License 2.0
7.33k stars 843 forks source link

DynamicFlowAdapter长列表怎么做性能优化呢?一次加载200条以上就开始卡顿了。 #425

Closed alphasen closed 5 years ago

alphasen commented 5 years ago
void _init(Action action, Context<ListState> ctx) {
  final List<ItemState> initItems=<ItemState>[
    ItemState(desc: 'xxs'),
  ];
  for(int i=0;i<10000;i++){
    initItems.add(ItemState(desc: 'xxs$i'));
  }
  ctx.dispatch(ListActionCreator.initItemsAction(initItems));
}
zjuwjf commented 5 years ago

能提供最小化的复现的demo么?

alphasen commented 5 years ago

研究了官方demo后想到了个解决方案

主要思路是对一次加载回来的长List进行分页,跟进滚动条的位置判断加载上一页或下一页 TODO: 加载下一页或上一页后滚动位置需要进行矫正

关键代码

/// state
class ListState implements GlobalBaseState, Cloneable<ListState> {
  List<ItemState> list; // 总数据
  List<ItemState> currentScreenList; // 显示的数据
  int currentPage; // 当前页
  int pageSize; // 每页显示条数
  int totalPages; // 总页数
/// view 中
_scrollController.addListener(() {
    double current = _scrollController.position.pixels;
    double maxHeight = _scrollController.position.maxScrollExtent;
    if (state.currentPage + 1 > state.totalPages) {
      dispatch(ListActionCreator.loadNewData());
    }
    if (current == maxHeight) {
      // 当到达底部的时候加载下一页
      dispatch(ListActionCreator.loadNextPage());
    }
    if (current <= 0) {
      dispatch(ListActionCreator.loadPrePage());
    }
    if (state.currentScreenList.length > state.pageSize * 2) {
      if (current <= 0) {
        dispatch(ListActionCreator.ensurePageTo2Screen(false));
        // TODO 滚动位置需要矫正
        _scrollController.jumpTo(
            maxHeight - 500); // 新增一屏的同时清除了上面一屏数据,需要矫正滚动条的位置 两屏的中间向下1/2屏幕的位置
      }
      if (current == maxHeight) {
        dispatch(ListActionCreator.ensurePageTo2Screen(true));
        _scrollController.jumpTo(
            maxHeight - 500); // 新增一屏的同时清除了上面一屏数据,需要矫正滚动条的位置 两屏的中间向下1/2屏幕的位置
      }
    }
  });
alphasen commented 5 years ago

现在的问题变成了:怎么获取screen的高度 effect中使用double height=prefix0.MediaQuery.of(ctx.context).size.height;页面会崩溃,不懂要怎么在view中获取正确的context