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

4 回答

• 1

  1.- How can I keep the scroll of the ListView even if I move from tab to tab?

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

  我的想法是在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);
          }
        },
      );
    }
  }
  

  回复于 2024-05-07T20:55:29+08:00
• 6

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

  回复于 2024-05-07T20:55:29+08:00
• 7

  更具体地说，您可以将PageStorageKey与任何可滚动视图一起使用以保持滚动位置，例如：

  new ListView.builder(key: new PageStorageKey('myListView'), ...)
  

  回复于 2024-05-07T20:55:29+08:00
• 0

  Is there a way to execute Widget build(BuildContext context) method only once...

  Imho，颤振的想法是为永远的重建做好准备 . 它应该便宜 . 如果您有一些昂贵的操作，可以使用State来"cache"结果 . 例如 . 您可以在 initState 中执行网络请求，并在收到响应时通过 setState rebuild . 对于选项卡，您可以在父窗口小部件中准备和保存数据 . 您可以在flutter tutorial中找到有关管理状态的更多信息

  回复于 2024-05-07T20:55:29+08:00