在具有可变高度的小部件树中使用 DefaultTabController

Question

在我的应用程序中，我有一个 PageView，然后在该 PageView 中，我有一些选项卡式内容（通过使用 DefaultTabController）。在这些选项卡中，我有一些可变高度的内容。无论我做什么，每当我尝试使用 DefaultTabController 时，Flutter 都会抛出此错误：

Viewports expand in the cross axis to fill their container and constrain their children to match their extent in the cross axis. In this case, a horizontal viewport was given an unlimited amount of vertical space in which to expand.
The relevant error-causing widget was: 
  TabBarView file:///C:/code/samples/tabbed/lib/main.dart:104:23

我试过：

使用 shrinkWrap 包装 ListView 中的所有内容：true
使用具有最小主轴尺寸的列

无论我做什么，TabBarView 总是试图渲染到无穷大。我如何使用 DefaultTabController 来显示可变高度的标签？

这是我的代码：

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body: PageView(
        children: [
          Container(
            height: 200,
            color: Colors.blueGrey,
            child: DefaultTabController(
              length: 2,
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  TabBar(
                    tabs: [
                      Tab(
                        text: "Okay",
                      ),
                      Tab(
                        text: "Go",
                      )
                    ],
                  ),
                  ListView(
                    scrollDirection: Axis.vertical,
                    shrinkWrap: true,
                    children: [
                      TabBarView(
                        children: [
                          Text("one"),
                          Text("two"),
                        ],
                      )
                    ],
                  ),
                ],
              ),
            ),
          ),
          Container(
            color: Colors.deepOrange,
          ),
          Container(
            color: Colors.cyan,
          )
        ],
      ),
    );
  }

Answer 1

删除 ListView 并用 Expanded 包裹 TabBarView，你应该可以开始了：

Expanded(
  child: TabBarView(
    children: [
      Text("one"),
      Text("two"),
    ],
  ),
)

请注意，现在 TabBarView 和 PageView 滑动手势之间存在冲突（您只能从 TabBar 滑动 PageView，因为后者下方的所有内容都是涵盖 TabBarView)

在具有可变高度的小部件树中使用 DefaultTabController

Using DefaultTabController in widget tree with variable height

flutter

flutter-layout

flutter-pageview