How to create a bounded scrollable TabBarView

后端 未结 2 491
北海茫月
北海茫月 2020-12-16 02:32

I need to implement the following layout in Flutter.

When the user scrolls, I want the entire layout to scroll (hiding the header and tab bar). However, I c

2条回答
  •  一生所求
    2020-12-16 03:07

    On top of Miguel Ruvio's answer replacing the ListView in the body with the TabBarView gets you almost all of the way per D.R.'s comment. I did get some overflow issues when one of my widgets in the was wrapped in a column. Replacing that with ListView per this example

    import 'package:flutter/material.dart';
    
    void main() {
      runApp(MaterialApp(home: Tabs()));
    }
    
    class Tabs extends StatefulWidget {
      @override
      _RoomTabsState createState() => _RoomTabsState();
    }
    
    class _RoomTabsState extends State with TickerProviderStateMixin {
      var _scrollViewController;
      var _tabController;
    
      @override
      void initState() {
        super.initState();
        _scrollViewController = ScrollController();
        _tabController = TabController(vsync: this, length: 2);
      }
    
      @override
      Widget build(BuildContext context) {
        return NestedScrollView(
          controller: _scrollViewController,
          headerSliverBuilder: (context, bool) => [
            SliverAppBar(
              bottom: TabBar(
                controller: _tabController,
                tabs: [
                  Tab(text: "All"),
                  Tab(text: "Living room"),
                ],
              ),
            ),
          ],
          body: TabBarView(
            controller: _tabController,
            children: [
              ListView(children: [
                Text("test"),
                Text("test"),
                Text("test"),
                Text("test"),
                Text("test"),
                Text("test"),
                Text("test"),
                Text("test"),
                Text("test"),
                Text("test"),
                Text("test"),
                Text("test"),
                Text("test"),
                Text("test"),
                Text("test"),
                Text("test"),
                Text("test"),
                Text("test"),
                Text("test"),
                Text("test"),
              ]),
              Text("test"),
            ],
          ),
        );
      }
    }
    
    

    comming from this github issue.

提交回复
热议问题