使用 animationController 的空白屏幕

Question

你好，我想将 animationController 和 animatedBuilder 添加到我的项目中，我只是想让它更改包含背景的容器的宽度，但是当我点击运行时，我没有收到任何错误，只是收到白色空白屏幕出现在我的欢迎页面上，请帮助我，我该如何解决这个问题，感谢您的回答，祝您生活愉快。

import 'package:flutter/material.dart';
import 'package:animated_text_kit/animated_text_kit.dart';
import 'package:naber/screens/login_screen.dart';
import 'package:naber/screens/registration_screen.dart';
import '../widgets.dart';
import 'package:naber/constants.dart';
import 'login_screen.dart';


class WelcomeScreen extends StatefulWidget {
  static String id="welcome_screen";
  @override
  _WelcomeScreenState createState() => _WelcomeScreenState();
}

class _WelcomeScreenState extends State<WelcomeScreen> with TickerProviderStateMixin {
  AnimationController _controller;
  Animation _animation;

  @override
  void initState() {
    super.initState();
    _controller=AnimationController(duration:Duration(seconds: 4),vsync: this);
    _animation=Tween<double>(begin: 1080, end:1480).animate(_controller);
    _controller.addListener(() {
      setState(() {
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body:AnimatedBuilder(
        animation: _animation,
        builder:(BuildContext context,_){
          return Container(
            width: _controller.value,
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage(kWelcomeScreenBackgroundImage),
                fit: BoxFit.cover,
              ),
            ),
          );
        },
        child: Padding(
          padding: EdgeInsets.all(20.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.start,
                textBaseline: TextBaseline.alphabetic,
                crossAxisAlignment: CrossAxisAlignment.end,
                children: [
                  Hero(
                    tag: "logo",
                    child: Container(
                      child: Image.asset(kLogoImage),
                      height: 140,
                    ),
                  ),
                  TypewriterAnimatedTextKit(
                    speed: Duration(milliseconds:200),
                    text:[kWelcomePageText],
                    textStyle: kWelcomePageTextStyle,
                  ),
                ],
              ),
              SizedBox(
                height: 70,
              ),
              WelcomeScreenButtons(text:kLoginText,color1:kLoginButtonColor1,
                  color2:kLoginButtonColor2,
                  color3:kLoginButtonColor3,route: LoginScreen.id),
              SizedBox(height: 15),
              WelcomeScreenButtons(text:kRegistrationText,color1:kRegisterButtonColor1,
                  color2:kRegisterButtonColor2,
                  color3:kRegisterButtonColor3,route: RegistrationScreen.id),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 1

试试这个：

initState() {
    ....... // Your code
    _startAnimation();
}

void _startAnimation() {
    try {
        _controller.forward().orCancel;
    } on TickerCanceled { }
}

Answer 2

您忘记在其 builder 回调（第三个参数）中使用 AnimatedBuilders child。只显示builder返回的widget，child用于指定一些不依赖于动画的widgets，你仍然必须将它包含在你在builder中制作的任何东西中。即：

AnimatedBuilder(
  animation: animation,
  builder: (context, animation, child) => Container(
    width: animation.value,
    child: child,
  ),
  child: TheWidgetThatWillGoIntoTheContainer(),

您似乎还想对容器使用 _animation.value 而不是 _controller.value。

就像其他答案所说的那样，您必须使用 _controller.forward(); 开始动画；可能在初始状态。而且您不想在侦听器中执行 setState，因为这将重建整个有状态的小部件，而不仅仅是 AnimatedBuilder 的构建器。

顺便说一句，还有AnimatedContainer，它的功能比较有限，但也比较简单。

使用 animationController 的空白屏幕

Blank white screen with using animationController

animation

flutter

flutter-animation

animationcontroller