在Flutter中刷新小部件外的列表视图?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在Flutter中刷新小部件外的列表视图?相关的知识,希望对你有一定的参考价值。

我有一个Flutter应用程序,它包括一个带滑块和tabview的脚手架。

tabview包含一个List,显示在每个选项卡上,如下图所示。

  List<Widget> widgetList = <Widget>[
    Post(),
    Feed(),
    Location(),
    HomePage(),
    Feed(),
  ];

现在我想在移动滑块时刷新屏幕上的当前选项卡。但是,由于这些类是私有的,即_HomePageState,我不知道如何访问refreshList()方法,如下面的代码段所示。

homepage.dart:

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => new _HomePageState();
}

class _HomePageState extends State<HomePage> {
  var list;
  var random;

  var refreshKey = GlobalKey<RefreshIndicatorState>();

  @override
  void initState() {
    super.initState();
    random = Random();
    refreshList();
  }

  Future<Null> refreshList() async {
    refreshKey.currentState?.show(atTop: false);
    await Future.delayed(Duration(seconds: 2));

    setState(() {
      list = List.generate(random.nextInt(10), (i) => "Item $i");
    });

    return null;
  }
}

滑块未烘焙到每个列表视图窗口小部件,即homepage.dart,因为滑块值适用于每个单独的选项卡。当移动带滑块的外部窗口小部件时,如何刷新内部列表视图窗口小部件?

enter image description here

答案

有不同的方法来处理这个:

  1. 您可以将PageController和页面索引传递给您的页面小部件。在您的页面中,窗口小部件可以监听更改(pageController.addListener(...))并将当前居中的页面与其页面索引进行比较。
  2. 为要刷新的每个页面创建一个ChangeNotifierfinal postRefresh = ChangeNotifier(); final feedRefresh = ChangeNotifier(); ... // build method of parent: List<Widget> widgetList = <Widget>[ Post(refresh: postRefresh), Feed(refresh: feedRefresh), ... ]; // initState method of parent: pageController.addListener(() { final roundedPage = pageController.page.round(); if(roundedPage == 0) { postRefresh.notifyListeners(); } else if(roundedPage == 1) { feedRefresh.notifyListeners(); } // ... })
  3. 您还可以为页面小部件提供全局密钥(为此,他们的State类必须是公共的): // class body of parent: final postPageKey = GlobalKey<PostPageState>(); final feedPageKey = GlobalKey<FeedPageState>(); // build method of parent: List<Widget> widgetList = <Widget>[ Post(key: postPageKey), Feed(key: feedPageKey), ... ]; // initState method of parent: pageController.addListener(() { final roundedPage = pageController.page.round(); if(roundedPage == 0) { postPageKey.currentState?.refresh(); } else if(roundedPage == 1) { feedPageKey.currentState?.refresh(); } // ... })

以上是关于在Flutter中刷新小部件外的列表视图?的主要内容,如果未能解决你的问题,请参考以下文章

Flutter:在 Navigation.pop 上刷新父小部件

单击按钮刷新时如何刷新小部件列表视图?

Flutter - 另一个小部件下方的位置列表视图

Flutter 刷新状态小部件

在 Flutter 中保持滚动视图偏移的同时添加列表视图项

如何在 Flutter 的 ListView 中显示特定小部件的子小部件?