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

如何解决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();
  }
}