我实现了TabBar
,其中TabbarView
除了NestedScrollView
之外都是动态的。当我想尝试滑动Tab
时,TabBarView
上的位置没有响应。即使我设置了isScrollable = true;
我的代码
@override
Widget build(BuildContext context) {
return ScopedModelDescendant<MainModel>(
builder: (context, child, model) {
return Scaffold(
// backgroundColor: Colors.red,
body: NestedScrollView(
headerSliverBuilder:
(BuildContext context, bool innerBoxIsScrolled) {
return [
SliverAppBar(
pinned: false,
backgroundColor: Colors.white,
flexibleSpace: FlexibleSpaceBar(
collapseMode: CollapseMode.pin,
background: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(height: 5),
_buildBackBtn(context),
SizedBox(height: 20),
_buildCarouselLabel(),
SizedBox(height: 15),
Container(
margin: model.isLoadingKnowledge ||
model.carouselList
.where((carousel) =>
carousel.relationships
.category.attr.name ==
_selectedTab.attributes.name)
.toList()
.length ==
0
? EdgeInsets.only(top: 60)
: EdgeInsets.zero,
alignment: Alignment.center,
child: model.isLoadingKnowledge
? Center(child: CircularProgressIndicator())
: model.carouselList
.where((carousel) =>
carousel.relationships
.category.attr.name ==
_selectedTab.attributes.name)
.toList()
.length ==
0
? Center(
child: Text(
"There is no carousel on ${_selectedTab.attributes.label}"))
: KnowledgeImageSlider(_selectedTab)),
SizedBox(height: 15),
],
),
),
expandedHeight: 380.0,
bottom: TabBar(
labelColor: Colors.grey[700],
unselectedLabelColor: Colors.grey[400],
controller: _tabController,
indicatorColor: Color(0xff3FBCD7),
indicatorSize: TabBarIndicatorSize.tab,
indicatorWeight: 3.0,
isScrollable: true,
labelStyle: TextStyle(
fontSize: 16,
height: 2.2,
fontWeight: FontWeight.w500,
color: Colors.white),
// indicator: ShapeDecoration(
// // color: Colors.white,
// shape: const StadiumBorder(
// side: BorderSide(
// color: Colors.white,
// width: 2.0,
// ),
// ) +
// const StadiumBorder(
// side: BorderSide(
// color: Colors.transparent,
// width: 8.0,
// ),
// ),
// ),
tabs: model.knowledgeCategoryList
.map((cat) => Tab(text: cat.attributes?.label))
.toList(),
),
)
];
},
body: model.isLoadingKnowledge
? Center(child: CircularProgressIndicator())
: ListView.builder(
itemCount: model.knowledgeList
.where((article) =>
article.relationships.category.attr.label ==
_selectedTab.attributes.label ??
"Picks")
.toList()
.length,
itemBuilder: (context, i) {
var article = model.knowledgeList
.where((article) =>
article.relationships.category.attr.label ==
_selectedTab.attributes?.label ??
"PICKS")
.toList()[i];
return ArticleItemCard(article);
},
)),
);
},
);
}
结果:
如何使其像往常一样滚动/滑动标签?
任何答案将不胜感激。