我是个新手。这并不难,但是我在代码的这一点上迷失了。当导航到小部件后,我有initState触发动画。作为解决方法,我在initState的末尾有另一个动画来确保动画正在运行。如果没有这种解决方法,则不会触发任何动画,但是当重新加载类/页面时,动画确实可以工作。我已经包含了了解问题所需的所有小部件。
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'dart:async';
import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:challengeme/code/globals.dart';
import 'package:challengeme/code/widgets.dart';
import 'package:challengeme/code/navigator.dart';
import 'package:challengeme/code/AnimationSheet.dart';
import 'package:challengeme/screens/home.dart';
class completeProfile extends StatefulWidget {
@override
completeProfileState createState() => new completeProfileState();
}
class completeProfileState extends State<completeProfile>
with TickerProviderStateMixin {
AnimationSheet _animationName, _animationLastname;
Animation _animation;
Animation<double> _ResizeAnimation, _opacity;
AnimationController _controller, _resizeBtn, _anim_controller;
@override
void initState() {
super.initState();
_controller = new AnimationController(duration: const Duration(milliseconds: 3000),vsync: this,);
// use animations by importing them from the AnimationSheet
_animationName = AnimationSheet(_controller, 0.00, 0.500);
// this function is here to fire the control forward function, other wise the animations wont run
_opacity = new CurvedAnimation(parent: _controller, curve: Curves.easeInOut)
..addListener((){
setState((){
});
});
_controller.forward().orCancel;
}
@override
void dispose() {
super.dispose();
_controller.dispose();
}
@override
Widget build(BuildContext context) {
// this disables the android system back button
return new WillPopScope(
onWillPop: () async => false,
child: new Scaffold(
appBar: AppBar(
title: Text('$pageTitle'),
automaticallyImplyLeading: false,
centerTitle: true,
backgroundColor: const Color(0xFF0e1f2f),
),
body: new Stack(
fit: StackFit.expand,
children: <Widget>[
new Image(
image: new AssetImage("assets/background_0.jpg"),
fit: BoxFit.cover,
// colorBlendMode: BlendMode.darken,
// color: Colors.black12,
),
new SingleChildScrollView(
child: new Theme(
data: new ThemeData(
brightness: Brightness.dark,
inputDecorationTheme: new InputDecorationTheme(
// hintStyle: new TextStyle(color: Colors.blue, fontSize: 20.0),
fillColor: const Color(0x26ffffff),
filled: true,
contentPadding: const EdgeInsets.only(bottom: 20.0),
labelStyle: new TextStyle(color: Colors.white, fontSize: 16.0, fontWeight: FontWeight.w700),
)
),
isMaterialAppTheme: true,
child: new Container(
padding: const EdgeInsets.only(left: 20.0, right: 20.0, top: 60.0),
child: new Column(
children: <Widget>[
new Opacity(
opacity: animationSheet.easeInAnimation.value ,
child: new Container(
margin: EdgeInsets.only(bottom:10.0),
child: new TextFormField(
controller: getFirstName,
decoration: new InputDecoration(
labelText: '$name',
),
keyboardType: TextInputType.emailAddress,
),
),
),
此堆栈未关闭,因为它仅用作代码示例。
这是动画类:
import 'package:flutter/material.dart';
class AnimationSheet {
AnimationSheet(this.controller, this.begin, this.end)
: easeInAnimation = new Tween(begin: 0.0, end: 1.0).animate(
new CurvedAnimation(
parent: controller,
curve: new Interval(
begin,
end,
curve: Curves.easeInOut,
),
),
);
final AnimationController controller;
final double begin, end;
final Animation<double> easeInAnimation, easeInAnimation2;
}
我认为这个问题的重点是:
@override
void initState() {
super.initState();
_controller = new AnimationController(duration: const Duration(milliseconds: 3000),vsync: this,);
// use animations by importing them from the AnimationSheet
_animationName = AnimationSheet(_controller, 0.00, 0.500);
// this function is here to fire the control forward function, other wise the animations wont run
_opacity = new CurvedAnimation(parent: _controller, curve: Curves.easeInOut)
..addListener((){
setState((){
});
});
_controller.forward().orCancel;
我不知道什么时候做错了,也许有人可以告诉我。谢谢。