颤振：如何在不按按钮的情况下进行列表视图更新？

Posted 2023-04-19

【中文标题】颤振：如何在不按按钮的情况下进行列表视图更新？

【英文标题】：flutter: how to make a listview update without pressing a button?

【发布时间】：2021-08-31 13:18:22

【问题描述】：

所以我目前正在开发一个在第一个屏幕上有一个列表视图的应用程序（在 main.dart 上实现）。 列表视图从互联网（异步）获取它的数据。 问题是，列表视图在数据更改时不会更新。

（我可以通过设计一个“重新加载”按钮并在每次需要新数据时按下它来实现此功能。但这不是我现在想要的）。

也就是说，如何自动更新列表视图？

EDIT1：添加一些代码 代码可能很乱；见文末说明。

class RssFeed extends StatelessWidget 
  String title;
  String pubDate;
  RssFeed(this.title, this.pubDate);
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      body: Column(
        children: [
          Align(
            alignment: Alignment.topRight,
            child: Text(title),
          ),
          Text(pubDate)
        ],
      ),
    );
  


class FeedsList extends StatefulWidget 
  @override
  State<StatefulWidget> createState() 

    return _FeedsListState();
  


class _FeedsListState extends State<FeedsList> 
  List<Widget> list1 = new List<Widget>();

  @override
  void initState() 
    super.initState();
    ls();
  

  Future ls() async 
    list1.clear();
    list.clear();
    sites1.clear();
    RSS_reader rss_reader = new RSS_reader();
    for (var i in saver.list.items) 
      sites1.add(
          site(siteAdress: i.siteAdress, siteDescription: i.siteDescription));
    
    var res = await rss_reader.Get_items(sites1);

    for (var val in res) 
      list.add(InkWell(
          onTap: () => _launchURL(val.item.link),
          child: Container(
            height: 50,
            color: Colors.amber[100],
            child: Center(
              child: new RssFeed(val.item.title, val.item.pubDate.toString()),
            ),
          )));
    
    print(list.length);
    setState(() 
      list1 = list;
    );
  

  Widget build(BuildContext context) 
    return Scaffold(
        body: ListView.builder(
            itemCount: list1.length,
            itemBuilder: (BuildContext context, int i) 
              return list1[i];
            ));
  

说明： 您可以猜到，这是一个 RSS 阅读器。 所以，我有一个类 RSSFeed；这使得 Listview 的瓷砖之一。 然后在 FeedsList 类（有状态小部件）中，创建列表视图。 我有一个名为 RSS_reader 的类和一个 Get_items 方法，它获取一堆站点作为输入，并将这些站点的最新提要放在一个列表中（上面代码中的“res”）。 然后，我将这些项目放入“容器”列表中，然后构建列表视图。

然后，在主函数中，我创建一个容器，如下所示： 容器（ 身高：500， 宽度：580， 孩子：FeedsList（）， ) 并且出现了问题； FeedsList 类不会自动更新。尽管如果我放置一个按钮并通过该按钮导航到 FeedsList 类，则列表会刷新并且可以。

感谢您的阅读和帮助。

【问题讨论】：

你能添加一些代码吗？有很多方法可以做到这一点

@JonathanIxcayau 已添加！不过，我希望它不会太乱读！

【参考方案1】：

如果您只想从外部源获取一次数据，请使用 FutureBuilder，如果您想多次获取数据，请查看 StreamBuilder。这两个小部件都将具有您正在寻找的行为，没有刷新按钮。

如何使用 FutureBuilder 的简单示例：

Future<List<String>> _fetchData() 
    return // fetch data from source


@override
Widget build(BuildContext context) 
    return FutureBuilder(
        future: _fetchData,
        builder: (BuildContext context, AsyncSnapshot<List<String>> snapshot) 
          
            if (snapshot.hasData && snapshot.data != null) 
                // This widget will be built when data is fetched
                const List<String> list = snapshot.data; 
                return ListView(
                    children: list.map(
                        (element) => ListTile(
                            title: Text(element),
                        ),
                    ).asList(),
                );
             else 
                // This widget will be built while you are waiting for your data to be fetched
                return Container(
                    child: Center(
                        child: Text("Loading data..."),
                    ),
                );
            
        ,
    );

【讨论】：

感谢您的帮助。我会研究一下streambuilder。

【参考方案2】：

您必须流式传输数据，ListView 会自动更新。

【参考方案3】：

在你说你可以调用你的 ls() 函数的按钮中，你的列表应该在点击按钮时更新

样本：

return Scaffold(
    body: ListView.builder(
      itemCount: list1.length,
      itemBuilder: (BuildContext context, int i) 
        return list1[i];
      ,
    ),
    floatingActionButton: FloatingActionButton(
      child: Icon(Icons.refresh),
      onPressed: () => ls(),
    ),
  );

【讨论】：

这应该会在您每次点击 fab 时刷新您的列表

是的！不过，正如我所说，我不想点击按钮。非常感谢您的回复。