Как сохранить положение прокрутки tabView при использовании складной панели приложения (sliverAppBar)?

Проблема:

Положение прокрутки tabView не восстанавливается правильно, когда один из tabView прокручивается до самого верха (раскрывая sliverAppBar). Другая вкладка также будет прокручиваться вверх (теряя предыдущую позицию прокрутки).

  • Эта проблема не будет отображаться, если используется обычная панель приложения (не складная панель приложения)
  • Эта проблема появляется только при прокрутке tabView вверх

Вопрос:

Как сохранить положение прокрутки tabView при использовании складной панели приложения (sliverAppBar)?

Код:

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new DefaultTabController(
      length: 2,
      child: Scaffold(
        body: NestedScrollView(
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
            return <Widget>[
              SliverAppBar(
                title: Text('Example'),
                pinned: true,
                floating: true,
                forceElevated: innerBoxIsScrolled,
                bottom: TabBar(
                  tabs: <Widget>[
                    Tab(text: 'One',),
                    Tab(text: 'Two'),
                  ],
                ),
              ),
            ];
          },
          body: TabBarView(
            children: <Widget>[
              Center(
                key: PageStorageKey<String>('one'),
                child: ListView.builder(
                  itemBuilder: (BuildContext context, int index) {
                    return new ListTile(
                      title: new Text('One Item $index'),
                    );
                  },
                ),
              ),
              Center(
                key: PageStorageKey<String>('two'),
                child: ListView.builder(
                  itemBuilder: (BuildContext context, int index) {
                    return new ListTile(
                      title: new Text('Two Item $index'),
                    );
                  },
                ),
              ),
            ],
          ),
        ),
      )
    );
  }
}

1 ответ

На самом деле это известная проблема , и она все еще остается открытой. Хотя есть обходной путь, как упоминалось в этой теме :

Вот обходной путь, который используетупаковка. С этим я не сталкивался с какими-либо проблемами (по крайней мере, на данный момент). Так что, пока флаттер не решит эту проблему, этот обходной путь кажется достаточным. Проверено только на Android.

Основная суть его такова:

  • Использовать NestedScrollViewиз пакета extended_nested_scroll_view
  • Оберните каждое представление вкладки в с AutomaticKeepAliveClientMixinа также wantKeepAlive => true
  • Внутри этого StatefulWidget(s), оберните прокручиваемый контент в
  • Ключевые значения, используемые в innerScrollPositionKeyBuilderа также NestedScrollViewInnerScrollPositionKeyWidgetдолжны совпадать.
Другие вопросы по тегам