Как сохранить положение прокрутки 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
должны совпадать.