我正在尝试制作一个粘性TabBar,当我按任意它的选项卡时,将我向下滚动到它的一部分,我使用了用于粘性条的条子和用于滚动的键来实现。它正在工作,但是当我从顶部到最低的底部,或者反之亦然,或者当我的零件高度很高时,它告诉我'findRenderObject'在null上被调用。
这是我的银条委托人代码
class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
_SliverAppBarDelegate({
@required this.minHeight,
@required this.maxHeight,
@required this.child,
});
final double minHeight;
final double maxHeight;
final Widget child;
@override
double get minExtent => minHeight;
@override
double get maxExtent => math.max(maxHeight, minHeight);
@override
Widget build(
BuildContext context, double shrinkOffset, bool overlapsContent) {
return new SizedBox.expand(child: child);
}
@override
bool shouldRebuild(_SliverAppBarDelegate oldDelegate) {
return maxHeight != oldDelegate.maxHeight ||
minHeight != oldDelegate.minHeight ||
child != oldDelegate.child;
}
}
这是我的条子小部件主体代码
body: CustomScrollView(
controller: scrollController,
slivers: <Widget>[
SliverList(
delegate: SliverChildListDelegate(
[
Container(
height: data.size.height / 3,
child: new Swiper(
itemBuilder: (BuildContext context, int index) {
return new Image.asset(
imgs[index],
fit: BoxFit.fill,
);
},
indicatorLayout: PageIndicatorLayout.COLOR,
autoplay: true,
itemCount: imgs.length,
pagination: new SwiperPagination(
margin: new EdgeInsets.all(5.0),
builder: new DotSwiperPaginationBuilder(
color: Colors.grey.shade400,
activeColor: yumColors.pink)),
)),
],
),
),
makeTabBarHeader(),
SliverList(
key: sliverListtKey,
delegate: SliverChildListDelegate(
[
Padding(padding: const EdgeInsets.all(8.0), child: Container()),
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
height: 900,
child: Card(
color: yumColors.pink,
key: overKey,
child: Center(
child: Text(
"Overview",
style: TextStyle(
color: Colors.white,
fontSize: 3 * SizeConfig.textMultiplier),
)),
),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
height: 900,
child: Card(
key: revKey,
color: yumColors.pink,
child: Center(
child: Text(
"Reviews",
style: TextStyle(
color: Colors.white,
fontSize: 3 * SizeConfig.textMultiplier),
)),
),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
height: 900,
child: Card(
key: menuKey,
color: yumColors.pink,
child: Center(
child: Text(
"Menu",
style: TextStyle(
color: Colors.white,
fontSize: 3 * SizeConfig.textMultiplier),
)),
),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
height: 900,
child: Card(
key: contactKey,
color: yumColors.pink,
child: Center(
child: Text(
"Contact",
style: TextStyle(
color: Colors.white,
fontSize: 3 * SizeConfig.textMultiplier),
)),
),
),
),
Padding(padding: const EdgeInsets.all(8.0), child: Container()),
],
),
),
],
),
);
} }
这是我的粘性标签栏代码
SliverPersistentHeader makeTabBarHeader() {
return SliverPersistentHeader(
pinned: true,
delegate: _SliverAppBarDelegate(
minHeight: 60.0,
maxHeight: 60.0,
child: Container(
color: Colors.white,
child: TabBar(
onTap: (val) {
switch (val) {
case 0:
{
scrollController.position.ensureVisible(
overKey.currentContext.findRenderObject(),
alignment:
0.0, // How far into view the item should be scrolled (between 0 and 1).
duration: const Duration(seconds: 1),
);
}
break;
case 1:
{
scrollController.position.ensureVisible(
revKey.currentContext.findRenderObject(),
alignment:
0.0, // How far into view the item should be scrolled (between 0 and 1).
duration: const Duration(seconds: 1),
);
}
break;
case 2:
{
scrollController.position.ensureVisible(
menuKey.currentContext.findRenderObject(),
alignment:
0.0, // How far into view the item should be scrolled (between 0 and 1).
duration: const Duration(seconds: 1),
);
}
break;
case 3:
{
scrollController.position.ensureVisible(
contactKey.currentContext.findRenderObject(),
alignment:
0.0, // How far into view the item should be scrolled (between 0 and 1).
duration: const Duration(seconds: 1),
);
}
break;
}
},
unselectedLabelColor: Colors.grey.shade700,
indicatorColor: yumColors.pink,
indicatorWeight: 2.0,
labelColor: yumColors.pink,
controller: _tabController,
tabs: <Widget>[
new Tab(
child: Text(
"Overview",
style: TextStyle(
fontWeight: FontWeight.w600,
fontSize: 1.6 * SizeConfig.textMultiplier),
),
),
new Tab(
child: Text(
"Reviews",
style: TextStyle(
fontWeight: FontWeight.w600,
fontSize: 1.6 * SizeConfig.textMultiplier),
),
),
new Tab(
child: Text(
"Menu",
style: TextStyle(
fontWeight: FontWeight.w600,
fontSize: 1.6 * SizeConfig.textMultiplier),
),
),
new Tab(
child: Text(
"Contact",
style: TextStyle(
fontWeight: FontWeight.w600,
fontSize: 1.6 * SizeConfig.textMultiplier),
),
),
],
indicatorSize: TabBarIndicatorSize.tab,
),
),
),
);
}