Question

我遇到了一件令人烦恼的事情，向上滚动时，列表视图中的第一项保持重新渲染。即使我在顶部。

我注意到这一点的唯一方法是，因为我有一个小部件，该小部件在加载时会获取url，并获取元标题，描述和图像，并将其显示在漂亮的卡片中。

我的列表视图非常简单：

ListView.builder(
  physics: AlwaysScrollableScrollPhysics(),
  controller: _scrollController,
  itemCount: model.posts.posts.length,
  itemBuilder: (context, index) {
     // Items goes here
  });

如何阻止它发生？

保持重新渲染的小部件是一种无状态小部件，可导入ScopedModel模型，该模型从Internet上获取一些数据，然后抓取元数据，然后更新该模型。

@override
Widget build(BuildContext context) {
  UrlEmbedModel _model = new UrlEmbedModel(); // <-- the ScopedModel

  _model.fetchHtml(url); // <-- the url param comes from the constuctor

  // Rest of the widget
}

这是从网上获取内容的代码。

void fetchHtml(url) {
  http.get(url).then((response) {
    if (response.statusCode == 200) {
      // If server returns an OK response, parse the JSON
      var document = parse(response.body);

      var list = document.getElementsByTagName('meta');

      for (var item in list) {

        if (item.attributes['property'] == "og:title") {
          _title = item.attributes['content'];
        }

        if (item.attributes['property'] == "og:description") {
          _description = item.attributes['content'];
        }

        if (item.attributes['property'] == "og:image") {
          _imageUrl = item.attributes['content'];
        }

        notifyListeners();
      }
    } else {
      // If that response was not OK, throw an error.
      throw Exception('Failed to load post');
    }
  });
}

Answer 1

您编写的代码似乎还可以，但是发出请求的函数呢？可以显示吗？

如果它是Future函数，则只会发出一次请求，然后完成请求，这不像流函数会一直监听事件。

编辑

首先，如果此函数发出请求，则这些函数的类型必须为Future，如果不返回任何内容，则为void类型，然后添加async调用。您可以将.then方法更改为await方法，它会更适合您。

Future<void> fetchHtml(url) async {

 final Response response = await get(url);

 final dynamic documents = json.decode(response.body); //import 'dart:convert';

  print(documents); // print to see what you get than, pass it to the variables you want the data

    if (response.statusCode == 200) {
      //in here
    }

}

我可以在获取请求中看到一些东西，如果您回答了，我会很高兴：

为什么不反序列化收到的json？

var documents = json.decode(response.body)
您可以在反序列化文档变量后将其打印出来，并将其分配给所需的小部件

您的操作方式没有错，但可以改善它。

Answer 2

找到了罪魁祸首。

问题不是列表视图，而是我使用的RefreshIndicator。

我将其删除后，问题就消失了。

这似乎是Widget的错误。

在列表视图中向上滚动时，第一项保持重新渲染

2 个答案: