Flutter 正确布局 Row 的元素，但在控制台上给出 RangeError？答案

【问题标题】：Flutter layouts the elements of the Row correctly but gives RangeError on console?Flutter 正确布局 Row 的元素，但在控制台上给出 RangeError？
【发布时间】：2021-07-29 05:43:40
【问题描述】：

我有一个小部件，它返回 2 种可能的布局，正如您在屏幕截图中看到的数字一样，对于从 1 -> 2、1->1、2- 转换的场景，我在控制台上没有收到任何错误>2.

但是，当它从 2->1 开始时，

我得到几个 (RangeError (index): Invalid value: Not inclusive range 0..x : y) 错误。（我只在 AnswerBar 从布局 2 到布局 1 的地方得到这个）

它总是正常工作，我从来没有在手机上看到任何不正确的布局或指示横幅的错误，但在调试控制台上出现这个错误很烦人。我该如何解决这个问题？

【问题讨论】：

能否请您也添加 AnswerBarBubble 的小部件代码？

标签： flutter riverpod

【解决方案1】：

您正在使用LayoutBuilder，应该像对待函数处理程序一样对待它以读取提供程序，因为它使用的上下文与您正在读取answerLengthProvider 的父组件不同。

解决方法是在LayoutBuilder 中使用context.read，而不是在其外部使用useProvider。

class AnswerBar extends HookWidget {
  const AnswerBar() : super();

  @override
  Widget build(BuildContext context) {
    print('AnswerBar built.');
    return LayoutBuilder(builder: (context, size) {
      final _answerLength = context.read(answerLengthProvider);
      ...
    }
  }
}

【讨论】：

感谢 Alex 的回复，这个解决方案没有给出任何不同的结果，但至少我从现在开始知道我的反模式使用情况。另外，我在下面分享了解决方案。
真的吗？我在本地设置了一个示例，这为我修复了它。
我们实际上并没有强制使用 context.read ，我们可以将 LayoutBuilder 与消费者一起包装，这也将允许我们观看提供者而不是仅限于阅读。
但我不确定消费者是否会在性能问题上增加开销......
Consumer 是一种非常高效的机制，因为它只重建其子级而不是整个小部件。

【解决方案2】：

解决方案是：使用密钥。（我用于 AnswerBar ）

简单地说，如果您发现自己添加、删除或重新排序具有某种状态的相同类型的小部件集合（这是我的情况），关键是解决方案。

我从这些 Flutter 官方资源中找到了解决方案：

视频格式：https://www.youtube.com/watch?v=kn0EOS-ZiIc

文章格式：https://medium.com/flutter/keys-what-are-they-good-for-13cb51742e7d

【讨论】：

啊，是的。这也是我想对你说的。您的所有小部件都应具有默认的 Key 参数，即使您不使用它们也是如此。