[英]how to create the tab bar without app bar in flutter?
我希望在主屏幕上添加标签应用程序而不是应用程序栏。 如何创建它。 目前,我的标签栏添加在应用栏的底部,我已经删除了标题和高度。 同时,我不能说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 适用于组合。 您几乎可以用其他东西替换任何小部件。 他们不限于一个特定的孩子。
所以你可以简单地做
new Scaffold(
appBar: new TabBar(
...
),
...
)
唯一的要求是您的小部件具有正确的界面。 Scaffold 作为appBar
需要一个PreferredSizeWidget
。
幸运的是, TabBar
默认已经是一个PreferredSizeWidget
。 所以不需要改变
@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),
],
),
)
],
)
),
),
);
试过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.