flutter - 使用可折叠应用栏(sliverAppBar)时如何保留tabView的滚动位置?
问题描述
问题:
当 tabView 之一滚动到顶部时(显示 sliverAppBar),tabView 的滚动位置未正确恢复。另一个 tabView 也将滚动到顶部(失去其先前的滚动位置)。
- 如果使用普通应用栏(不可折叠应用栏) ,则不会出现此问题
- 此问题仅在 tabView 滚动到顶部时出现
问题:
使用可折叠应用栏(sliverAppBar)时如何保留tabView的滚动位置?
代码:
import 'package:flutter/material.dart';
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new DefaultTabController(
length: 2,
child: Scaffold(
body: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(
title: Text('Example'),
pinned: true,
floating: true,
forceElevated: innerBoxIsScrolled,
bottom: TabBar(
tabs: <Widget>[
Tab(text: 'One',),
Tab(text: 'Two'),
],
),
),
];
},
body: TabBarView(
children: <Widget>[
Center(
key: PageStorageKey<String>('one'),
child: ListView.builder(
itemBuilder: (BuildContext context, int index) {
return new ListTile(
title: new Text('One Item $index'),
);
},
),
),
Center(
key: PageStorageKey<String>('two'),
child: ListView.builder(
itemBuilder: (BuildContext context, int index) {
return new ListTile(
title: new Text('Two Item $index'),
);
},
),
),
],
),
),
)
);
}
}
解决方案
这实际上是一个已知问题,并且仍然存在。尽管此线程中提到了一种解决方法:
这是使用
extended_nested_scroll_view
包的解决方法。有了这个,我没有遇到任何问题(至少现在)。所以在颤振解决这个问题之前,这个解决方法似乎就足够了。仅在安卓上测试。它的基本要点是:
NestedScrollView
从包装中使用extended_nested_scroll_view
- 将每个选项卡视图包裹在一个
StatefulWidget
withAutomaticKeepAliveClientMixin
和wantKeepAlive => true
- 在那个
StatefulWidget
(s)中,将可滚动内容包装在NestedScrollViewInnerScrollPositionKeyWidget
innerScrollPositionKeyBuilder
使用的键值NestedScrollViewInnerScrollPositionKeyWidget
必须匹配。
推荐阅读
- c - 从 LLVM 代码调用 FFI C 函数时,何时需要“sret”返回指针?
- javascript - ajax请求后变量不更新
- mongodb - SailsJS MongoDB 连接器错误:错误:一致性冲突:创建数据库连接管理器时出现意外错误:MongoError:身份验证失败
- list - Prolog:从原子列表中返回事实列表
- google-api-ruby-client - Google Local Services API 报告持续的服务器错误
- android - java包中我的android文件夹在哪里?
- php - 在 Laravel 中分页前求和关系列
- sql - 使用包含 NOT IN 运算符的 where 子句,Select 语句未返回所需的结果
- dropwizard - 如何在 dropwizard 应用程序中组织、存储库和服务
- python - CNN 使用张量流 from_tensor_slices