flutter - 如何使用单子滚动视图实现延迟滚动
问题描述
我知道列表视图构建器是延迟滚动的实现,它在我只显示列表视图的情况下工作正常,但是如果我有一个由几个列表视图构建的页面并且我使用单子滚动视图扭曲页面怎么办。我怎样才能在这种情况下实现相同的效果。就像我的页面将在顶部一样:带有scrollDirection:Axis.horizontal的列表视图构建器,而不是更小的静态数据和底部新的列表视图构建器垂直,该列表视图构建器延迟加载将不起作用,因为物理: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,
);
},
)
解决方案
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.
推荐阅读
- tensorflow - 量化意识训练比量化后差
- python - 在 for 循环中为字典重复值
- excel - 如何使用数组作为范围?
- python - sqlalchemy.exc.NoForeignKeysError:无法确定关系 Userdb.post 上的父/子表之间的连接条件
- python - 过滤掉一些不包含python中列的特定情况的组
- reactjs - 如何在 material-ui 5 中正确使用主题、样式全局变量和溢出
- vue.js - 如何观看多个倒数计时器vuejs
- oracle - 使用 sql loader 加载到表中时跳过前两条记录
- angular - 找不到 i18n .json | 角
- javascript - Javascript输入keyup第一个值=“-”不是NaN