Persist scroll position of TabBarViews in NestedScrollView in flutter during swipes

huangapple
go评论90阅读模式
英文:

Persist scroll position of TabBarViews in NestedScrollView in flutter during swipes

问题

我有一个选项卡栏中的选项卡列表。

然而，我遇到了一个问题。如果您运行下面的示例代码并滚动到选项卡1中的项目30，然后滑动到选项卡2，再返回到选项卡1，您会立即注意到选项卡1中的项目30不再处于焦点状态。滚动位置已跳转到项目1。这很奇怪。

我已经尝试了一切可能的方法，以确保每个ListView的滚动位置都会在我多次滑动离开并返回时得以保留。

这里是一个完整的可运行示例代码，准确展示了我面临的问题。

  1. import 'package:flutter/material.dart';
  3. class SampleListApp extends StatefulWidget {
  4.   const SampleListApp({Key? key}) : super(key: key);
  6.   @override
  7.   State<SampleListApp> createState() => _SampleListAppState();
  8. }
  10. class _SampleListAppState extends State<SampleListApp>
  11.     with TickerProviderStateMixin {
  12.   TabController? _tabController;
  13.   late ScrollController _scrollViewController;
  14.   int _currentTabIndex = 0;
  16.   _handleTabChange() {
  17.     setState(() {
  18.       if (_tabController != null) {
  19.         _currentTabIndex = _tabController!.index;
  20.       }
  21.     });
  22.   }
  24.   _initTabController() {
  25.     _tabController?.dispose();
  26.     _tabController =
  27.         TabController(initialIndex: _currentTabIndex, vsync: this, length: 2);
  28.     _tabController?.addListener(_handleTabChange);
  29.   }
  31.   @override
  32.   void initState() {
  33.     super.initState();
  34.     _initTabController();
  35.     _scrollViewController = ScrollController(initialScrollOffset: 0.0);
  36.   }
  38.   @override
  39.   Widget build(BuildContext context) {
  40.     return Scaffold(
  41.       body: NestedScrollView(
  42.         controller: _scrollViewController,
  43.         headerSliverBuilder: (BuildContext context, bool boxIsScrolled) => [
  44.           SliverAppBar(
  45.             title: const Text("Hello World"),
  46.             bottom: TabBar(
  47.               indicatorColor: Colors.white,
  48.               isScrollable: true,
  49.               labelColor: Colors.orange,
  50.               unselectedLabelColor: Colors.grey,
  51.               tabs: const [
  52.                 Tab(
  53.                   text: "Tab 1",
  54.                 ),
  55.                 Tab(
  56.                   text: "Tab 2",
  57.                 )
  58.               ],
  59.               controller: _tabController,
  60.             ),
  61.             pinned: true,
  62.             floating: true,
  63.             forceElevated: boxIsScrolled,
  64.           ),
  65.         ],
  66.         body: TabBarView(
  67.           key: UniqueKey(),
  68.           controller: _tabController,
  69.           children: const [
  70.             ChildView(),
  71.             ChildView(),
  72.           ],
  73.         ),
  74.       ),
  75.     );
  76.   }
  77. }
  79. class ChildView extends StatefulWidget {
  80.   const ChildView({Key? key}) : super(key: key);
  82.   @override
  83.   State<ChildView> createState() => _ChildViewState();
  84. }
  86. class _ChildViewState extends State<ChildView> {
  87.   @override
  88.   Widget build(BuildContext context) {
  89.     final List<String> itemList =
  90.         List.generate(100, (index) => "Item ${index + 1}");
  91.     return SingleChildScrollView(
  92.       child: Column(
  93.         children: [
  94.           const Padding(
  95.             padding: EdgeInsets.only(
  96.               top: 16.0,
  97.               left: 16,
  98.               right: 16,
  99.             ),
  100.             child: TextField(
  101.               textInputAction: TextInputAction.search,
  102.             ),
  103.           ),
  104.           ListView.builder(
  105.             shrinkWrap: true,
  106.             physics: const NeverScrollableScrollPhysics(),
  107.             itemCount: itemList.length,
  108.             itemBuilder: (BuildContext context, int index) {
  109.               return ListTile(
  110.                 title: Text(itemList[index]),
  111.               );
  112.             },
  113.           ),
  114.         ],
  115.       ),
  116.     );
  117.   }
  118. }

在滑动离开并返回时，如何始终保留我的ListView的滚动位置？

英文:

I have a List of Tabs in a Tabbar.

However, I have an issue. If you run the sample code below and scroll to item 30 on Tab 1 then swipe to Tab 2 and back to Tab 1 you will immediately notice that item 30 in Tab 1 is no longer focused. The scroller has jumped to item 1 instead. This is weird.

I have tried everything possible to ensure the scroll position of each ListView is preserved irrespective of how many times I swipe away and back to it.

Here is a full runnable sample code showing exactly the issue I'm facing.

  1. import &#39;package:flutter/material.dart&#39;;
  3. class SampleListApp extends StatefulWidget {
  4.   const SampleListApp({Key? key}) : super(key: key);
  6.   @override
  7.   State&lt;SampleListApp&gt; createState() =&gt; _SampleListAppState();
  8. }
  10. class _SampleListAppState extends State&lt;SampleListApp&gt;
  11.     with TickerProviderStateMixin {
  12.   TabController? _tabController;
  13.   late ScrollController _scrollViewController;
  14.   int _currentTabIndex = 0;
  16.   _handleTabChange() {
  17.     setState(() {
  18.       if (_tabController != null) {
  19.         _currentTabIndex = _tabController!.index;
  20.       }
  21.     });
  22.   }
  24.   _initTabController() {
  25.     _tabController?.dispose();
  26.     _tabController =
  27.         TabController(initialIndex: _currentTabIndex, vsync: this, length: 2);
  28.     _tabController?.addListener(_handleTabChange);
  29.   }
  31.   @override
  32.   void initState() {
  33.     super.initState();
  34.     _initTabController();
  35.     _scrollViewController = ScrollController(initialScrollOffset: 0.0);
  36.   }
  38.   @override
  39.   Widget build(BuildContext context) {
  40.     return Scaffold(
  41.       body: NestedScrollView(
  42.         controller: _scrollViewController,
  43.         headerSliverBuilder: (BuildContext context, bool boxIsScrolled) =&gt; [
  44.           SliverAppBar(
  45.             title: const Text(&quot;Hello World&quot;),
  46.             bottom: TabBar(
  47.               indicatorColor: Colors.white,
  48.               isScrollable: true,
  49.               labelColor: Colors.orange,
  50.               unselectedLabelColor: Colors.grey,
  51.               tabs: const [
  52.                 Tab(
  53.                   text: &quot;Tab 1&quot;,
  54.                 ),
  55.                 Tab(
  56.                   text: &quot;Tab 2&quot;,
  57.                 )
  58.               ],
  59.               controller: _tabController,
  60.             ),
  61.             pinned: true,
  62.             floating: true,
  63.             forceElevated: boxIsScrolled,
  64.           ),
  65.         ],
  66.         body: TabBarView(
  67.           key: UniqueKey(),
  68.           controller: _tabController,
  69.           children: const [
  70.             ChildView(),
  71.             ChildView(),
  72.           ],
  73.         ),
  74.       ),
  75.     );
  76.   }
  77. }
  79. class ChildView extends StatefulWidget {
  80.   const ChildView({Key? key}) : super(key: key);
  82.   @override
  83.   State&lt;ChildView&gt; createState() =&gt; _ChildViewState();
  84. }
  86. class _ChildViewState extends State&lt;ChildView&gt; {
  87.   @override
  88.   Widget build(BuildContext context) {
  89.     final List&lt;String&gt; itemList =
  90.         List.generate(100, (index) =&gt; &quot;Item ${index + 1}&quot;);
  91.     return SingleChildScrollView(
  92.       child: Column(
  93.         children: [
  94.           const Padding(
  95.             padding: EdgeInsets.only(
  96.               top: 16.0,
  97.               left: 16,
  98.               right: 16,
  99.             ),
  100.             child: TextField(
  101.               textInputAction: TextInputAction.search,
  102.             ),
  103.           ),
  104.           ListView.builder(
  105.             shrinkWrap: true,
  106.             physics: const NeverScrollableScrollPhysics(),
  107.             itemCount: itemList.length,
  108.             itemBuilder: (BuildContext context, int index) {
  109.               return ListTile(
  110.                 title: Text(itemList[index]),
  111.               );
  112.             },
  113.           ),
  114.         ],
  115.       ),
  116.     );
  117.   }
  118. }

What can I do to always preserve the scroll positions of my ListViews when swiped away and back

答案1

得分: 1

如果你从TabBarView中移除UniqueKey，并在类似以下方式中添加AutomaticKeepAliveClientMixin混入，TabBarView将不会在你调用setState时重新构建：

  1. class ChildView extends StatefulWidget {
  2.   const ChildView({Key? key}) : super(key: key);
  4.   @override
  5.   State<ChildView> createState() => _ChildViewState();
  6. }
  8. class _ChildViewState extends State<ChildView>
  9.     with AutomaticKeepAliveClientMixin {
  10.   @override
  11.   Widget build(BuildContext context) {
  12.     super.build(context);
  13.     final List<String> itemList =
  14.         List.generate(100, (index) => "Item ${index + 1}");
  15.     return SingleChildScrollView(
  16.       child: Column(
  17.         children: [
  18.           const Padding(
  19.             padding: EdgeInsets.only(
  20.               top: 16.0,
  21.               left: 16,
  22.               right: 16,
  23.             ),
  24.             child: TextField(
  25.               textInputAction: TextInputAction.search,
  26.             ),
  27.           ),
  28.           ListView.builder(
  29.             shrinkWrap: true,
  30.             physics: const NeverScrollableScrollPhysics(),
  31.             itemCount: itemList.length,
  32.             itemBuilder: (BuildContext context, int index) {
  33.               return ListTile(
  34.                 title: Text(itemList[index]),
  35.               );
  36.             },
  37.           ),
  38.         ],
  39.       ),
  40.     );
  41.   }
  43.   @override
  44.   bool get wantKeepAlive => true;
  45. }

请注意，我只翻译了代码部分，没有其他内容。

英文:

If you remove the UniqueKey from TabBarView, the TabBarView won't rebuild when you setState and add AutomaticKeepAliveClientMixin mixin like this:

  1. class ChildView extends StatefulWidget {
  2.   const ChildView({Key? key}) : super(key: key);
  4.   @override
  5.   State&lt;ChildView&gt; createState() =&gt; _ChildViewState();
  6. }
  8. class _ChildViewState extends State&lt;ChildView&gt;
  9.     with AutomaticKeepAliveClientMixin {
  10.   @override
  11.   Widget build(BuildContext context) {
  12.     super.build(context);
  13.     final List&lt;String&gt; itemList =
  14.         List.generate(100, (index) =&gt; &quot;Item ${index + 1}&quot;);
  15.     return SingleChildScrollView(
  16.       child: Column(
  17.         children: [
  18.           const Padding(
  19.             padding: EdgeInsets.only(
  20.               top: 16.0,
  21.               left: 16,
  22.               right: 16,
  23.             ),
  24.             child: TextField(
  25.               textInputAction: TextInputAction.search,
  26.             ),
  27.           ),
  28.           ListView.builder(
  29.             shrinkWrap: true,
  30.             physics: const NeverScrollableScrollPhysics(),
  31.             itemCount: itemList.length,
  32.             itemBuilder: (BuildContext context, int index) {
  33.               return ListTile(
  34.                 title: Text(itemList[index]),
  35.               );
  36.             },
  37.           ),
  38.         ],
  39.       ),
  40.     );
  41.   }
  43.   @override
  44.   bool get wantKeepAlive =&gt; true;
  45. }

huangapple
  • 本文由 发表于 2023年5月30日 06:29:01
  • 转载请务必保留本文链接：https://go.coder-hub.com/76360644.html
  • dart
  • flutter
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定