如何在flutter中創建沒有應用欄的標簽欄？

Question

我希望在主屏幕上添加標簽應用程序而不是應用程序欄。 如何創建它。 目前，我的標簽欄添加在應用欄的底部，我已經刪除了標題和高度。 同時，我不能說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(),
],
),
);

Answer 1

Flutter 適用於組合。 您幾乎可以用其他東西替換任何小部件。 他們不限於一個特定的孩子。

所以你可以簡單地做

new Scaffold(
   appBar: new TabBar(
      ...
   ),
   ...
)

唯一的要求是您的小部件具有正確的界面。 Scaffold 作為appBar需要一個PreferredSizeWidget 。

幸運的是， TabBar默認已經是一個PreferredSizeWidget 。 所以不需要改變

Answer 2

 @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),
                  ],
                ),
              )
            ],
          )

        ),
      ),
    );

這對我有用

Answer 3

試過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(),
  ],
   ),
   ),
 );