一、appbar中添加Tabbar.
appbar中添加Tabbar这种使我们常见的场景。
class NewsPage extends StatefulWidget {
@override
_NewsState createState() => _NewsState();
}
class _NewsState extends State<NewsPage> with TickerProviderStateMixin{
List<String> _tabs = ["历史", "新闻", "军事", "搞笑",'美图','视频',"经济","推荐"];
late TabController _tabController;
@override
void initState() {
// TODO: implement initState
super.initState();
_tabController = TabController(length: _tabs.length, vsync: this);
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text("新闻列表"),
bottom: TabBar(
unselectedLabelColor: Colors.black,
indicatorColor: Colors.red,
labelColor: Colors.red,
indicatorSize: TabBarIndicatorSize.tab,
indicatorWeight: 3.0, //底部高度
indicatorPadding: EdgeInsets.all(10),
controller: _tabController,
isScrollable: true, // Tabbar是否可水平滚动,false
physics: BouncingScrollPhysics(),
dragStartBehavior: DragStartBehavior.start, // 默认start 更为平滑
tabs: _tabs.map((e) {
return Tab(text: e);
}).toList(),
),
),
body: TabBarView(
controller: _tabController,
children: _tabs.map((e) {
return Container(
color: Colors.red,
alignment: Alignment.center,
child: Text(e),
);
}).toList(),
),
);
}
}

二、没有appbar的Tabbar
这一种方式更加的灵活,也是在应用中更常用的界面。
class Demo extends StatefulWidget {
@override
_DemoState createState() => _DemoState();
}
class _DemoState extends State<Demo>
with TickerProviderStateMixin {
late TabController _tabController;
var _tabs = ["热门", "推荐", "图片", "科技", "小视频","热门", "推荐", "图片", "科技", "小视频"];
@override
void initState() {
// TODO: implement initState
super.initState();
_tabController = TabController(length: _tabs.length, vsync: this);
}
@override
void dispose() {
_tabController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [ Image.network('https://img0.baidu.com/it/u=4071201799,223427537&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=218'),
Container(
child: Column(
children: [
Container(
height: 50,
child: TabBar(
tabs: _tabs.map((e){
return Tab(text: e,);
}).toList(),
unselectedLabelColor: const Color(0xffacb3bf),
indicatorColor: Color(0xFFffac81),
labelColor: Colors.black,
indicatorSize: TabBarIndicatorSize.tab,
indicatorWeight: 3.0, //底部高度
indicatorPadding: EdgeInsets.all(10),
controller: _tabController,
isScrollable: true, // Tabbar是否可水平滚动,false
physics: BouncingScrollPhysics(),
dragStartBehavior: DragStartBehavior.start, // 默认start 更为平滑
),
),
Container(
color: Colors.orange,
height: 400,
child: TabBarView(
controller: _tabController,
children: _tabs.map((e){
return Center(child: Text(e,style: TextStyle(fontSize: 100),),);
}).toList()
),
),
],
),
)
],
),
);
}
}

网友评论