更改AppBar的高度

Question

我正在开发一个Flutter应用程序。在这个应用程序中，我在应用栏中使用了TabBarController。我没有为AppBar使用图标和标题，因此高度显示比预期更高。我需要帮助以达到所需的大小。我正在使用以下代码：

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

class _DashboardState extends State<Dashboard> with SingleTickerProviderStateMixin{

  final List<Tab> myTabs = <Tab>[
    new Tab(text: 'page1.',),
    new Tab(text: 'page2.'),
  ];

  TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = new TabController(length: 3, vsync: this
    );
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        bottom: new TabBar(
          indicatorSize:TabBarIndicatorSize.tab,
          controller: _tabController,
          tabs: myTabs,
          labelStyle: styleTabText,

        ),
      ),
      body:  new TabBarView(
        controller: _tabController,
        children: myTabs.map((Tab tab) {
          return new Center(
              child: new Text(
                  tab.text
              )
          );
        }).toList(),
      ),
    );
  }
}

此外，为了参考，我添加了应用程序的截图。

- Code Hunter

---

你是在另一个脚手架的主体内创建这个脚手架吗？ - Jesse de Wit

Answer 1

你可以使用 PreferredSize 来调整 TabBar 的高度：

  @override
  Widget build(BuildContext context) {

    TabBar _tabBar = new TabBar(
      indicatorSize:TabBarIndicatorSize.tab,
      controller: _tabController,
      tabs: myTabs,
      labelStyle: styleTabText,
    );

    return Scaffold(
      appBar: new AppBar(
        bottom: PreferredSize(
          preferredSize: Size.fromHeight(_tabBar.preferredSize.height - 50),
          child: _tabBar,
        ),
      ),

      // (...)

    );
  }

- Vinicius Pinto

---

我遇到了错误 flutter: 又抛出了一个异常：'package:flutter/src/material/tabs.dart': Failed assertion: line 65 pos 15: '!(text != null && null != child)': is not true. - Code Hunter

@CodeHunter 这与选项卡的定义有关，请检查 myTabs 的声明（它必须具有文本或子属性）。 - Vinicius Braz Pinto

Answer 2

使用toolbarHeight：

AppBar(
  toolbarHeight: 44, 
  // ...
)

- CopsOnRoad

---

这不会减小选项卡的高度。我想要一个固定高度的AppBar和一个小的选项卡栏。 - Yash

@Yash 这确实减小了“AppBar”的高度。问题并不是在问“Tab”相关的内容。如果您有特定的问题，请随时点击“提问”按钮进行询问。 - CopsOnRoad

Answer 3

最简单的方法是在您的AppBar中使用toolbarHeight属性。 示例：

AppBar(
   title: Text('Flutter is great'),
   toolbarHeight: 100,
  ),

Output:

- Kab Agouda