flutter中在一屏添加timeDilation会减慢其他页面的加载速度？

Question

我在flutter中学习了hero动画教程。当我尝试再添加一个屏幕时，我注意到时间延迟属性也在影响其他屏幕的加载时间。我曾尝试将变量重置为零，但它没有按预期工作。

class PhotoHero extends StatelessWidget {
 const PhotoHero({Key key, this.photo, this.onTap, this.width})
  : super(key: key);

 final String photo;
  final VoidCallback onTap;
  final double width;

Widget build(BuildContext context) {
return SizedBox(
  width: width,
  child: Hero(
    tag: photo,
    child: Material(
      color: Colors.transparent,
      child: InkWell(
        onTap: onTap,
        child: Image.asset(
          photo,
          fit: BoxFit.contain,
        ),
      ),
    ),
  ),
);  }}

class HeroAnimation extends StatelessWidget {
Widget build(BuildContext context) {
timeDilation = 10.0; // 1.0 means normal animation speed.

return Scaffold(
  appBar: AppBar(
    title: const Text('Basic Hero Animation'),
  ),
  body: Center(
    child: PhotoHero(
      photo: 'images/flippers-alpha.png',
      width: 300.0,
      onTap: () {
        Navigator.of(context).push(
            MaterialPageRoute<void>(builder: (context) => SecondScreen()));
      },
    ),
  ),
); }}

void main() {
runApp(MaterialApp(
routes: {
  '/': (context) => HeroAnimation(),
  '/second': (context) => SecondScreen(),
  '/third': (context) => ThirdScreen(),
},  ));}

class ThirdScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    title: Title(color: Colors.red, child: Text('Dummy Title')),
  ),
); }}

class SecondScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    title: const Text('Flippers Page'),
  ),
  body: Container(
    // Set background to blue to emphasize that it's a new route.
    color: Colors.lightBlueAccent,
    padding: const EdgeInsets.all(16.0),
    alignment: Alignment.topLeft,
    child: PhotoHero(
      photo: 'images/flippers-alpha.png',
      width: 100.0,
      onTap: () {
        Navigator.of(context).pushNamed('/third');
      },
    ),
  ),
);  }}

Answer 1

这是预期的，因为 timeDilation 是全局的属性之类的，所以每次需要更改动画速度时都需要设置它 onTap 将是这样做的完美地方，

检查下面修改后的代码

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';

class PhotoHero extends StatelessWidget {
  const PhotoHero({Key key, this.photo, this.onTap, this.width})
      : super(key: key);

  final String photo;
  final VoidCallback onTap;
  final double width;

  Widget build(BuildContext context) {
    return SizedBox(
      width: width,
      child: Hero(
        tag: photo,
        child: Material(
          color: Colors.transparent,
          child: InkWell(
            onTap: onTap,
            child: Image.asset(
              photo,
              fit: BoxFit.contain,
            ),
          ),
        ),
      ),
    );  }}

class HeroAnimation extends StatelessWidget {
  Widget build(BuildContext context) {
    //timeDilation = 10.0; // 1.0 means normal animation speed.

    return Scaffold(
      appBar: AppBar(
        title: const Text('Basic Hero Animation'),
      ),
      body: Center(
        child: PhotoHero(
          photo: '/images/flippers-alpha.png',
          width: 300.0,
          onTap: () {
            timeDilation = 10.0;

            Navigator.of(context).push(
                MaterialPageRoute<void>(builder: (context) => SecondScreen()));
          },
        ),
      ),
    ); }}

void main() {
  runApp(MaterialApp(
    routes: {
      '/': (context) => HeroAnimation(),
      '/second': (context) => SecondScreen(),
      '/third': (context) => ThirdScreen(),
    },  ));}

class ThirdScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    timeDilation = 1.0;
    return Scaffold(
      appBar: AppBar(
        title: Title(color: Colors.red, child: Text('Dummy Title')),
      ),
    ); }}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //timeDilation = 1.0;
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flippers Page'),
      ),
      body: Container(
        // Set background to blue to emphasize that it's a new route.
        color: Colors.lightBlueAccent,
        padding: const EdgeInsets.all(16.0),
        alignment: Alignment.topLeft,
        child: PhotoHero(
          photo: '/images/flippers-alpha.png',
          width: 100.0,
          onTap: () {
            Navigator.of(context).pushNamed('/third');
          },
        ),
      ),
    );  }}

Answer 2

如果加上timeDilation会影响其他画面的动画时间。因为它是全球性的属性。为了回到正常的动画速度，您必须将该变量值更改为 1.0，这是正常的动画速度。

class FirstScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
 timeDilation = 8.0; // Since we need the animation to slow down.
}

class SecondScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
 timeDilation = 1.0; // Changing the value to normal animation speed.
}

As a note, if you are coming back using back button the build method won't get called so the timeDilation value won't change to the value of the screen which you're in. In this case you've to make your screen as StatefulWidget then you can set the value on the life cycle methods.

flutter中在一屏添加timeDilation会减慢其他页面的加载速度？

Adding timeDilation in one screen slows down the loading of other pages in flutter?

dart

flutter

navigator

flutter-animation