可滚动页面中的TabBarView

Question

我在让布局在 Flutter 中工作时遇到了很大的困难。

我正在尝试创建的布局：

A

ListView

包含：

A
```
Container
```
.
A
```
TabBar
```
.
A
```
TabBarView
```
，其中每个
```
TabBarView
```
包含一个
```
Column
```
。

我希望整个页面可以滚动。

这是布局示意图：

示例代码

这是一个最小的示例代码（删除了确切的小部件定义）：

return DefaultTabController(
      length: 2,
      child: ListView(
        children: [
          // TOP CONTAINER //
          Container(height: 30),

          // TAB BAR //

          const TabBar(tabs: [
            Tab(child: Text("Tab 1")),
            Tab(child: Text("Tab 2")),
          ]),

          // TAB BAR VIEWS //
          SizedBox(
            height: MediaQuery.of(context).size.height,
            child: TabBarView(
              children: [
                Container(height: 5000),
                Container(height: 5000),
              ],
            ),
          )
        ],
      ),
    );

问题：

当窗口高度变小时，底部出现溢出错误：

我做了什么：

我首先尝试将内部
```
Column
```
转换为
```
ListView
```
，这修复了溢出，但导致了两个单独的可滚动区域（单个选项卡视图和整个页面），这不是我想要的 - 我想要一个可滚动区域。将这个
```
physics
```
的
```
ListView
```
属性设置为
```
NeverScrollablePhysics()
```
并不能解决这个问题，并且会导致一些奇怪的行为。
我尝试使用
```
NestedScrollView
```
和
```
Silvers
```
（来自如何创建有界可滚动 TabBarView）。但这会导致在浏览选项卡时出现以下异常：
```
The provided ScrollController is currently attached to more than one ScrollPosition.
```
，并产生一些狡猾的滚动机制。
我尝试使用
```
CustomScrollView
```
但没用。

未提供有效解决方案的类似问题：

我很困惑为什么它不起作用，因为我觉得这是一件非常简单的事情。本质上，它与查看个人资料时 Instragram 应用程序（以及其他应用程序）中使用的布局相同（请参阅：https://unblast.com/wp-content/uploads/2020/01/Instagram-UI-Profile-1 .jpg).

Answer 1

根据评论，您可以将页面包装在

singlechildscrollview

中，禁用列表视图的滚动物理，因为父级已经可滚动。

return SingleChildScrollView(
  child: DefaultTabController(
    length: 2,
    child: ListView(
      physics: NeverScrollableScrollPhysics(),
        children: [
          // TOP CONTAINER //
          Container(height: 30),

          // TAB BAR //
          const TabBar(tabs: [
            Tab(child: Text("Tab 1")),
            Tab(child: Text("Tab 2")),
          ]),

          // TAB BAR VIEWS //
          SizedBox(
            height: MediaQuery.of(context).size.height,
            child: TabBarView(
              children: [
                Container(height: 5000),
                Container(height: 5000),
              ],
            ),
          )
        ],
      ),
    ));

** 选项2 **

您可以使用

customScrollView

或

nestedScrollView

DefaultTabController(
      length: 2,
      child:
CustomScrollView(
              slivers: [

SlivertoboxAdapter(child:   // TOP CONTAINER //
          Container(height: 30),

SlivertoboxAdapter(child:   // TAB BAR //

          const TabBar(tabs: [
            Tab(child: Text("Tab 1")),
            Tab(child: Text("Tab 2")),
          ]),

//... Sliverfillremaining/slivettoboxadapter for your tabbarview

SlivertoboxAdapter(child:TabBarView(
              children: [
                Container(height: 5000),
                Container(height: 5000),
              ],
            ),

Answer 2

我多次在

TabBarView

上摸索着一个问题：“当它位于可滚动容器内时，如何将动态高度内容放入其中？”

不幸的是，它在滚动等用例中被破坏，无法正常工作并且内容溢出。

因此，我的解决方案通过回答如何实现整个页面可滚动来回答OP问题。它用不同的机制取代了

TabBarView

。

我的解决方案是跳过

TabBarView

并使用

TabBarView

和

TabBar

从

TabController

列表中获取

Widget

。

代码：

Widget

可滚动页面中的TabBarView

问题描述投票：0回答：2

2个回答

最新问题

可滚动页面中的TabBarView

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2