发生更改时如何在 Flutter 中重建小部件

Question

编辑：我已经编辑了下面的代码，以展示获取数据的方法以及构建列车估计的小部件（用"API_URL"和"API_STOP_ID"替换沿途的任何 API 信息）。 我希望这能更好地帮助我们解决问题！ 我非常感谢任何人可以提供的任何信息——我一直在为这个项目努力工作！ 再次感谢大家！

原帖：我有一个 ListTiles 的 ListView，每个 ListView 都有一个尾随小部件，用于在新的 Text 小部件中构建列车到达估计值。 这些尾随小部件每五秒更新一次（由打印语句证明）。 作为应用程序从火车的 API 获取数据时的填充物，它显示一个“无数据”文本小部件，该小部件由 _buildEstimatesNull() 构建。

但是，问题是即使应用程序已完成获取数据并且_isLoading = false （通过打印语句证明），仍然显示“无数据”。 尽管如此，即使解决了这个问题，列车估计也会很快过时，因为尾随小部件每五秒自行更新一次，但这不会反映在实际应用程序中，因为小部件是在页面加载时构建的。 因此，我需要一种方法来在它们获取新信息时重建这些尾随小部件。

有没有办法让 Flutter 每五秒自动重建 ListTile 的尾随小部件（或者每当 _buildEstimatesS1 更新/尾随小部件的内部结构更新时）？

class ShuttleApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new ShuttleState();
  }
}

class ShuttleState extends State<ShuttleApp> {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new HomeState();
  }
}

class HomeState extends State<HomeScreen> {

  var _isLoading = true;

  void initState() {
    super.initState();
    _fetchData();
    const fiveSec = const Duration(seconds: 5);
    new Timer.periodic(fiveSec, (Timer t) {
      _fetchData();
    });
  }

  var arrivalsList = new List<ArrivalEstimates>();

  _fetchData() async {
    arrivalsList.clear();
    stopsList.clear();
    final url = "API_URL";
    print("Fetching: " + url);
    final response = await http.get(url);
    final busesJson = json.decode(response.body);
    if (busesJson["service_id"] == null) {
      globals.serviceActive = false;
    } else {
      busesJson["ResultSet"]["Result"].forEach((busJson) {
        if (busJson["arrival_estimates"] != null) {
          busJson["arrival_estimates"].forEach((arrivalJson) {
            globals.serviceActive = true;
            final arrivalEstimate = new ArrivalEstimates(
                arrivalJson["route_id"], arrivalJson["arrival_at"], arrivalJson["stop_id"]
            );
            arrivalsList.add(arrivalEstimate);
          });
        }
      });
    }
    setState(() {
      _isLoading = false;
    });
  }

  Widget _buildEstimateNull() {
    return new Container(
      child: new Center(
        child: new Text("..."),
      ),
    );
  }

  Widget _buildEstimateS1() {
    if (globals.serviceActive == false) {
      print('serviceNotActive');
      _buildEstimateNull();
    } else {
      final String translocStopId = "API_STOP_ID";
      final estimateMatches = new List<String>();
      arrivalsList.forEach((arrival) {
        if (arrival.stopId == translocStopId) {
          estimateMatches.add(arrival.arrivalAt);
        }
      });
      estimateMatches.sort();
      if (estimateMatches.length == 0) {
        print("zero");
        return _buildEstimateNull();
      } else {
        return new Container(
          child: new Center(
            child: new Text(estimateMatches[0]),
          ),
        );
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        backgroundColor: const Color(0xFF171717),
        appBar: new AppBar(),
        body: new DefaultTextStyle(
          style: new TextStyle(color: const Color(0xFFaaaaaa),),
          child: new ListView(
            children: <Widget>[
              new ListTile(
                title: new Text('S1: Forest Hills',
                    style: new TextStyle(fontWeight: FontWeight.w500, fontSize: 20.0)),
                subtitle: new Text('Orange Line'),
                contentPadding: new EdgeInsets.symmetric(vertical: 16.0, horizontal: 16.0),
                trailing: _isLoading ? _buildEstimateNull() : _buildEstimateS1(),
              ),
            ],
          ),
        )
    );
  }

class ArrivalEstimates {
  final String routeId;
  final String arrivalAt;
  final String stopId;
  ArrivalEstimates(this.routeId, this.arrivalAt, this.stopId);
}

非常感谢您提供的任何帮助！ 我真的超级感激！ :)

Answer 1

有几种方法可以解决这个问题。 然而，在不查看更多代码的情况下判断正在发生的事情有点困难 - 特别是您如何获取数据以及您正在使用它做什么。 但我想无论如何我都可以给你一个足够的答案。

这样做的简单方法是：

1. 有一个 StatefulWidget 来跟踪列表中所有项目的构建估计。 它应该从你的 API 请求数据，获取结果，然后调用setState(() => this.listData = data); . 对 setState 的调用告诉小部件它需要重建。
2. 为列表中的每个项目都有一个 StatefulWidget。 他们都会每 5 秒执行一次 API 请求，获取结果，然后各自调用setState(() => this.itemData = data); . 这意味着对 API 等的多次调用。

#1 的优点是您可以批处理 API 调用，而 #2 的优点是您的构建整体变化较小（尽管 flutter 的工作方式，这将非常小）......所以我可能会选择 # 1 如果可能。

但是，有一个更好的方法来做到这一点！

更好的方法是使用某种 API 管理器（或您想调用的任何名称）来处理与您的 API 的通信。 它可能会在您的小部件树中居于更高的位置，并且会以您想要的任何逻辑启动/停止。 根据小部件树的高度，您可以将其传递给每个子项，或者更有可能将其保存在 InheritedWidget 中，然后可用于从每个列表元素或整个列表中检索它。

API 管理器将提供各种流- 要么带有一堆命名字段/方法，要么带有 getStream(id) 类型的结构，具体取决于您的 API。

然后，在您的各种列表元素中，您将使用StreamBuilder小部件基于数据构建每个元素 - 通过使用 StreamBuilder，您将获得一个 ConnectionState 对象，该对象让您知道流是否已收到任何数据，以便您可以选择显示 isLoading 类型的小部件而不是显示数据的小部件。

通过使用这种更高级的方法，您可以获得：

• 可维护性
  • 如果您的 API 发生变化，您只需更改 API 管理器
  • 您可以编写更好的测试，因为 API 交互和 UI 交互是分开的
• 可扩展性
  • 如果您稍后使用推送通知进行更新而不是每 5 秒 ping 一次服务器，则可以将其合并到 API 管理器中，以便它可以在不接触 UI 的情况下简单地更新流

编辑：根据 OP 的评论，他们已经或多或少地实施了第一个建议。 但是，代码存在一些问题。 我将在下面列出它们，并且我已经发布了经过一些更改的代码。

1. 每次完成新构建时都应替换arrivalsList而不是简单地更改。 这是因为 dart 比较列表，如果它找到相同的列表，它不一定比较所有元素。 此外，虽然在函数中间更改它不一定会导致问题，但通常最好使用局部变量，然后在最后更改值。 请注意，该成员实际上是在 setState 中设置的。
2. 如果 serviceActive == false，则return _buildEstimateNull(); .

这是代码：

class HomeState extends State<HomeScreen> {

  var _isLoading = true;

  void initState() {
    super.initState();
    _fetchData();
    const fiveSec = const Duration(seconds: 5);
    new Timer.periodic(fiveSec, (Timer t) {
      _fetchData();
    });
  }

  var arrivalsList = new List<ArrivalEstimates>();

  _fetchData() async {
    var arrivalsList = new List<ArrivalEstimates>(); // *********** #1
    stopsList.clear();
    final url = "API_URL";
    print("Fetching: " + url);
    final response = await http.get(url);
    final busesJson = json.decode(response.body);
    if (busesJson["service_id"] == null) {
      print("no service id");
      globals.serviceActive = false;
    } else {
      busesJson["ResultSet"]["Result"].forEach((busJson) {
        if (busJson["arrival_estimates"] != null) {
          busJson["arrival_estimates"].forEach((arrivalJson) {
            globals.serviceActive = true;
            final arrivalEstimate = new ArrivalEstimates(
                arrivalJson["route_id"], arrivalJson["arrival_at"], arrivalJson["stop_id"]
            );
            arrivalsList.add(arrivalEstimate);
          });
        }
      });
    }
    setState(() {
      _isLoading = false;
      this.arrivalsList = arrivalsList; // *********** #1
    });
  }

  Widget _buildEstimateNull() {
    return new Container(
      child: new Center(
        child: new Text("..."),
      ),
    );
  }

  Widget _buildEstimateS1() {
    if (globals.serviceActive == false) {
      print('serviceNotActive');
      return _buildEstimateNull();  // ************ #2
    } else {
      final String translocStopId = "API_STOP_ID";
      final estimateMatches = new List<String>();
      print("arrivalsList length: ${arrivalsList.length}");
      arrivalsList.forEach((arrival) {
        if (arrival.stopId == translocStopId) {
          print("Estimate match found: ${arrival.stopId}");
          estimateMatches.add(arrival.arrivalAt);
        }
      });
      estimateMatches.sort();
      if (estimateMatches.length == 0) {
        print("zero");
        return _buildEstimateNull();
      } else {
        return new Container(
          child: new Center(
            child: new Text(estimateMatches[0]),
          ),
        );
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        backgroundColor: const Color(0xFF171717),
        appBar: new AppBar(),
        body: new DefaultTextStyle(
          style: new TextStyle(color: const Color(0xFFaaaaaa),),
          child: new ListView(
            children: <Widget>[
              new ListTile(
                title: new Text('S1: Forest Hills',
                    style: new TextStyle(fontWeight: FontWeight.w500, fontSize: 20.0)),
                subtitle: new Text('Orange Line'),
                contentPadding: new EdgeInsets.symmetric(vertical: 16.0, horizontal: 16.0),
                trailing: _isLoading ? _buildEstimateNull() : _buildEstimateS1(),
              ),
            ],
          ),
        )
    );
  }

Answer 2

每次获取数据时都创建一个新列表，而不是清除和重新使用arrivalsList列表。 否则 Flutter 无法检测列表是否已更改。

此外，如果每次更改列表时都调用setState ，代码会更清晰。

_fetchData() async {

  final url = "API_URL";
  print("Fetching: " + url);
  final response = await http.get(url);
  final busesJson = json.decode(response.body);
  if (busesJson["service_id"] == null) {
    globals.serviceActive = false;
    setState(() {
      _isLoading = false;
    });
  } else {
    final newArrivalsList = new List<ArrivalEstimates>();
    busesJson["ResultSet"]["Result"].forEach((busJson) {
      if (busJson["arrival_estimates"] != null) {
        busJson["arrival_estimates"].forEach((arrivalJson) {
          globals.serviceActive = true;
          final arrivalEstimate = new ArrivalEstimates(
              arrivalJson["route_id"], arrivalJson["arrival_at"], arrivalJson["stop_id"]
          );
          newArrivalsList.add(arrivalEstimate);
        });
      }
    });
    setState(() {
      arrivalsList = newArrivalsList;
      _isLoading = false;
    });
  }
}

---

一些旁注：

我不确定您是否真的想在获取数据之前清除列表。 如果状态被正确更新，这将导致每 5 秒闪烁一次。

我不确定你是否简化了代码，但如果网络速度很慢，每五秒调用一次_fetchData方法可能会成为一个问题。

Answer 3

如果您确定每次调用 setState() 时都希望子小部件重建并且它顽固地拒绝，则可以给它一个 UniqueKey()。 这将确保当 setState() 触发重建时，子小部件键将不匹配，旧小部件将被弹出并处理，并且新小部件将在小部件树中替换它。

请注意，这是使用密钥的方式与它们的预期相反（以减少重建），但如果您无法控制的某些事情阻碍了必要的重建，那么这是实现所需目标的简单内置方法。

这是一篇关于 Flutter 团队成员 Emily Fortuna 的关于密钥的非常有用的 Medium 文章：

https://medium.com/flutter/keys-what-are-they-good-for-13cb51742e7d

Answer 4

我不确定这是否是您想要的，但我可能迟到了，但我相信您可以有效地使用更改通知程序来实现这一目标。 基本上，更改通知程序与您支持的 logic() 挂钩，例如 api 数据获取。 然后向与更改通知程序提供程序相同类型的更改通知程序注册小部件。 如果数据发生更改，则将重建使用更改通知程序注册的小部件。

例如

// extend the change notifier class
class DataClass extends ChangeNotifier {
....
getData(){
   Response res = get('https://data/endpoint')
notifyListeners()
}


void onChange() {
  notifyListeners();
}
....
}

每次数据发生变化时，您都会调用notifyListeners()来触发消费小部件的重建。

使用 changenotifier 注册您的小部件

class View extends StatefulWidget {
 Widget create(BuildContext context) {
  return ChangeNotifierProvider<ModelClass>(
    builder: (context) => DataClass(auth: auth),
    child: Consumer<ModelClass>(
      builder: (context, model, _) => View(model: model),
    ),
  );
}
}

您也可以为此使用消费者。 从文档中获取更多信息