【问题标题】:How to create scrollable contents within TabBarView with my entire app?如何使用我的整个应用在 TabBarView 中创建可滚动内容?
【发布时间】:2020-02-02 06:17:20
【问题描述】:

我在 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'),
                ],
              ),
            ),
          ],
        );
      }
    }

【问题讨论】:

标签: flutter dart flutter-layout flutter-dependencies


【解决方案1】:

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

【讨论】:

    猜你喜欢
    • 2019-05-13
    • 1970-01-01
    • 1970-01-01
    • 2016-02-03
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-01-23
    • 2022-09-24
    相关资源
    最近更新 更多