Flutter 知识集锦 —从 restorationId 说起临时状态存储
2024-02-24 09:12:30
在 Flutter 开发中，你可能会遇到这样一种情况：用户在一个页面输入了一些信息，然后跳转到其他页面，当用户返回之前的页面时，希望之前输入的信息能够保留下来，而不是重新输入。这时，restorationId 就派上用场了。它就像一个标签，帮助 Flutter 记住组件的状态，并在需要的时候恢复它们。
简单来说，restorationId 是 Flutter 组件的一个可选属性，它是一个字符串，用于标识组件在状态恢复过程中的唯一性。当 Flutter 应用的状态被保存和恢复时，它会使用 restorationId 来匹配相应的组件，并恢复其状态。
那么，restorationId 具体是如何工作的呢？
当一个 Flutter 应用进入后台或者被系统终止时，Flutter 框架会自动保存应用的状态，包括各个组件的状态。这个过程被称为状态保存（State Restoration）。在状态保存过程中，Flutter 会遍历所有具有 restorationId 属性的组件，并将它们的状态保存到一个叫做 RestorationBucket 的对象中。
当应用重新启动或者从后台返回到前台时，Flutter 会尝试恢复之前保存的状态。这个过程被称为状态恢复（State Restoration）。在状态恢复过程中，Flutter 会再次遍历所有具有 restorationId 属性的组件，并尝试从 RestorationBucket 中找到与它们 restorationId 匹配的状态。如果找到了匹配的状态，Flutter 就会将状态恢复到相应的组件中。
举个例子，假设我们有一个表单页面，用户可以在表单中输入姓名和邮箱地址。我们希望当用户离开表单页面并返回时，之前输入的姓名和邮箱地址能够自动恢复。
为了实现这个功能，我们可以为表单中的姓名和邮箱地址输入框分别设置 restorationId 属性，例如：
TextField(
restorationId: 'name_field',
// ... other properties
),
TextField(
restorationId: 'email_field',
// ... other properties
),
当用户离开表单页面并返回时，Flutter 会自动恢复这两个输入框的状态，并将之前输入的姓名和邮箱地址显示在输入框中。
需要注意的是，restorationId 并不是万能的，它只能恢复组件的简单状态，例如文本输入框中的文本、复选框的选中状态等。对于一些复杂的状态，例如网络请求的结果、数据库中的数据等，restorationId 无法直接恢复。
此外，为了使 restorationId 生效，我们需要在应用的根组件上使用 RestorationScope 组件。RestorationScope 组件会创建一个 RestorationBucket 对象，用于存储应用的状态。
void main() {
runApp(
RestorationScope(
restorationId: 'root',
child: MyApp(),
),
);
}
总结一下，restorationId 是 Flutter 中一个非常实用的属性，它可以帮助我们轻松地实现组件的状态恢复功能，提升用户体验。
常见问题及解答
1. restorationId 可以设置为任意字符串吗？
是的，restorationId 可以设置为任意字符串，但建议使用有意义的字符串，例如组件的名称或功能，以便于理解和维护。
2. 如果多个组件使用了相同的 restorationId 会发生什么？
如果多个组件使用了相同的 restorationId，Flutter 会将它们视为同一个组件，并只恢复其中一个组件的状态。因此，建议为每个需要恢复状态的组件设置唯一的 restorationId。
3. restorationId 可以用于恢复哪些类型的状态？
restorationId 可以用于恢复组件的简单状态，例如文本输入框中的文本、复选框的选中状态、滑块的值等。对于一些复杂的状态，例如网络请求的结果、数据库中的数据等，restorationId 无法直接恢复。
4. 如何禁用组件的状态恢复功能？
如果不想恢复某个组件的状态，可以将其 restorationId 属性设置为 null。
5. restorationId 和 key 属性有什么区别？
restorationId 用于标识组件在状态恢复过程中的唯一性，而 key 属性用于标识组件在 Widget 树中的唯一性。它们的作用不同，但都可以用于帮助 Flutter 识别和管理组件。
