Flutter 在没有预定义大小的列中颤振可滚动TabBarView

Flutter 在没有预定义大小的列中颤振可滚动TabBarView,flutter,flutter-layout,Flutter,Flutter Layout,我想要一个屏幕,顶部有一个小部件,后面是一个选项卡。我希望所有内容都在SingleChildScrollView中,以便可以滚动整个屏幕(而不仅仅是单个选项卡的内容) 我曾研究过类似的问题,但这些问题无助于实现我的目标: 我无法设置固定高度,因为我不知道它(选项卡栏内容) 我的方法不起作用: class TestScreen extends StatelessWidget { @override Widget build(BuildContext context) { ret

我想要一个屏幕,顶部有一个小部件,后面是一个选项卡。我希望所有内容都在SingleChildScrollView中,以便可以滚动整个屏幕(而不仅仅是单个选项卡的内容)

我曾研究过类似的问题,但这些问题无助于实现我的目标:

我无法设置固定高度,因为我不知道它(选项卡栏内容)

我的方法不起作用:

class TestScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Test'),
      ),
      body: SingleChildScrollView(
        child: DefaultTabController(
          length: 2,
          child: Column(
            children: [
              Padding(
                padding: const EdgeInsets.all(16.0),
                child: Text('My Top Widget'),
              ),
              TabBar(
                tabs: [
                  Tab(child: Text('Available')),
                  Tab(child: Text('Taken')),
                ],
              ),
              TabBarView(
                children: [
                  Center(child: Text('1')),
                  Center(child: Text('2')),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}
我得到以下错误:

Horizontal viewport was given unbounded height.

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:///home/kay/Code/emat/frontend/lib/ui/TestScreen.dart:26:15
最终应该如何:


我终于解决了这个问题。我看了一下棉条是如何工作的,然后选择了使用它们。我可以建议作为一个介绍和进一步阅读的在线文档

我现在的做法是:

class TestScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Test'),
      ),
        body: DefaultTabController(
          length: 2,
          child: NestedScrollView(
            scrollDirection: Axis.vertical,
            headerSliverBuilder: (context, innerBoxIsScrolled) => [
              SliverToBoxAdapter( //headerSilverBuilder only accepts slivers
                child: Column(
                  children: [
                    Padding(
                      padding: const EdgeInsets.all(16.0),
                      child: Text('My Top Widget'),
                    ),
                    TabBar(
                      tabs: [
                        Tab(child: Text('Available')),
                        Tab(child: Text('Taken')),
                      ],
                    ),
                  ],
                ),
              ),
            ],
            body: TabBarView(
              children: [
                // I wrapped large widgets in the SingleChildScrollView
                SingleChildScrollView(
                  child: Text('1')/*Very large widget*/,
                ),
                Text('2'),
              ],
            ),
          ),
        ),
    );
  }
}


我终于解决了这个问题。我看了一下棉条是如何工作的,然后选择了使用它们。我可以建议作为一个介绍和进一步阅读的在线文档

我现在的做法是:

class TestScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Test'),
      ),
        body: DefaultTabController(
          length: 2,
          child: NestedScrollView(
            scrollDirection: Axis.vertical,
            headerSliverBuilder: (context, innerBoxIsScrolled) => [
              SliverToBoxAdapter( //headerSilverBuilder only accepts slivers
                child: Column(
                  children: [
                    Padding(
                      padding: const EdgeInsets.all(16.0),
                      child: Text('My Top Widget'),
                    ),
                    TabBar(
                      tabs: [
                        Tab(child: Text('Available')),
                        Tab(child: Text('Taken')),
                      ],
                    ),
                  ],
                ),
              ),
            ],
            body: TabBarView(
              children: [
                // I wrapped large widgets in the SingleChildScrollView
                SingleChildScrollView(
                  child: Text('1')/*Very large widget*/,
                ),
                Text('2'),
              ],
            ),
          ),
        ),
    );
  }
}

可能是试试这个@xooback可能是试试这个@xooback