我正在开发一个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,
),
),
]))),
));
}}
任何人都可以帮我找出为什么页面不断重建自己?
解决方法:
我通过简单地更改类来解决问题:
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,
),
),
]))),
));
}
}
}
希望有一天这可能会帮助别人.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。