首页 > 解决方案 > 如何使用单子滚动视图实现延迟滚动

问题描述

我知道列表视图构建器是延迟滚动的实现,它在我只显示列表视图的情况下工作正常,但是如果我有一个由几个列表视图构建的页面并且我使用单子滚动视图扭曲页面怎么办。我怎样才能在这种情况下实现相同的效果。就像我的页面将在顶部一样:带有scrollDirection:Axis.horizo​​ntal的列表视图构建器,而不是更小的静态数据和底部新的列表视图构建器垂直,该列表视图构建器延迟加载将不起作用,因为物理:NeverScrollableScrollPhysics()。所以总而言之,有一种方法可以实现延迟滚动,或者我必须在向下滚动时实现分页。

例子:

   DrawerListHeader(
      text: "Popular Leagues",
      leftPadding: leftPadding,
      icon: Container(
        height: iconSize,
        width: iconSize,
        child: SvgPicture.asset(AppIcons.cupGreen),
      ),
    ),
    ListView.builder(
        physics: NeverScrollableScrollPhysics(),
        padding: const EdgeInsets.all(0),
        shrinkWrap: true,
        itemCount: _favoriteLeagues.length,
        itemBuilder: (BuildContext context, int index) {
          return LeagueRow(
            rowHeight: rowHeight,
            leftPadding: leftPadding,
            name: _favoriteLeagues[index].name,
            logoPath: _favoriteLeagues[index].logoPath,
            iconSize: iconSize,
          );
        }),
    DrawerListHeader(
      text: "Countries",
      leftPadding: leftPadding,
      icon: SvgPicture.asset(AppIcons.countriesGreen),
    ),
    ListView.builder(
      physics: NeverScrollableScrollPhysics(),
      itemCount: _countries.length,
      padding: const EdgeInsets.all(0),
      shrinkWrap: true,
      itemBuilder: (BuildContext context, int index) {
        return ExpandableListView(
          country: _countries[index],
          leftPadding: leftPadding,
          rowHeight: rowHeight - 5,
          isClose: isClose,
          iconSize: iconSize,
        );
      },
    )

标签: flutter

解决方案


As per my understanding Slivers are the good option for this kind of advance UI patterns.

One of the great article for better sliver understanding and usage.


推荐阅读