Flutter中的TabBar和TabBarView完整实现代码
这个结构写不好特别容易出错,参考我的吧,这是UI部分代码,顶部4个Tab标签,下面4个ListView,你可以换成其他Widget,代码如下:
Positioned(
top: 325,
left:100,
child:TabBar(
isScrollable: true,
controller: _tabController,
labelColor: Color(0xff3446F2),
unselectedLabelColor: Color(0xff666666),
labelStyle: TextStyle(fontSize: 18),
indicatorColor: Color(0xff3446F2),
indicatorSize: TabBarIndicatorSize.label,
indicatorWeight: 2,
tabs:[
_getTabWidget2("标题1"),
_getTabWidget2("标题2"),
_getTabWidget2("标题3"),
_getTabWidget2("标题4"),
],
onTap: (int index){
this._selectedTab2Index = index;
print('Selected......$index');
},
),
),
Positioned(
top: 380,
left:110,
height: MediaQuery.of(context).size.height - 380 ,
width: MediaQuery.of(context).size.width - 120,
child: TabBarView(
controller: _tabController,
physics: NeverScrollableScrollPhysics(), //禁止滑动
children:[
MediaQuery.removePadding(
removeTop:true,
context:context,
child:ListView.builder(
primary: true,
shrinkWrap: true,
scrollDirection: Axis.vertical,
physics: new ClampingScrollPhysics(),
itemCount: 10,
itemBuilder: (context, index) => this._getTabWidgetPage(index)
),
),
MediaQuery.removePadding(
removeTop:true,
context:context,
child:ListView.builder(
primary: true,
shrinkWrap: true,
scrollDirection: Axis.vertical,
physics: new ClampingScrollPhysics(),
itemCount: 10,
itemBuilder: (context, index) => this._getTabWidgetPage(index)
),
),
MediaQuery.removePadding(
removeTop:true,
context:context,
child:ListView.builder(
primary: true,
shrinkWrap: true,
scrollDirection: Axis.vertical,
physics: new ClampingScrollPhysics(),
itemCount: 10,
itemBuilder: (context, index) => this._getTabWidgetPage(index)
),
),
MediaQuery.removePadding(
removeTop:true,
context:context,
child:ListView.builder(
primary: true,
shrinkWrap: true,
scrollDirection: Axis.vertical,
physics: new ClampingScrollPhysics(),
itemCount: 10,
itemBuilder: (context, index) => this._getTabWidgetPage(index)
),
),
]
),
)
本站内容来源于作者发布和网络转载,如有版权相关问题请及时与我们取得联系,我们将立即删除。