[英]how to create the tab bar without app bar in flutter?
I wish to add the tab app instead of app bar on my home screen.我希望在主屏幕上添加标签应用程序而不是应用程序栏。 How to create it.
如何创建它。 Currently, my tab bar added at the bottom of app bar and I have removed the title and elevation.
目前,我的标签栏添加在应用栏的底部,我已经删除了标题和高度。 At the same time, I can't say
appBar: null
as I need some space on the top of the tab bar.同时,我不能说
appBar: null
因为我需要在标签栏顶部留出一些空间。
Widget HomeTap = new Scaffold(
appBar: new AppBar(
bottom: new TabBar(
indicatorColor: Colors.pinkAccent[100],
labelColor: Colors.pinkAccent[100],
indicatorWeight: 0.5,
unselectedLabelColor: Colors.grey[400],
tabs: [
new Tab(text: 'Album',),
new Tab(text: 'Artist'),
new Tab(text: 'Playlist'),
new Tab(text: 'Songs'),
new Tab(icon: new Icon(Icons.search))
]),
title: null,
elevation: 0.0,
),
body: new TabBarView(
children: [
new Center(
child: new AlbumWidget(),
),
new Container(),
new Container(),
new Container(),
new Container(),
],
),
);
Flutter works with composition. Flutter 适用于组合。 You can pretty much replace any widget with something else.
您几乎可以用其他东西替换任何小部件。 They are not limited to one specific child.
他们不限于一个特定的孩子。
So you can simply do所以你可以简单地做
new Scaffold(
appBar: new TabBar(
...
),
...
)
The only requirement is for your widget to be of the right interface.唯一的要求是您的小部件具有正确的界面。 Scaffold requires as
appBar
a PreferredSizeWidget
. Scaffold 作为
appBar
需要一个PreferredSizeWidget
。
Fortunately, TabBar
is already a PreferredSizeWidget
by default.幸运的是,
TabBar
默认已经是一个PreferredSizeWidget
。 So no change needed所以不需要改变
@override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
title: Text('Tabs Demo'),
),
body:
Column(
children: <Widget>[
TabBar(
tabs: [
Tab(icon: Icon(Icons.directions_car)),
Tab(icon: Icon(Icons.directions_transit)),
Tab(icon: Icon(Icons.directions_bike)),
],
),
Expanded(
flex: 1,
child: TabBarView(
children: [
Icon(Icons.directions_car),
Icon(Icons.directions_transit),
Icon(Icons.directions_bike),
],
),
)
],
)
),
),
);
Tried flexibleSpace?试过flexibleSpace?
return DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
flexibleSpace: new Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
TabBar(
tabs: [
Tab(text: "Pending"),
Tab(text: "Delivered"),
Tab(text: "Rejected"),
],
)
],
),
),
body: TabBarView(
children: [
PendingOrders(),
DeliveredOrders(),
RejectedOrders(),
],
),
),
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.