android – Flutter应用程序页面不断重建

发布时间：2020-12-14 14:50:48 所属栏目：百科来源：网络整理

导读：我正在开发一个Flutter应用程序,它会提示表单询问一些个人信息. 问题是每次发生某些事情时都会重建页面,例如屏幕方向改变或文本字段获得焦点时(键盘会立即显示并消失,从而阻止用户输入任何内容). 显然有些事情正在触发不必要的重建,但我无法找到什么和哪里.

我正在开发一个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"),));
    }
  }
}

希望有一天这可能会帮助别人.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!