[英]overlap tabbarview with tabs in flutter
我需要像这样实现标签: https://i.stack.imgur.com/12iVI.png
我已经使用此代码完成了 tabBar 我没有像附图中那样获得透明背景
Column(
children: <Widget>[
Material(
color: Colors.transparent,
child: TabBar(
indicatorSize: TabBarIndicatorSize.label,
unselectedLabelColor: Colors.black,
indicator: UnderlineTabIndicator(
borderSide: BorderSide(width: 2.0, color: Color(0xffD65A32)),
insets: EdgeInsets.symmetric(horizontal: 10.0)),
isScrollable: true,
controller: _tabController,
tabs: [
Tab(
child: Text("Maps", style: tabStyle),
),
Tab(
child: Text("Sections", style: tabStyle),
),
Tab(
child: Text("Events", style: tabStyle),
),
Tab(
child: Text("Gallery", style: tabStyle),
),
Tab(
child: Text("Archives", style: tabStyle),
)
],
),
),
Expanded(
child: TabBarView(
controller: _tabController,
children: [
MyHomePage(),
Icon(Icons.directions_transit),
Icon(Icons.directions_bike),
Icon(Icons.directions_transit),
Icon(Icons.directions_bike),
],
),
),
],
);
这是我的标签代码
因此,您真正想要的是Stack
的行为,而不是Column
的行为,因为您希望TabBar
位于您的内容前面而不是上面。
意味着简单地将Column
更改为Stack
并将TabBar
推到children
Array 的末尾以将其带到前面应该是诀窍。
这是我建议的代码:
@override
Widget build(BuildContext context) {
TabController controller = TabController(
initialIndex: 0,
length: 5,
vsync: this
);
return Stack(
alignment: Alignment.topCenter,
children: <Widget>[
TabBarView(
controller: controller,
children: [
Container(color: Colors.red),
Container(color: Colors.blue),
Container(color: Colors.yellow),
Container(color: Colors.green),
Container(color: Colors.purple),
],
),
Material(
color: Colors.transparent,
child: TabBar(
indicatorSize: TabBarIndicatorSize.label,
unselectedLabelColor: Colors.black,
indicator: UnderlineTabIndicator(
borderSide: BorderSide(width: 2.0, color: Color(0xffD65A32)),
insets: EdgeInsets.symmetric(horizontal: 10.0)),
isScrollable: true,
controller: controller,
tabs: [
Tab(
child: Text("Maps",),
),
Tab(
child: Text("Sections",),
),
Tab(
child: Text("Events",),
),
Tab(
child: Text("Gallery",),
),
Tab(
child: Text("Archives",),
)
],
),
),
],
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.