如何在不使用appbar的情况下添加标签栏
•
问答
b1004940 回答:如何在不使用appbar的情况下添加标签栏
尝试一下
class Demo extends StatefulWidget {
@override
_DemoState createState() => _DemoState();
}
class _DemoState extends State<Demo>
with TickerProviderStateMixin {
TabController _tabController;
@override
void initState() {
// TODO: implement initState
super.initState();
_tabController = new TabController(length: 2,vsync: this);
}
@override
void dispose() {
_tabController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body:Column(
children: <Widget>[
Image.asset("path"),Container(child:
Column(
children: <Widget>[
Container(
height: 60,margin: EdgeInsets.only(left: 60),child: TabBar(
tabs: [
Container(
width: 70.0,child: new Text(
'Tab1',style: TextStyle(fontSize: 20),),Container(
width: 75.0,child: new Text(
'Tab2',)
],unselectedLabelColor: const Color(0xffacb3bf),indicatorColor: Color(0xFFffac81),labelColor: Colors.black,indicatorSize: TabBarIndicatorSize.tab,indicatorWeight: 3.0,indicatorPadding: EdgeInsets.all(10),isScrollable: false,controller: _tabController,Container(
height: 100,child: TabBarView(
controller: _tabController,children: <Widget>[
Container(
child: Text("login"),Container(
child: Text("sign up"),)
]),))
],],)
);
}
,
您可以轻松创建没有AppBar的TabBar。只需将Container作为父项即可。 请检查this。
,我举了一个简单的例子,看看它是否可以帮助您: 首先定义一个Statefull小部件,并为您的标签添加一些定义
class MyHomePage extends StatefulWidget {
MyHomePage({Key key,this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
定义小部件的状态
class _MyHomePageState extends State<MyHomePage>
with SingleTickerProviderStateMixin {
TabController _tabController;
final List<Tab> tabs = [
Tab(
///Give keys so you can make it easier to retrieve content to display,if you have to read the data from a remote resource ...
key: ObjectKey(1),text: 'Products',Tab(
key: ObjectKey(2),text: 'Feature',Tab(
key: ObjectKey(3),text: 'Shipping Info',Tab(
key: ObjectKey(4),text: 'Reviews',];
///Build the widget for each tab ...
Widget _setDisplayContainer(key) {
if (key == ObjectKey(1)) {
return Text("Content for tab 1");
} else if (key == ObjectKey(2)) {
return Text("Content for tab 2");
} else if (key == ObjectKey(3)) {
return Text("Content for tab 3");
}
return Text("Content for tab 4");
}
@override
void initState() {
super.initState();
_tabController = TabController(vsync: this,length: tabs.length);
}
...
}
之后,您的构建方法应如下所示
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: PreferredSize(
preferredSize: Size(MediaQuery.of(context).size.width,MediaQuery.of(context).size.height * .4),child: SafeArea(
child: Column(
children: <Widget>[
Container(
child: Expanded(
flex: 4,child: Stack(fit: StackFit.loose,children: <Widget>[
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('images/car.jpeg'),fit: BoxFit.cover,)),Container(
height: 40,color: Colors.orangeAccent,child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,children: <Widget>[
Icon(Icons.arrow_back,color: Colors.white,size: 20),Row(
children: <Widget>[
Icon(
Icons.search,size: 20,Icon(Icons.menu,)
],]),Container(
child: TabBar(
unselectedLabelColor: const Color(0xffacb3bf),tabs: tabs,labelStyle: TextStyle(color: Colors.orangeAccent,fontSize: 12),onTap: (index) {},body: TabBarView(
controller: _tabController,children:
tabs.map((tab) => _setDisplayContainer(tab.key)).toList()));
}
希望这会有所帮助。