Flutter ListView.separated 加载大列表时掉帧

问题描述

我正在尝试在 Flutter for windows 中显示一个懒惰列表。该列表包含大约 2300 个元素。该列表位于 FutureBuilder 中，它的未来是从 Hive 数据库中获取 2300 个元素。列表中的每个元素都是一个带有一些属性的 MaterialButton。快速滚动时，我无法平滑滚动。一些帧被丢弃。我试过 cacheextend 并将 automatickeepalives 设置为 true。 仍然有同样的问题。当 ItemExtend 设置为较大的数字（比如 40）时，scrollView 工作正常而不会掉帧。在发布模式下，它有更好的性能，但仍然有一些帧被丢弃。解决此问题的最佳解决方案是什么？

//this Rawscrollbar is returned if the future is have some data
RawScrollbar(
                    isAlwaysShown: true,controller: scrollControllermlC,thickness: context.percentWidth * .8,radius: Radius.zero,thumbColor:
                        SearchLeftContainerColors.headPoolListThumbColor,child: ListView.separated(
                      padding: EdgeInsets.fromLTRB(
                          context.percentWidth * .5,context.percentHeight * 0,context.percentWidth * 1,context.percentHeight * 1),itemCount: lengthOfBoxes,// addAutomaticKeepAlives: true,// physics: NeverScrollableScrollPhysics(),itemBuilder: (context,int index) {
                        return ListButtonMEDLC(data[index],index);
                      },separatorBuilder: (BuildContext context,int index) {
                        return Divider(
                          color: SearchLeftContainerColors
                              .headsPoolSeparatorColour,height: 1,);
                      },));




class ListButtonMEDLC extends StatelessWidget {
  final String text;
  final int index;
  ListButtonMEDLC(this.text,this.index);
  @override
  Widget build(BuildContext context) {
    return MaterialButton(
      color:
          (context.watch<ListButtonColorChangerMEDLC>().isSelectedList[index])
              ? SearchLeftContainerColors.headPoolListSelectedColor
              : SearchLeftContainerColors.headPoolListColor,hoverColor:
          (context.watch<ListButtonColorChangerMEDLC>().isSelectedList[index])
              ? SearchLeftContainerColors.headPoolListSelectedColor
              : SearchLeftContainerColors.headPoolListHoverColor,highlightColor: SearchLeftContainerColors.headPoolListHighLightedColor,child: Align(
        alignment: Alignment.centerLeft,child: Text(
          text,style: TextStyle(
              fontSize: context.percentWidth * 1.1,color: (context
                      .watch<ListButtonColorChangerMEDLC>()
                      .isSelectedList[index])
                  ? Colors.white
                  : Colors.black),),onpressed: () {
        context.read<ListButtonColorChangerMEDLC>().changeIsSelectedList(index);
      },);
  }
}

//this it the future of the future builder;
loadDrugBox() async {
  Map Boxes = await DB.Boxes.getBoxAsMap("drugs");
  lengthOfBoxes = Boxes.length;
  return Boxes;
}

//Provider
class ListButtonColorChangerMEDLC extends ChangeNotifier {
  List<bool> isSelectedList = List.generate(lengthOfBoxes,(index) => false);

  changeIsSelectedList(int indexOfSelected) {
    for (int i = 0; i < lengthOfBoxes; i++) {
      if (i == indexOfSelected) {
        isSelectedList[i] = true;
      } else
        isSelectedList[i] = false;
    }
    notifyListeners();
  }
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）