簡體   English   中英

英雄動畫無法正常工作?

[英]Hero animation not working properly?

我是 Flutter 的新手。 今天我創建了啟動畫面和登錄畫面。 然后我想從初始屏幕 - > 登錄屏幕為我的徽標設置動畫。 但是當我運行代碼時,這里不起作用的動畫是我的代碼:

啟動畫面

class SplashScreen extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      home: new SplashScreenPage(),
      routes: <String, WidgetBuilder>{
      '/LoginPage': (BuildContext context) => new LoginPage()
      },
    );
  }
}

class SplashScreenPage extends StatefulWidget{
  SplashScreenPage({Key key, this.title}) : super(key: key);

  final String title;
  @override
  State<StatefulWidget> createState() {
    return new SplashScreenState();
  }
}


class SplashScreenState extends State<SplashScreenPage>{
  startTime() async {
    var _duration = new Duration(seconds: 2);
    return new Timer(_duration, navigationPage);
  }

  void navigationPage() {
    Navigator.of(context).pushNamed('/LoginPage');
  }

  @override
  void initState() {
    startTime();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            new SizedBox(
              child: new Hero(
                  tag: 'hero-tag-llama',
                  child: new Image.asset(
                    'images/logo_futurisx.png',
                    fit: BoxFit.cover,
                    height: 150.0,
                  )
              ),
            )
          ],
        )
      ),
    );
  }

登錄畫面

class LoginState extends State<LoginPage>{
  final userNameController = new TextEditingController();
  final passwordController = new TextEditingController();

  @override
  Widget build(BuildContext context) {
    var _imageBox = new SizedBox(
      child: new Hero(
          tag: 'hero-tag-llama',
          child: new Image.asset(
            'images/logo_futurisx.png',
            fit: BoxFit.cover,
            height: 100.0,
          )
      ),
    );

    var _loginForm = new Container(
        padding: new EdgeInsets.all(32.0),
        child: new Column(
          children: <Widget>[
            new TextField(
              maxLines: 1,
              controller: userNameController,
              decoration: new InputDecoration(
                  border: new UnderlineInputBorder(),
                  fillColor: Colors.green,
                  hintText: "Username"
              ),
            ),
            new Container(
              padding: new EdgeInsets.only(bottom: 20.0),
            ),
            new TextField(
              maxLines: 1,
              controller: passwordController,
              decoration: new InputDecoration(
                  border: new UnderlineInputBorder(),
                  fillColor: Colors.green,
                  hintText: "Password"
              ),
            ),
            new Container(
              padding: new EdgeInsets.only(bottom: 30.0),
            ),
            new RaisedButton(
                padding: new EdgeInsets.fromLTRB(30.0, 10.0, 30.0, 10.0),
                child: new Text("Login", style: new TextStyle(color: Colors.white)),
                elevation: 4.0,
                color: Colors.teal,
                onPressed: (){
                  login(userNameController.text, passwordController.text);
                }
            ),
        ])
    );


    return new Scaffold(
        key: _scaffoldKey,
        body: new Center(
            child: new Column(
              mainAxisAlignment: MainAxisAlignment.center,
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                _imageBox,
                _loginForm
              ],
            )
        )
    );
  }

我在這里上傳的視頻:

https://vimeo.com/271938052

當我在登錄屏幕中評論 _loginForm 布局時,

children: <Widget>[
                _imageBox,
                //_loginForm
              ],

動畫工作正常。 誰能幫我知道為什么動畫沒有按預期運行?

更新 - - - - - -

經過大量搜索和修復,我發現 Timer 可能是阻塞線程(或類似的東西,..)刪除了計時器讓按鈕單擊動作來更改頁面,動畫正常工作。

有人遇到過這個問題嗎?

這里發生的事情是計時器甚至在開始英雄動畫之前就完成了。 此處的解決方法是增加在計時器上設置的持續時間。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM