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

      // (...)

    );
  }

Answer 2

最简单的方法是在 AppBar 中使用 toolbarHeight 属性

示例：

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

输出：

Answer 3

在AppBar小部件中包装PreferredSize。

appBar: PreferredSize(
  preferredSize: Size(double.infinity, 44), // 44 is the height
  child: AppBar(title: Text("My app bar")),
),

更改AppBar的高度

3 个答案: