颤振- ListView在TabBarView上失去它的滚动位置
我有一个非常简单的颤振应用程序，它有两个视图( TabBarView，有两个视图(Tab 1和Tab 2)，其中一个(Tab 1)有一个带有许多简单文本小部件的ListView，问题是在我向下滚动Tab 1E29的ListView元素之后，如果我从E 110Tab 1>标签1到E 112Tab 2E 213，最后我从E 114Tab 2E 215滑到E116/code>Tab 1代码<217>之前的代码中，代码的位置< get ><219<219号<>。
以下是代码：
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage>
with SingleTickerProviderStateMixin {
late TabController controller;
@override
void initState() {
super.initState();
controller = TabController(
length: 2,
vsync: this,
);
}
@override
void dispose() {
controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
var tabs = const <Tab>[
Tab(icon: Icon(Icons.home), text: 'Tab 1'),
Tab(icon: Icon(Icons.account_box), text: 'Tab 2')
];
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: TabBarView(controller: controller, children: <Widget>[
ListView(children: <Widget>[
Column(children: <Widget>[
for (int i = 0; i < 48; i++) Text('Data $i'),
])
]),
const Center(child: Text('Tab 2'))
]),
bottomNavigationBar: Material(
color: Colors.deepOrange,
child: TabBar(controller: controller, tabs: tabs),
),
);
}
}我甚至在另一个类中分离了TabBarView (表1和表2)，并且我注意到
@override
Widget build(BuildContext context) {
...
}方法的每个子(表1和表2)执行每次我滑动到它的容器标签。
我的问题是：
1.-即使我从选项卡移动到选项卡，如何保存 ListView 的卷轴？
2.-有办法执行吗？
@override
Widget build(BuildContext context) {
}方法只有一次--如果我将 TabBarView子程序 (Tab 1和Tab 2)分离到另一个类？--我的意思是，如果在创建Tab 1和Tab 2时必须检索数据，我不想每次在Tab被滑动时都这样做。那会很贵的。
3.-一般而言，是否有办法防止选项卡视图(包括其变量、数据等)每次我跳到那个标签时都要重建？
--谢谢--
回答 7
Stack Overflow用户
发布于 2017-07-29 09:20:32
乔丹·纳尔逊的回答是正确的。别用我的。
1.-即使我从选项卡移动到选项卡，如何保持ListView的滚动？
好吧，这并不像我想的那么容易，但我想我做到了。
我的想法是在HomePageState中保持listview的偏移量，当我们滚动列表视图时，我们只需要从通知程序获得偏移，并通过setter设置它(请使它更干净并共享！)
然后，当我们重建listview时，我们只要求我们的主小部件给我们保存的偏移量，并通过ScrollController使用该偏移量初始化列表。
我还更改了您的listview，因为它有一个包含50个文本的列元素，可以使用50个元素，每个元素只有一个文本。希望你不介意:)
守则：
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'),
);
}
}
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,
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 StatefulListView(
getOffsetMethod: () => listViewOffset,
setOffsetMethod: (offset) => this.listViewOffset = offset,
),
new Center(child: new Text('Tab 2'))
]),
bottomNavigationBar: new Material(
color: Colors.deepOrange,
child: new TabBar(controller: controller, tabs: tabs),
),
);
}
}
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);
}
},
);
}
}Stack Overflow用户
发布于 2018-08-03 03:08:07
如果您给每个TabBarView一个PageStorageKey，滚动偏移量将被保存。请参阅有关PageStorageKey在这里的更多信息。
Stack Overflow用户
发布于 2018-11-21 15:45:47
更具体地说，您可以使用PageStorageKey和任何可滚动视图来保持滚动位置，例如：
new ListView.builder(key: new PageStorageKey('myListView'), ...)https://stackoverflow.com/questions/45341721
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号