forms - 为什么 Flutter 会重新渲染包含带有自己 key 的 TextFormField 的小部件？

Question

Doctor summary (to see all details, run flutter doctor -v):
[v] Flutter (Channel dev, v1.2.0, on Microsoft Windows [Version 10.0.17763.253], locale ru-RU)
[v] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[v] Android Studio (version 3.3)
[v] VS Code, 64-bit edition (version 1.30.2)
[v] Connected device (1 available)

• No issues found!

我正在家里学习 flutter 以创建我的应用程序，并且面对 flutter 的不可理解性；当我在导航器的任何路径的任何小部件中创建一个带有字段的表单时，我看到在点击表单域和关闭键盘时重建了这条路径。如果我删除 GlobalKey<FormState>并删除 GlobalKey<FormFieldState> - 小部件在点击和隐藏键盘时仍然重建，在这种情况下它不会感到不适，但如果我想赋予表单和这个字段 globalKeys - 在与字段的任何交互中我看到表单一次又一次地破坏和构建。

import 'package:flutter/material.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:quich/controllers/user_controller.dart';
import 'package:quich/route/routes.dart';
import 'package:quich/screens/login_screen.dart';
import 'package:quich/screens/splash_screen.dart';
import 'package:quich/store/app_store.dart';

void main() async {
  runApp(Quich());
  await $store.storage.ready;
  var uc = UserController();
  var isValid = await uc.isTokenValid(token: 'token');
  $store.isAuth = isValid;
  $store.isLoading = false;
}

class Quich extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _QuichState();
}

class _QuichState extends State<Quich> {
  final controller = TextEditingController();
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Регистрация',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: Routes.splash,
      routes: <String, WidgetBuilder>{
        Routes.splash: (context) => Observer(builder: (_) {
          return SplashScreen();
        }),
        Routes.login: (context) {
          print('SUPER PARENT BUILD');
          return LoginScreen();
          final formKey = GlobalKey<FormState>();
          final fieldKey = GlobalKey<FormFieldState>();
          return Scaffold(
            body: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Form(
                  child: Padding(
                    padding: const EdgeInsets.all(15.0),
                    child: TextFormField(
                      controller: controller,
                      key: fieldKey
                    ),
                  ),
                  key: formKey,
                ),
                ButtonBar(
                  children: <Widget>[
                    MaterialButton(
                      child: Text('Проверка', style: TextStyle(color: Colors.white)),
                      onPressed: () => Navigator.of(context).pushNamed(Routes.splash),
                      color: Colors.lightBlue,
                    )
                  ],
                )
              ],
            ),
          );
        }
      },
    );
  }
}

任何人都可以帮助我在导航器内部创建一个带有全局键的字段的表单 - 我搜索了带有表单和导航的示例，但是我没有找到导航器中带有全局键的表单。

UPD:似乎 StackOverflow 代码编辑器“吃掉”了某些代码部分的类型定义。我附上一张带有代码的图片，请看视频示例:

Video 1

Video 2

Image with code

Ru-copy of this topic

附言问题解决了，这个解决方案，如果你感兴趣的话 - 可以在这个问题的俄语副本的“P.P.S” block 看到: Russian Copy

Answer 1

在 flutter 中，key 属性用于将小部件的现有实例与新实例进行比较，并决定下一步做什么:创建新状态或使用现有状态，构建新子树或重用现有状态。如果没有给出键，flutter 将使用小部件在你的小部件树中的位置作为键。如果树结构没有太大变化，那么如果只有很小的变化，状态或子树很有可能会被重用。

GlobalKey() 的想法是您创建它的一个实例并将其保存在您的应用程序树层次结构中非常高的某个位置。

在 GlobalKey() 的帮助下，可以重复使用小部件的状态和子树，只要:

• 您保留 GlobalKey() 的相同实例
• 您的小部件并未从树中完全删除。如果小部件被删除，它的状态和子树将消失，下次它进入您的应用程序的树状态时，子树将被重新创建。

在您的代码示例中，您没有将 GlobalKey() 分配给可重用变量。在您的情况下， Globalkey() 的新实例是在您的构建函数中创建的。这会导致在每次更新时创建新的唯一 key 。新的唯一键意味着小部件未链接到小部件的先前实例，因此没有状态和子树被继承。