Flutter List View 自动滚动到大项目顶部

Question

我使用的是flutter 3.0.1，

我想制作一个包含很多项目的大可滚动列表视图。然后，自动滚动到一个元素。我知道该怎么做，但我在处理大列表时遇到了麻烦。

我已经为我的问题制作了视频。 https://youtube.com/shorts/ekvsMC8Azrc

在视频中你可以看到我有很多不同颜色的大容器。所以我向下滚动（很多），然后当我想滚动回顶部时，所有容器都会快速显示，并且我接近顶部。

在代码中，我只有一个

ListView.builder

，其中包含不同大小和随机颜色的容器列表。我已经尝试过

cacheExtent

但我不知道如何使用它。

ListView.builder(
    cacheExtent: 1000,
    itemBuilder: (BuildContext ctx, int index) {
      return allContainer[index];
    },
    itemCount: allContainer.length,
  ),

所以我想知道是否有办法可以正常向上滚动？因为我想用大图像替换容器，但是当我滚动到顶部时，它很丑而且不用户友好。

我拥有的另一个解决方案是使用

SingleChildScrollView

但它没有优化，我无法直接滚动到特定项目。你有解决办法吗？

编辑：我添加我的 StatefulWidget

import 'dart:async';
import 'dart:math';

import 'package:flutter/material.dart';
import 'package:manga/widget/center_circular_indicator.dart';

class WeirdListView extends StatefulWidget {
  const WeirdListView({Key? key}) : super(key: key);

  @override
  _WeirdListViewState createState() => _WeirdListViewState();
}

class _WeirdListViewState extends State<WeirdListView> {
  Future<Widget> getImage(int i) async {
    double width = MediaQuery.of(context).size.width;
    return Container(
      color: Color((Random().nextDouble() * 0xFFFFFF).toInt()).withOpacity(1.0),
      // child: imageW,
      width: width,
      height: Random().nextInt(10000) + 5000,
    );
  }

  List<Widget> getAllImage() {
    List<Widget> allPages = [];
    for (int i = 1; i <= 20; i++) {
      allPages.add(FutureBuilder(
          future: getImage(i),
          builder: (BuildContext context, AsyncSnapshot<Widget> text) {
            return text.data ?? const CenterCircularProgressIndicator();
          }));
    }
    return allPages;
  }

  @override
  Widget build(BuildContext context) {
    List<Widget> allImages = getAllImage();
    return Scaffold(
      body: ListView.builder(
        cacheExtent: 1000,
        itemBuilder: (BuildContext ctx, int index) {
          return allImages[index];
        },
        itemCount: allImages.length,
      ),
    );
  }
}

函数getImage实际上是将图像添加到容器中。

Answer 1

您应该传递自己的ScrollController，该对象控制可滚动小部件的行为方式。

所以你应该像这样将它传递给你的ListView

ListView.builder(
        contrller: _scrollController,
        itemBuilder: (BuildContext ctx, int index) {
          return allImages[index];
        },
        itemCount: allImages.length,
      )

然后您可以在单击按钮时调用方法

jumpTo

或

animateTo

，例如自动滚动到顶部。

请注意，您也可以将其与

SingleChildScrollView

小部件一起使用。

Answer 2

伙计，也许一个解决方案是，在没有第三方包的情况下执行此操作的自定义方法是创建一个镜头跳过。您可以在查询后端或像这样的小部件中实现此逻辑。

https://github.com/UriDevzera/lazyloadinglistview

当然，这是一个非常简单的例子，我认为应该根据您的需要进行改进。例如，加载器可以是顶部列表上的进度线指示器，或者列表视图内的 itens，有更好的方法。

请让我知道你们对此有何看法。