时间戳

首页 > 解决方案 > 在具有可变高度的小部件树中使用 DefaultTabController

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

问题描述

在我的应用程序中，我有一个 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

我试过了：

无论我做什么，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,
          )
        ],
      ),
    );
  }

标签： flutterflutter-layoutflutter-pageview

解决方案

删除并用ListView包裹，你应该很高兴：TabBarViewExpanded

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

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

推荐阅读