flutter - 如何使用 NestedScrollView 实现这一点?
问题描述
我已将代码简化为一个小型示例应用程序,因此请考虑以下代码:
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(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage>
with SingleTickerProviderStateMixin {
TabController _tabController;
ScrollController _scrollController;
ScrollController _sliverScrollController;
var tabs = ['Tab1', 'Tab2', 'Tab3'];
@override
void initState() {
super.initState();
_tabController = TabController(vsync: this, length: 3);
_scrollController = ScrollController();
_sliverScrollController = ScrollController();
}
@override
void dispose() {
// "Unmount" the controllers:
_tabController.dispose();
_scrollController.dispose();
_sliverScrollController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 3,
child: Scaffold(
body: NestedScrollView(
controller: _scrollController,
headerSliverBuilder:
(BuildContext context, bool innerBoxIsScrolled) {
return [
SliverOverlapAbsorber(
handle: NestedScrollView.sliverOverlapAbsorberHandleFor(
context),
sliver: SliverAppBar(
backgroundColor: Colors.black,
pinned: true,
expandedHeight: 400,
elevation: 0,
flexibleSpace: FlexibleSpaceBar(
collapseMode: CollapseMode.pin,
background: Flex(
direction: Axis.vertical,
children: <Widget>[
Padding(
padding: EdgeInsets.only(
top: 75,
left: 10,
right: 10,
bottom: 5),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Text('Testing',
overflow: TextOverflow.ellipsis,
maxLines: 2,
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.bold)),
Padding(
padding:
EdgeInsets.only(bottom: 5)),
Text('More Text',
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.bold))
],
))
],
)))),
SliverPersistentHeader(
delegate: _SliverAppBarDelegate(PreferredSize(
preferredSize:
Size(MediaQuery.of(context).size.width, 30),
child: TabBar(
labelColor: Colors.white,
tabs: tabs
.map((String name) => Container(
color: Colors.blue, child: Tab(text: name)))
.toList(),
))),
pinned: true)
];
},
body: TabBarView(
children: [_buildPanel1(), _buildPanel2(), _buildPanel3()],
),
),
));
}
_wrapTabWidget(tabWidget) {
return Builder(
builder: (BuildContext context) {
return CustomScrollView(
controller: _sliverScrollController,
slivers: <Widget>[
SliverOverlapInjector(
handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
),
SliverToBoxAdapter(
child: Padding(
padding: EdgeInsets.only(top: 10, left: 10, right: 10),
child: tabWidget))
],
);
},
);
}
_buildPanel1() {
return _wrapTabWidget(ListView(
shrinkWrap: true,
children: new List<Widget>.generate(
100,
(i) => ListTile(
leading: Icon(Icons.shopping_cart), title: Text('item $i')))));
}
_buildPanel2() {
return _wrapTabWidget(Text('Panel 2'));
}
_buildPanel3() {
return _wrapTabWidget(Text('Panel 3'));
}
}
class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
_SliverAppBarDelegate(this._tabBar);
final PreferredSizeWidget _tabBar;
@override
double get minExtent => _tabBar.preferredSize.height;
@override
double get maxExtent => _tabBar.preferredSize.height;
@override
Widget build(
BuildContext context, double shrinkOffset, bool overlapsContent) {
return new Container(
color: Colors.blue,
child: _tabBar,
);
}
@override
bool shouldRebuild(_SliverAppBarDelegate oldDelegate) {
return false;
}
}
我真正想做的是有效地将相同的“滚动控制器”应用于整个页面,并能够滚动 tab1 中的列表小部件,并让 TabBar 向上滚动并将其锚定到顶部,然后继续在列表显示。
所以,如果我要点击并按住这里:
然后开始滚动,它将滚动整个屏幕,直到 TabBar 到达顶部,然后将 TabBar 固定在那里并继续滚动底部的 ListView。
我希望我解释得足够好!:)
解决方案
这是你想要的吗?
class TestWidget extends StatefulWidget {
@override
_TestWidgetState createState() => _TestWidgetState();
}
class _TestWidgetState extends State<TestWidget>
with SingleTickerProviderStateMixin {
bool isAbsorbing = false;
TabController _primaryTC;
final List<Tab> tabs = [
Tab(
text: "tab1",
),
Tab(
text: "tab2",
),
Tab(
text: "tab3",
)
];
@override
void initState() {
super.initState();
_primaryTC = TabController(length: tabs.length, vsync: this);
_primaryTC.index = tabs.length - 1;
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: NestedScrollView(
headerSliverBuilder:
(BuildContext context, bool innerBoxIsScrolled) {
return []..add(SliverAppBar(
flexibleSpace: FlexibleSpaceBar(
title: Text(""),
),
expandedHeight: 500,
pinned: true,
floating: true,
snap: false,
));
},
body: Container(
child: Column(
children: <Widget>[
TabBar(
tabs: tabs,
controller: _primaryTC,
),
Expanded(flex:1,child: TabBarView(
controller: _primaryTC,
children: tabs
.map((tab) => Container(
child: ListView.builder(
itemCount: 30,
itemBuilder: (context, index) {
return Container(height: 50,alignment: Alignment.center,child: Text("test"),);
}),
width: double.infinity,
height: double.infinity,
alignment: Alignment.center,
))
.toList()))
],
),
)),
),
);
}
}
推荐阅读
- python - 提取以某个字符开头的所有单词
- c++ - 当我尝试为我的程序提供 3 个输入时,它需要 4 个才能正常运行。这是为什么?
- java - 如何在java中拒绝空格作为输入
- typescript - 如何在 dxdatagrid 列标题中添加复选框控件?
- python - 访问嵌套列表项并在不规则列表中打印某些索引
- c - 当我们传递一个指向单个字符的 char * 时,%s 在 C 中的行为如何
- http - 快速路由路径在生产中不起作用
- python - 如何格式化cmd输出并将其附加到reportlab PDF
- java - 由于新项目中的 values.xml,Android 资源编译失败
- angular - 无法在 Chrome 上打开 base64 pdf