更改 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(),
      ),
    );
  }
}

另外作为参考，我正在添加应用程序的屏幕截图。

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

      // (...)

    );
  }