0

我一直在研究flutter，现在必须为页面制作Tab Bar。既然我已经成功地制作了标签，但是有一件事不能让我完成我的任务，那就是，

我有一个这样的设计蓝图：

Column{
   mainAxisSize: MainAxisSize.max,
   crossAxisAlignment: CrossAxisAlignment.stretch,
   children: <widget>[
      Text("Hello World!"),
      Container(child: TabWidget())
   ]
}

我没有给容器的任何特定高度，TabWidget()因为我希望标签占据整个高度直到底部。

选项卡小部件

child: TabBar(
   controller: _controller,
   tabs: [
      new Tab(
         child: Padding(
           padding: EdgeInsets.only(top: 18.0),
           child: Text(""),
         )
      ),
      new Tab(
         child: Padding(
           padding: EdgeInsets.only(top: 18.0),
           child: Text(""),
         )
      ),    
    ]
    )
),
Container(
  //Deifining the height here, not deifing it will hide the content of the tabs
  height: MediaQuery.of(context).size.height/2.3,
  child: new TabBarView(
     controller: _controller,
     children: <Widget>[
        new Container(
          padding: EdgeInsets.only(top: 15.0),
          child: Listview(
            scrollDirection: Axis.Vertical,
            children: <Widget> [
               ...
            ]
          )
        ),
        new Container(
          padding: EdgeInsets.only(top: 15.0),
          child: Listview(
            scrollDirection: Axis.Vertical,
            children: <Widget> [
               ...
            ]
          )
        )  
      ]
    )
  )
  ]
);

这是关键，现在我已经尽我所能得到结果，因此这样做了：

  1. 在 TabWidget 中使用Expanded()占用高度
  2. double.infinity()在高度元素中使用TabBarView
  3. 我已阅读此答案：TabBarView without bounded height，但我不希望我的屏幕可滚动，Silver在这种情况下不需要。只是TabBarView 应该扩展到底部，而不管它从哪里开始

我不想给我的 TabBarView 一个特定的高度，相反，我希望它占据整个高度直到底部，而不管屏幕如何，所以我的高度是根据屏幕动态的。

我想就此获得一些意见，以便实现我的观点。我ListView()在 的孩子中使用TabBarView，所以即使手机屏幕的部分尺寸很小，用户仍然可以滚动内容。但是高度应该一直到底部，与屏幕的大小无关。谢谢。

任何疑问都欢迎在这里。

4

1 回答 1

0

如果您可以计算 tabBar 上方屏幕中其他小部件的高度，那么使用MediaQuery.of(context).size.height您将获得屏幕的高度。从屏幕高度中减去剩余高度，您可以使用结果值。

PS 小心计算并扣除选项卡以外的每个高度值，包括您将从MediaQuery.of(context).padding.top&获得的安全区域MediaQuery.of(context).padding.bottom。

于 2019-03-04T11:20:37.647 回答