那些遇到过的问题

Flutter - TabBarView内部的ListView丢失其滚动位置

Sal*_*ala 19 listview scroll flutter

我有一个非常简单的Flutter应用程序,带有两个视图的TabBarView(选项卡1和选项卡2),其中一个(选项卡1)有一个带有许多简单文本窗口小部件的ListView,问题是我向下滚动ListView元素后的标签1,如果我刷卡从标签1至标签2,最后我刷卡从 标签2到选项卡1,在ListView控件之前的滚动位置标签1迷路.

这是代码:

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),
      ),
    );
  }
}
Run Code Online (Sandbox Code Playgroud)

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

@override
  Widget build(BuildContext context) {
  ...
}
Run Code Online (Sandbox Code Playgroud)

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

我的问题是:

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

2.-有没有办法执行

@override
Widget build(BuildContext context) {

}
Run Code Online (Sandbox Code Playgroud)

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

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

先感谢您.

Jor*_*son 33

如果为每个TabBarView提供一个PageStorageKey,则会保存滚动偏移量.在此处查看有关PageStorageKey的更多信息.

  • 如果您滚动很多元素，则在此解决方案上，选项卡开关会滞后很大。有任何想法吗？ (2认同)

Ole*_*dov 15

更具体地说，您可以在任何可滚动视图中使用PageStorageKey来保持滚动位置，例如：

new ListView.builder(key: new PageStorageKey('myListView'), ...)
Run Code Online (Sandbox Code Playgroud)

  • 如果您滚动很多元素，则在此解决方案上，选项卡开关会滞后很大。有任何想法吗？ (2认同)

Mar*_*łek 10

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

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

我的想法是在HomePageState中保持listview的偏移量,当我们滚动listview时,我们只是从notifier获得偏移并通过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);
        }
      },
    );
  }
}
Run Code Online (Sandbox Code Playgroud)

pas*_*whu 7

其实你不需要PageStorageKey。问题是当您滑动到 tab2 然后向后滑动时，tab1 小部件将被重建。所以你失去了你的位置。最简单的解决方案是使用 AutomaticKeepAliveClientMixin 并覆盖“wantToKeepAlive”方法。然后 TabbarView 将自动保存在内存中，不会被重建。所以问题就解决了。您可以从https://api.flutter.dev/flutter/widgets/AutomaticKeepAliveClientMixin-mixin.html查看更多详细信息

Cop*_*oad 6

输出：

在此处输入图片说明

码：

@override
Widget build(BuildContext context) {
  return DefaultTabController(
    length: 2,
    child: Scaffold(
      appBar: AppBar(
        title: Text("PageStorageKey"),
        bottom: TabBar(
          tabs: [
            Tab(icon: Icon(Icons.looks_one), text: "List1"),
            Tab(icon: Icon(Icons.looks_two), text: "List2"),
          ],
        ),
      ),
      body: TabBarView(
        children: [
          _buildList(key: "key1", string: "List1: "),
          _buildList(key: "key2", string: "List2: "),
        ],
      ),
    ),
  );
}

Widget _buildList({String key, String string}) {
  return ListView.builder(
    key: PageStorageKey(key),
    itemBuilder: (_, i) => ListTile(title: Text("${string} ${i}")),
  );
}
Run Code Online (Sandbox Code Playgroud)

归档时间：

查看次数：

8885 次

最近记录：

6 年，4 月 前
更改选项卡时如何让 Flutter ScrollController 保存 ListView.builder() 的位置？ 8
更多相关链接
相关归档
同步ScrollView滚动位置 - android 94
使元素不可点击(点击它背后的东西) 75
如何在flutter中更改包名？ 65
jQueryMobile:隐藏锚标记的数据图标 25
如何在一定高度后显示滚动但高度不应该固定？ 18
未找到 TargetPlatform.android_x86 的应用程序 18
如何在Flutter SDK中使用OpenCV？ 13
无法使用 App Check 为 Firebase 存储生成调试令牌 12
使颤动通知（通过 firebase）弹出到前台（而不是状态栏中的唯一图标） 10
Flutter、ListView、如何在ListView的顶部添加多个项目并使其不滚动到顶部 6
难疑归档
C#的正确版本号是多少？ 2422
何时在CSS中使用margin和padding 2277
LINQ中的多个"order by" 1537
.gitignore被Git忽略了 1407
我在哪里可以找到有关在JavaScript中格式化日期的文档？ 1381
"无法找到或加载主类"是什么意思？ 1277
window.onload vs $(document).ready() 1205
这是什么意思？"'NSUnknownKeyException',原因:...此类不是键值X的键值编码兼容" 1143
如何按值排序多维数组？ 1058
如何在psql中切换数据库？ 1029