我正在开发一个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,
),
),
]))),
));
}}
有人可以帮我找出为什么页面会不断重建吗?
答案 0 :(得分:6)
我通过简单地更改类来解决问题:
<controls:DetailView DataContext="{Binding ElementName=treeView, Path=SelectedItem.Datacontext}"/>
希望有一天这可能会帮助别人。
答案 1 :(得分:3)
您需要做的就是移动这一行
final _formKey = new GlobalKey<FormState>();
从build
方法到状态类声明(即build
之外)。创建课程时,键必须创建一次。您的情况是,每次构建操作都会重新创建密钥。