flutter 使用预先计算的元素大小优化ListView

lrpiutwd  于 2023-05-29  发布在  Flutter
关注(0)|答案(2)|浏览(438)

我需要使用常用的ListView.builder构造函数在ListView中显示一个非常大的元素集合(来自文件的图像)。我静态地知道每个元素的大小,所以从技术上讲,我也知道列表视图的总高度。问题是,我需要使用与列表相关联的ScrollController,以编程方式在列表的某个位置向上或向下滚动。
在iOS中,相同的场景可以使用TableView来解决,并且可以指示下划线框架关于每个元素的正确大小,而不需要预先构建每个元素来知道正确的大小(这是Flutter应该执行的,以便向上或向下滚动列表)。
就我所知,不可能指示Flutter每个列表元素的大小,但我认为这些信息对于创建更优化的列表视图非常有用,至少在这个特定的情况下。
你知道有什么库或其他可能性来改进这种逻辑吗?

b4qexyjb

b4qexyjb1#

创建ScrollController对象:

ScrollController _scrollController = ScrollController();

将ScrollController与ListView关联:

ListView.builder(
    controller: _scrollController,
        ...
        )

确定要滚动到的位置。假设你有你想要滚动到的元素的索引作为targetIndex。
根据元素的大小和目标索引计算滚动偏移量。假设每个元素都有一个固定的高度itemHeight:

double offset = targetIndex * itemHeight;

使用ScrollController的animateTo方法滚动到计算的偏移:

_scrollController.animateTo(
    offset,
    duration: Duration(milliseconds: 500), // Optional: Add animation duration
    curve: Curves.easeInOut, // Optional: Add animation curve
        );

这将平滑地滚动到列表中所需的位置。
将ListView.builder替换为您的实际实现,并根据您的特定用例调整变量和值。

@override
    void dispose() {
    _scrollController.dispose();
    super.dispose();
    }
hmtdttj4

hmtdttj42#

我认为最好的解决方案是一个名为scrollable_positioned_list的软件包:一个flutter list,允许滚动到列表中的特定项目,它是一个google包。
Link to the package on pub dev
ScrollablePositionedList的工作方式与ListView的构建器版本非常相似,不同之处在于列表可以滚动或跳转到特定项。
可以使用以下命令创建ScrollablePositionedList:

final ItemScrollController itemScrollController = ItemScrollController();
final ScrollOffsetController scrollOffsetController = ScrollOffsetController();
final ItemPositionsListener itemPositionsListener = ItemPositionsListener.create();
final ScrollOffsetListener scrollOffsetListener = ScrollOffsetListener.create()

ScrollablePositionedList.builder(
  itemCount: 500,
  itemBuilder: (context, index) => Text('Item $index'),
  itemScrollController: itemScrollController,
  scrollOffsetController: scrollOffsetController,
  itemPositionsListener: itemPositionsListener,
  scrollOffsetListener: scrollOffsetListener,
);

然后可以滚动到特定的项目:

itemScrollController.scrollTo(
  index: 150,
  duration: Duration(seconds: 2),
  curve: Curves.easeInOutCubic);

相关问题