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)
		  ),
	  ),
	]
  ),
)


内容来源与作者发布和网络,如有版权相关问题请及时与我们取得联系,我们将立即删除。

关于作者

ym2020 点击这里给我发消息

友情链接

  1. GitHub
  2. Twitter
  3. Facebook
在线客服