Question

我想调整TabBar的大小，因为默认高度太大，如何实现？谢谢。

DefaultTabController(
    length: 2,
    child: Scaffold(
      appBar: AppBar(
        title: Text('Flutter App'),
        bottom: TabBar(
          tabs: <Widget>[
            Text('Tab 1'),
            Text('Tab 2'),
          ],
        ),
      ),
      body: TabBarView(
        children: <Widget>[
          Icon(Icons.apps),
          Icon(Icons.apps),
        ],
      ),
    ),
  )

Answer 1

您可以使用PreferredSize：

DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: PreferredSize(
          preferredSize: Size.fromHeight(150.0),
          child: AppBar(
            bottom: TabBar(
              tabs: <Widget>[
                Text('Tab 1'),
                Text('Tab 2'),
              ],
            ),
          ),
        ),
        body: TabBarView(
          children: <Widget>[
            Icon(Icons.apps),
            Icon(Icons.apps),
          ],
        ),
      ),
    )

它将更改应用程序栏的整体高度，但如果仅想更改选项卡栏的高度，则将 PreferredSize小部件应用于 TabBar小部件小部件，而不是应用在 AppBar小部件上。

Answer 2

对于TabBar小部件，您可以按照@praveenb的建议进行操作

child: TabBar(
  ...
  tabs: [
    SizedBox(
      height: 100,
      child: Tab(
      ...

Flutter-如何设置TabBar的高度？

2 个答案: