我正在开发一个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,
),
),
]))),
));
}}
有人能帮忙找出这个页面为什么一直在不停地重建吗?
TextFormField
被放置在可滚动区域内引起的。我认为这是已知的问题。我不知道有什么解决方法。在GitHub上搜索Flutter问题以查找类似的问题。 - Günter Zöchbauer