flutter - 如何使用我的整个应用在 TabBarView 中创建可滚动内容？

Question

我在 SingleChildScrollView 中创建了 TabBar。问题是我想用我的整个应用程序在 TabBarView 内创建可滚动内容，而不是仅在 TabBarView 内滚动内容。我尝试了 ListView.Builder 和 NestedScrollView 但没有和我一起工作.. 有什么解决方案吗？

这是我的代码：

    class TwitterTabBare extends StatefulWidget {
      @override
      _TwitterTabBareState createState() => _TwitterTabBareState();
    }
    
    class _TwitterTabBareState extends State<TwitterTabBare>
        with SingleTickerProviderStateMixin {
      TabController _tabController;
      @override
      void initState() {
        super.initState();
        _tabController = TabController(length: 4, vsync: this);
      }
    
      @override
      Widget build(BuildContext context) {
        double screenHeight = MediaQuery.of(context).size.height;
        return column(
          children: <Widget>[
            TabBar(
              controller: _tabController,
              labelColor: Colors.blue,
              unselectedLabelColor: Colors.grey[700],
              tabs: <Widget>[
                Tab(
                  text: 'Tweets',
                ),
                Tab(
                  text: 'Replies',
                ),
                Tab(
                  text: 'Media',
                ),
                Tab(
                  text: 'Tweets',
                ),
              ],
            ),
            Container(
              constraints: BoxConstraints.expand(height: 300),
              child: TabBarView(
                controller: _tabController,
                children: <Widget>[
                  // CardPage(),
                  Column(
                    mainAxisSize: MainAxisSize.max,
                    children: <Widget>[
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                                                                                                  
                    ],
                  ),
                      Text('Replies'),
                      Text('Media'),
                      Text('Likes'),
                ],
              ),
            ),
          ],
        );
      }
    }

标签： flutterdartflutter-layoutflutter-dependencies

Answer 1

您提供的代码片段的问题是 Column 在给定布局上不可滚动并且溢出。您可以考虑在这里使用 ListView 来创建可滚动的小部件。这是我发布的使用 ListView 和 TabBarView的工作示例。要处理滑动到其他选项卡，需要使用 NestedScrollView。