没有 AppBar 的 Flutter TabBar

我正在尝试创建一个没有 AppBar 的选项卡式栏布局屏幕。我已经参考了此链接上的解决方案：如何在flutter中创建没有应用栏的选项卡栏？ https://stackoverflow.com/questions/49622103/how-to-create-the-tab-bar-without-app-bar-in-flutter但这对我不起作用。这是当我将 TabBar 放在appbar:范围：

我的 TabBar 已移至状态栏下方的左上角，并且全部挤在一个角落。就好像它根本不存在一样。

当我使用 AppBar 类但只传递bottom:这里的参数是发生的情况：

TabBar 顶部有一个丑陋的空间，这显然是用于 AppBar 标题的。这是我的代码：

return new Scaffold(
      appBar: new TabBar(
        tabs: widget._tabs.map((_Page page){
          return Text(page.tabTitle);
        }).toList(),
        controller: _tabController,
        isScrollable: true,

      ),
      backgroundColor: Colors.white,
      body: new TabBarView(
          controller: _tabController,
          children: widget._tabs.map((_Page page){
            return new SafeArea(
                top:false,
                bottom: false,
                child: (page.page == Pages.cart?new CartHomeScreen():_lunchesLayout())
            );
          }).toList()
      ),
    );

我如何才能拥有顶部没有空间的 TabBar，是否可以使两个选项卡项及其指示器拉伸并填充侧面空间？

您的第一个屏幕截图实际上显示它工作得很好 - 问题是“很好”并不完全符合您的预期。选项卡栏的默认文本颜色为白色，因此您的标签不会显示，而只会显示底线，即您在左上角看到的内容。此外，TabBar 已经是首选大小的小部件，但它没有与 AppBar 相同的高度，因此如果这就是您想要的，它看起来不会像这样。

这是一个使它看起来像应用程序栏的示例。kToolbarHeight与 AppBar 使用的常量相同。

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => new MyAppState();
}

class MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'msc',
      home: new DefaultTabController(
        length: 2,
        child: new Scaffold(
          appBar: new PreferredSize(
            preferredSize: Size.fromHeight(kToolbarHeight),
            child: new Container(
              color: Colors.green,
              child: new SafeArea(
                child: Column(
                  children: <Widget>[
                    new Expanded(child: new Container()),
                    new TabBar(
                      tabs: [new Text("Lunches"), new Text("Cart")],
                    ),
                  ],
                ),
              ),
            ),
          ),
          body: new TabBarView(
            children: <Widget>[
              new Column(
                children: <Widget>[new Text("Lunches Page")],
              ),
              new Column(
                children: <Widget>[new Text("Cart Page")],
              )
            ],
          ),
        ),
      ),
    );
  }
}

结果是这样的：

Edit:

正如评论和来自这个 github 问题 https://github.com/flutter/flutter/issues/17459#issuecomment-387984398，您还可以使用AppBar的flexibleSpace属性来保持选项卡栏达到基本相同的效果：

return new DefaultTabController(
  length: 3,
  child: new Scaffold(
    appBar: new AppBar(
      flexibleSpace: new Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          new TabBar(
            tabs: [
              new Tab(icon: new Icon(Icons.directions_car)),
              new Tab(icon: new Icon(Icons.directions_transit)),
              new Tab(icon: new Icon(Icons.directions_bike)),
            ],
          ),
        ],
      ),
    ),
  ),
);