当在 Flutter 中推送新页面时，导航器堆栈上的页面会重建

Question

我正在开发一个 Flutter 应用程序，它会提示一个表单，要求提供一些个人信息。

问题在于，每次发生某些事情时，例如当屏幕方向更改或文本字段获得焦点时(键盘立即出现和消失，阻止用户键入任何内容(时，都会重建页面。

显然，有些东西正在触发不必要的重建，但我无法找到什么和在哪里。

当我将此页面插入主页时，一切正常。 在初始屏幕上显示动画后，当我将页面插入其预期位置时，就会出现问题，所以我想这与我的问题有关。

主类 ：

import 'package:flutter/material.dart';
import './view/SplashScreen.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new SplashScreen(),
);
}
}

初始屏幕 ：

import 'package:flutter/material.dart';
import 'dart:async';
import './UserLoader.dart';
class SplashScreen extends StatefulWidget {
@override
_SplashScreenState createState() => new _SplashScreenState();
}
class _SplashScreenState extends State<SplashScreen>
with SingleTickerProviderStateMixin {
AnimationController _iconAnimationController;
CurvedAnimation _iconAnimation;
@override
void initState() {
super.initState();
_iconAnimationController = new AnimationController(
vsync: this, duration: new Duration(milliseconds: 2000));
_iconAnimation = new CurvedAnimation(
parent: _iconAnimationController, curve: Curves.easeIn);
_iconAnimation.addListener(() => this.setState(() {}));
_iconAnimationController.forward();
startTimeout();
}
@override
Widget build(BuildContext context) {
return new Material(
color: Colors.white,
child: new InkWell(
child: new Center(
child: new Container(
width: 275.0,
height: 275.0,
decoration: new BoxDecoration(
image: new DecorationImage(
colorFilter: new ColorFilter.mode(
Colors.white.withOpacity(_iconAnimation.value),
BlendMode.dstATop),
image: new AssetImage("images/logo.png")),
),
),
),
),
);
}
void handleTimeout() {
Navigator.of(context).pushReplacement(new MaterialPageRoute(
builder: (BuildContext context) => new UserLoader()));
}
startTimeout() async {
var duration = const Duration(seconds: 3);
return new Timer(duration, handleTimeout);
}
}

错误页面 ：

import 'package:flutter/material.dart';
class UserLoader extends StatefulWidget {
@override
_UserLoaderState createState() => new _UserLoaderState();
}
class _UserLoaderState extends State<UserLoader> {
@override
Widget build(BuildContext context) {
final _formKey = new GlobalKey<FormState>();
final _emailController = new TextEditingController();
return new Scaffold(
appBar: new AppBar(
title: new Text("Informations"),
actions: <Widget>[
new IconButton(
icon: const Icon(Icons.save),
onPressed: () {
// unrelated stuff happens here
})
],
),
body: new Center(
child: new SingleChildScrollView(
child: new Form(
key: _formKey,
child: new Column(children: <Widget>[
new ListTile(
leading: const Icon(Icons.email),
title: new TextFormField(
decoration: new InputDecoration(
hintText: "Email",
),
keyboardType: TextInputType.emailAddress,
controller: _emailController,
validator: _validateEmail,
),
),
]))),
));
}}

任何人都可以帮助我找出为什么页面不断重建自己？

Answer 1

我通过简单地像这样更改类来解决问题：

import 'package:flutter/material.dart';
class UserLoader extends StatefulWidget {
@override
_UserLoaderState createState() => new _UserLoaderState();
}
class _UserLoaderState extends State<UserLoader> {
Widget _form; // Save the form
@override
Widget build(BuildContext context) {
if (_form == null) { // Create the form if it does not exist
_form = _createForm(context); // Build the form
}
return _form; // Show the form in the application
}
Widget _createForm(BuildContext context) {
// This is the exact content of the build method in the question
final _formKey = new GlobalKey<FormState>();
final _emailController = new TextEditingController();
return new Scaffold(
appBar: new AppBar(
title: new Text("Informations"),
actions: <Widget>[
new IconButton(
icon: const Icon(Icons.save),
onPressed: () {
// unrelated stuff happens here
})
],
),
body: new Center(
child: new SingleChildScrollView(
child: new Form(
key: _formKey,
child: new Column(children: <Widget>[
new ListTile(
leading: const Icon(Icons.email),
title: new TextFormField(
decoration: new InputDecoration(
hintText: "Email",
),
keyboardType: TextInputType.emailAddress,
controller: _emailController,
validator: _validateEmail,
),
),
]))),
));
}
}
}

希望有一天这可能会帮助其他人。

Answer 2

您需要做的就是移动此行

final _formKey = new GlobalKey<FormState>();

从build方法到状态类声明(即从build外部(。创建类时必须创建一次密钥。在这种情况下，将重新创建每个生成操作的密钥。