Flutter - 我正在尝试循环滚动有限列表，但遇到性能问题

Question

我现在有一个挑战，它涉及一个有限列表的无限滚动，像这样一遍又一遍地循环重复它：

循环工作的图像

我让它以某种方式与 ListView 一起工作，但它会在索引 70 处停止工作（可能是因为内存不足）。

这里有人做过吗，或者有人知道我该怎么做吗？

这是我的代码：

class ProfessionalProfileOnboardingImageListWidget extends StatefulWidget {
  final List<String> imageList;
  final ScrollController scrollController;
  final bool isReversedScrolling;

  const ProfessionalProfileOnboardingImageListWidget({
    required this.imageList,
    required this.scrollController,
    this.isReversedScrolling = false,
    Key? key,
  }) : super(key: key);

  @override
  State<ProfessionalProfileOnboardingImageListWidget> createState() =>
      _ProfessionalProfileOnboardingImageListWidgetState();
}

class _ProfessionalProfileOnboardingImageListWidgetState
    extends State<ProfessionalProfileOnboardingImageListWidget> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      controller: widget.scrollController,
      physics: const NeverScrollableScrollPhysics(),
      clipBehavior: Clip.none,
      scrollDirection: Axis.horizontal,
      itemBuilder: (context, index) {
        widget.scrollController.animateTo(
          widget.isReversedScrolling
              ? -80 * double.parse(index.toString())
              : 80 * double.parse(index.toString()),
          duration: const Duration(seconds: 1),
          curve: Curves.easeIn,
        );
        if (widget.isReversedScrolling) {
          widget.imageList.insertAll(0, widget.imageList);
        } else {
          widget.imageList.insert(widget.imageList.length, widget.imageList[index]);
        }
        print(index);

        return Container(
          child: Image.asset(widget.imageList[index]),
          height: 80,
          width: 80,
          margin: const EdgeInsets.only(right: Dimens.md),
        );
      },
    );
  }
}

我提前谢谢你<3

Answer 1

而不是 Listview 您可以使用：

dependencies:
  infinite_scroll_pagination: ^3.1.0

例子：

class CharacterListView extends StatefulWidget {
  @override
  _CharacterListViewState createState() => _CharacterListViewState();
}

class _CharacterListViewState extends State<CharacterListView> {
  static const _pageSize = 20;

  final PagingController<int, CharacterSummary> _pagingController =
      PagingController(firstPageKey: 0);

  @override
  void initState() {
    _pagingController.addPageRequestListener((pageKey) {
      _fetchPage(pageKey);
    });
    super.initState();
  }

  Future<void> _fetchPage(int pageKey) async {
    try {
      final newItems = await RemoteApi.getCharacterList(pageKey, _pageSize);
      final isLastPage = newItems.length < _pageSize;
      if (isLastPage) {
        _pagingController.appendLastPage(newItems);
      } else {
        final nextPageKey = pageKey + newItems.length;
        _pagingController.appendPage(newItems, nextPageKey);
      }
    } catch (error) {
      _pagingController.error = error;
    }
  }

  @override
  Widget build(BuildContext context) => 
      PagedListView<int, CharacterSummary>(
        pagingController: _pagingController,
        builderDelegate: PagedChildBuilderDelegate<CharacterSummary>(
          itemBuilder: (context, item, index) => CharacterListItem(
            character: item,
          ),
        ),
      );

  @override
  void dispose() {
    _pagingController.dispose();
    super.dispose();
  }
}

更多请看

Answer 2

好的，所以这个问题的答案是使用 3 个 Carousel Sliders 并启用自动播放和一些小的调整。

如果您遇到同样的问题，请在此处查看 lib 文档： https://pub.dev/packages/carousel_slider

谢谢！