Как предотвратить автоматическую прокрутку вниз на tab2, когда пользователь прокручивает вниз на tab1 в флаттере?

Question

Я создал экран, используя SliverAppBar, SliverPersistentHeader, TabView и ListView.

Если я прокручиваю вниз в tab1, tab2 прокручивается автоматически вниз.Так что, если я перейду к tab2, список не начинается с первого пункта.Как я могу предотвратить это?

Я создал простое демонстрационное приложение для демонстрации проблемы, вы можете посмотреть на это Суть .

Исходное состояние экрана:

Если я прокручиваю tab1, как показано ниже:

Tab2 автоматически прокручивается вниз, как показано ниже, когда я прокручиваю tab1:

Answer 1

Попробуйте обернуть TabBarView в отдельный эшафот, который находится внутри StatefulWidget.Таким образом, вы можете быть уверены, что тело вкладки будет перестраиваться при каждом изменении вкладки, чтобы положение прокрутки не сохранялось.

Пример:

return Scaffold(
  body: DefaultTabController(
    length: 2,
    child: NestedScrollView(
      headerSliverBuilder: /* Your headerSliverBuilder code */
      body: MyCustomTabWidget(),
    )
);

class MyCustomTabWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return MyCustomTabWidgetState();
  }
}

class MyCustomTabWidgetState extends State<MyCustomTabWidget > {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: new TabBarView(
        children: [
          /*Code for both the Containers containing ListViews*/
        ]
      )
    )
  }
}

Answer 2

Я изменил ваш гист с помощью PageStorageKey.Смотрите ниже рабочий пример:

import 'package:flutter/material.dart';

void main() async {
    runApp(new TestApp());
}


class TestApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return new MaterialApp(
            theme: new ThemeData(primarySwatch: Colors.yellow),
            home: new TestAppHomePage(),
        );
    }
}

class TestAppHomePage extends StatefulWidget {

    @override
    State createState() => new TestAppHomePageState();
    //FPDetailScreen({Key key, @required this.period}) : super(key: key);
}

class TestAppHomePageState extends State<TestAppHomePage>
        with SingleTickerProviderStateMixin {

    @override
    Widget build(BuildContext context) {

        return new Scaffold(
            //bottomNavigationBar: bottomNavBar,
            body: DefaultTabController(
                length: 2,
                child: NestedScrollView(
                    headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
                        return <Widget>[
                            SliverAppBar(
                                expandedHeight: 120.0,
                                floating: false,
                                forceElevated: innerBoxIsScrolled,
                                backgroundColor: Colors.green,
                                pinned: true,
                                flexibleSpace: FlexibleSpaceBar(
                                    collapseMode: CollapseMode.pin,
                                    centerTitle: true,
                                    title: Text(
                                        "Foo Bar Baz",
                                        style: TextStyle(color: Colors.white),
                                        textAlign: TextAlign.left,
                                        overflow: TextOverflow.ellipsis,
                                        softWrap: true,
                                        maxLines: 1,
                                    ),
                                    background: Container(
                                        alignment: Alignment.topCenter,
                                        child: Column(
                                            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                                            children: <Widget>[
                                                Row(
                                                    children: <Widget>[
                                                        Text(
                                                            '10.00 TL',
                                                            style: TextStyle(
                                                                    color: Colors.white,
                                                                    fontSize: 20.0,
                                                                    fontWeight: FontWeight.bold),
                                                        ),

                                                    ],
                                                    mainAxisAlignment: MainAxisAlignment.center,
                                                ),
                                                Container(
                                                    width: 0,
                                                    height: 0,
                                                )
                                            ],
                                        ),
                                    ),
                                    //background: ,
                                ),
                            ),
                            SliverPersistentHeader(
                                pinned: true,
                                delegate: _SliverAppBarDelegate(
                                    TabBar(
                                        tabs: [
                                            Tab(
                                                child: Text(
                                                    "Tab1",
                                                    style: TextStyle(
                                                            color: Colors.black,
                                                            fontWeight: FontWeight.bold),
                                                ),
                                            ),
                                            Tab(
                                                child: Text(
                                                    "Tab2",
                                                    style: TextStyle(
                                                            color: Colors.black,
                                                            fontWeight: FontWeight.bold),
                                                ),
                                            ),
                                        ],
                                    ),
                                ),
                            ),
                        ];
                    },

                    body:TabBarView(
                            //controller: _tabController,
                            children: [
                                CardList('one'),
                                CardList('two'),
                    ]),
                ),
            ),

        );

    }
}

class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
    _SliverAppBarDelegate(this._tabBar);

    final TabBar _tabBar;

    @override
    double get minExtent => _tabBar.preferredSize.height;
    @override
    double get maxExtent => _tabBar.preferredSize.height;

    @override
    Widget build(
            BuildContext context, double shrinkOffset, bool overlapsContent) {
        return new Container(
            color: Colors.white,
            child: _tabBar,
        );
    }

    @override
    bool shouldRebuild(_SliverAppBarDelegate oldDelegate) {
        return false;
    }
}




class CardList extends StatelessWidget {
    final String listKey;

    CardList(this.listKey);

    @override
    Widget build(BuildContext context) {
        return Container(
            child: ListView.builder(
                    key: PageStorageKey<String>(listKey),
                    scrollDirection: Axis.vertical,
                    shrinkWrap: true,
                    itemCount: 20,
                    //itemExtent: 1.0,
                    itemBuilder: (context, index){
                        return new ListTile(
                            title: new Text("Item $index"),
                        );
                    }),
        );
    }
}

Answer 3

Причина этой проблемы заключается в том, что обе вкладки используют один и тот же TabController, который в вашем случае DefaultTabController, который неумело определяет контроллеры вкладок для дочерних виджетов, вы должны явно установить отдельную TabController для каждой из них.из ваших вкладок, поэтому его действия не зависят от других, но вы получите дополнительный код для управления вашими новыми контроллерами:

вот пример:

внутри вашего nestedScrollView

child: nestedScrollView(
controller: // add a `ScrollController` here
),