我写了一个非常基本的应用程序,该应用程序的SliverAppBar和3个选项卡包装在NestedScrollView中。 每当我向上滚动列表并显示应用程序栏时,所有其他滚动位置都会重置。
这是我的代码:
import 'dart:io';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primaryColor: Colors.white,
),
home: NewsScreen(),
debugShowCheckedModeBanner: false,
);
}
}
class NewsScreen extends StatefulWidget {
@override
State<StatefulWidget> createState() => _NewsScreenState();
}
class _NewsScreenState extends State<NewsScreen> {
final List<String> _tabs = <String>[
"Featured",
"Popular",
"Latest",
];
@override
Widget build(BuildContext context) {
return Material(
child: Scaffold(
body: DefaultTabController(
length: _tabs.length,
child: NestedScrollView(
headerSliverBuilder:
(BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverOverlapAbsorber(
handle:
NestedScrollView.sliverOverlapAbsorberHandleFor(context),
child: SliverSafeArea(
top: false,
bottom: Platform.isIOS ? false : true,
sliver: SliverAppBar(
title: Text('Tab Demo'),
floating: true,
pinned: true,
snap: true,
forceElevated: innerBoxIsScrolled,
bottom: TabBar(
tabs: _tabs
.map((String name) => Tab(text: name))
.toList(),
),
),
),
),
];
},
body: TabBarView(
children: _tabs.map((String name) {
return SafeArea(
top: false,
bottom: false,
child: Builder(
builder: (BuildContext context) {
return NotificationListener<ScrollNotification>(
onNotification: (scrollNotification) {
return true;
},
child: CustomScrollView(
key: PageStorageKey<String>(name),
slivers: <Widget>[
SliverOverlapInjector(
handle: NestedScrollView
.sliverOverlapAbsorberHandleFor(context),
),
SliverPadding(
padding: const EdgeInsets.all(8.0),
sliver: SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Column(
children: <Widget>[
Container(
height: 150,
width: double.infinity,
color: Colors.blueGrey,
child: Column(
mainAxisAlignment:
MainAxisAlignment.center,
children: <Widget>[
Text('$name $index')
],
),
),
SizedBox(
height: 8,
)
],
);
},
childCount: 30,
),
),
),
],
),
);
},
),
);
}).toList(),
),
),
),
),
);
}
}
精选->向下滚动至5->流行选项卡->向下滚动至7->更改选项卡最新->向上滚动直到显示应用栏->更改至其他选项卡。 (*在两个ios / android上) 屏幕截图:https://user-images.githubusercontent.com/8788888/65146455-6cd95f00-da4e-11e9-94ac-deb0253c5eaf.gif
精选->向下滚动到5->更改流行的标签->向下滚动到7->更改最新的标签->向下滚动到7->更改回“精选标签”向上滚动到4->更改为其他标签。 (*仅在android上) 屏幕截图:https://user-images.githubusercontent.com/8788888/65148178-41587380-da52-11e9-9d42-c8164c4a7d89.gif
*以上将所有标签栏视图的滚动位置重置为0
任何帮助将不胜感激。谢谢!