Flutter   发布时间:2022-05-03  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了Flutter – TabBarView内部的ListView丢失其滚动位置大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个非常简单的Flutter应用程序,带有两个视图的TabBarView(选项卡1和选项卡2),其中一个(选项卡1)有一个带有许多简单文本窗口小部件的ListView,问题是我向下滚动ListView元素后选项卡1,如果我从选项卡1滑动到选项卡2,最后我从中滑动
选项卡2到选项卡1,选项卡1的ListView中的上一个滚动位置丢失.

这是代码

@H_607_10@import 'package:Flutter/material.dart'; void main() { runApp(new MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: 'Flutter Demo',theme: new ThemeData( priMarySwatch: Colors.blue,),home: new MyHomePage(title: 'Flutter Demo Home Page'),); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key,this.titlE}) : super(key: key); final String title; @override _MyHomePageState createState() => new _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStatemixin { TabController controller; @override void initState() { super.initState(); controller = new TabController( length: 2,vsync: this,); } @override void dispose() { controller.dispose(); super.dispose(); } @override Widget build(BuildContext context) { var tabs = <Tab>[ new Tab(icon: new Icon(Icons.homE),text: 'Tab 1'),new Tab(icon: new Icon(Icons.account_Box),text: 'Tab 2') ]; return new Scaffold( appBar: new AppBar( title: new Text(widget.titlE),body: new TabBarView(controller: controller,children: <Widget>[ new ListView(children: <Widget>[ new column(children: <Widget>[ new Text('Data 1'),new Text('Data 2'),new Text('Data 3'),new Text('Data 4'),new Text('Data 5'),new Text('Data 6'),new Text('Data 7'),new Text('Data 8'),new Text('Data 9'),new Text('Data 10'),new Text('Data 11'),new Text('Data 12'),new Text('Data 13'),new Text('Data 14'),new Text('Data 15'),new Text('Data 16'),new Text('Data 17'),new Text('Data 18'),new Text('Data 19'),new Text('Data 20'),new Text('Data 21'),new Text('Data 22'),new Text('Data 23'),new Text('Data 24'),new Text('Data 25'),new Text('Data 26'),new Text('Data 27'),new Text('Data 28'),new Text('Data 29'),new Text('Data 30'),new Text('Data 31'),new Text('Data 32'),new Text('Data 33'),new Text('Data 34'),new Text('Data 35'),new Text('Data 36'),new Text('Data 37'),new Text('Data 38'),new Text('Data 39'),new Text('Data 40'),new Text('Data 41'),new Text('Data 42'),new Text('Data 43'),new Text('Data 44'),new Text('Data 45'),new Text('Data 46'),new Text('Data 47'),new Text('Data 48'),]) ]),new Center(child: new Text('Tab 2')) ]),bottomNavigationBar: new Material( color: Colors.deepOrange,child: new TabBar(controller: controller,tabs: tabs),); } }

我甚至在另一个类中分离了TabBarView子项(Tab 1和Tab 2),我注意到了

@H_607_10@@override Widget build(BuildContext context) { ... }

每次刷到容器选项卡时,都会执行每个子项的方法(选项卡1和选项卡2).

我的问题是:

1.-即使从标签移动到标签,如何保持ListView的滚动?

2.-有没有办法执行

@H_607_10@@override Widget build(BuildContext context) { }

如果我将TabBarView子项(Tab 1和Tab 2)分离到另一个类,只有一次方法
我的意思是,如果我必须在创建选项卡1和选项卡2时检索数据,我不希望每次刷入选项卡时都这样做.这将是昂贵的.

3.-通常,有没有办法防止每次刷到该选项卡时重建标签视图(包括它的变量,数据等)?

先感谢您.

解决方法

1.-即使从标签移动到标签,如何保持ListView的滚动?

好吧,这并不像我想的那么容易,但我想我设法做到了.

我的想法是在HomePageState中保持listview的偏移量,当我们滚动listview时,我们只是从notifier获得偏移并通过setter设置它(请让它更干净并分享!).

然后,当我们重建listview时,我们只需要让我们的主窗口小部件给我们保存的偏移量,并通过ScrollController我们用该偏移量初始化列表.

我也改变了你的listview,因为它有一个包含50个文本的列元素,每个文本使用50个元素,每个文本一个.希望你不要介意:)

代码

@H_607_10@import 'package:Flutter/material.dart'; void main() { runApp(new MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: 'Flutter Demo',); } } typedef double GetOffsetMethod(); typedef void SetOffsetMethod(double offset); class MyHomePage extends StatefulWidget { MyHomePage({Key key,this.titlE}) : super(key: key); final String title; @override _MyHomePageState createState() => new _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStatemixin { TabController controller; double listViewOffset=0.0; @override void initState() { super.initState(); controller = new TabController( length: 2,body: new TabBarView( controller: controller,children: <Widget>[ new StatefulListView( getOffsetMethod: () => listViewOffset,setOffsetMethod: (offset) => this.listViewOffset = offset,); } } class StatefulListView extends StatefulWidget { StatefulListView({Key key,this.getOffsetMethod,this.setOffsetMethoD}) : super(key: key); final GetOffsetMethod getOffsetMethod; final SetOffsetMethod setOffsetMethod; @override _StatefulListViewState createState() => new _StatefulListViewState(); } class _StatefulListViewState extends State<StatefulListView> { ScrollController scrollController; @override void initState() { super.initState(); scrollController = new ScrollController( initialScrollOffset: widget.getOffsetMethod() ); } @override Widget build(BuildContext context) { return new NotificationListener( child: new ListView.builder( controller: scrollController,itemCount: 50,itemBuilder: (BuildContext context,int indeX) { return new Text("Data "+index.toString()); },onNotification: (notification) { if (notification is ScrollNotification) { widget.setOffsetMethod(notification.metrics.pixels); } },); } }

大佬总结

以上是大佬教程为你收集整理的Flutter – TabBarView内部的ListView丢失其滚动位置全部内容,希望文章能够帮你解决Flutter – TabBarView内部的ListView丢失其滚动位置所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。