-1

您好，我想将 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),
            ],
          ),
        ),
      ),
    );
  }
}
4

2 回答 2

0

试试这个：

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

void _startAnimation() {
    try {
        _controller.forward().orCancel;
    } on TickerCanceled { }
}
于 2021-01-14T05:08:08.653 回答
0

您忘记在其回调（第三个参数）中使用AnimatedBuilders 子项。builder仅显示 builder 返回的小部件，child 用于指定一些不依赖于动画的小部件，您仍然必须将其包含在您在构建器中制作的任何内容中。那是：

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

看起来您也想用_animation.value_controller.value 代替 Container。

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

顺便说一句，还有 AnimatedContainer，它有点受限但也更简单。

于 2021-01-14T05:58:13.487 回答