TABBARVIEW在可滚动页面中

Question

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

我尝试创建的布局：

• 一个 ListView 包含：
  • 一个容器。
  • 一个TabBar。
  • 一个 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，这修复了溢出，但导致两个单独的可滚动区域（单个选项卡视图和整个选项卡视图）页），这不是我想要的 - 我想要一个可滚动区域。将此 ListView 的 physicals 属性设置为 NeverScrollablePhysics() 并不能解决此问题，并会导致一些奇怪的行为。
• 我尝试使用 NestedScrollView 和 Silvers （来自 如何创建有界可滚动 TabBarView）。但这会导致在浏览选项卡时出现以下异常：提供的 ScrollController 当前附加到多个 ScrollPosition。，并产生一些不可靠的滚动机制。
• 我尝试使用 CustomScrollView 但这不起作用。

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

• 在没有预定义大小的Column中颤动可滚动TabBarView
• 如何创建有界可滚动 TabBarView
• 如何使用 tabBar 实现 sliverAppBar
• 获取“水平视口被赋予无限高度”。在 flutter 中使用 TabBarView

我很困惑为什么它不起作用，因为我觉得这是一件非常简单的事情。本质上，它与查看个人资料时 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并使用tabbar和tabController从widget < /代码>列表。

代码：

// STATEFUL WIDGET CODE

late TabController tabController; // USED FOR NAVIGATION

@override
void initState() {
  tabController = TabController(
    initialIndex: 0,
    length: 3, // adjust your length
    vsync: this,
  );
  super.initState();
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text('test')), // some app bar
    body: SingleChildScrollView(
      child: Column(
        children: [
          TabBar(controller: tabController),
          _getTabAtIndex(tabContoller.index),
        ],
      ),
    ),
  );
}

Widget _getTabAtIndex(int index) {
  var list = [
    Container(), // FIRST ITEM
    Container(), // SECOND ITEM
    Container(), // THIRD ITEM
  ];

  return list[index];
}