我试图从类外部调用应用程序中类的animate()函数,但我无法使其正常运行。调用时,该类始终为null。
课程:
// ignore: camel_case_types
class styleMenu extends StatefulWidget {
final Function() onPressed;
final String tooltip;
final IconData icon;
final _callback;
styleMenu({this.onPressed, this.tooltip, this.icon, @required void singlePlayerCallbacks(String callBackType) } ):
_callback = singlePlayerCallbacks;
@override
styleMenuState createState() => styleMenuState();
}
// ignore: camel_case_types
class styleMenuState extends State<styleMenu>
with SingleTickerProviderStateMixin {
bool isOpened = false;
AnimationController _animationController;
Animation<Color> _buttonColor;
Animation<double> _animateIcon;
Animation<double> _translateButton;
Curve _curve = Curves.easeOut;
double _fabHeight = 52.0;
@override
initState() {
_animationController =
AnimationController(vsync: this, duration: Duration(milliseconds: 600))
..addListener(() {
setState(() {});
});
_animateIcon =
Tween<double>(begin: 0.0, end: 1.0).animate(_animationController);
_buttonColor = ColorTween(
begin: Colors.blue,
end: Colors.red,
).animate(CurvedAnimation(
parent: _animationController,
curve: Interval(
0.0,
1.0,
curve: Curves.linear,
),
));
_translateButton = Tween<double>(
begin: 0.0,
end: _fabHeight + 3,
).animate(CurvedAnimation(
parent: _animationController,
curve: Interval(
0.0,
1.0,
curve: _curve,
),
));
super.initState();
}
@override
dispose() {
_animationController.dispose();
super.dispose();
}
animate() {
if (!isOpened) {
_animationController.forward();
} else {
_animationController.reverse();
}
isOpened = !isOpened;
}
Widget blackTheme() {
if (isOpened == true) {
return Container(
width: 50,
height: 50,
child: RawMaterialButton(
shape: CircleBorder(),
fillColor: Colors.black,
elevation: 5.0,
onPressed: animate,
/*child: AnimatedIcon(
icon: AnimatedIcons.menu_close,
progress: _animateIcon,
),*/
),
);
} else {
return blankTheme();
}
}
Widget blueTheme() {
if (isOpened == true) {
return Container(
width: 50,
height: 50,
child: RawMaterialButton(
shape: CircleBorder(),
fillColor: Colors.blue,
elevation: 5.0,
onPressed: (){},
child: SizedBox(
height: 36,
width: 36,
//child: Image.asset('lib/images/dice_button.png'),
),
),
);
} else {
return blankTheme();
}
}
Widget greenTheme() {
if (isOpened == true) {
return Container(
width: 50,
height: 50,
child: RawMaterialButton(
shape: CircleBorder(),
fillColor: Colors.green,
elevation: 5.0,
onPressed: (){},
child: SizedBox(
height: 28,
width: 28,
//child: Image.asset('lib/images/coin_button.png'),
),
),
);
} else {
return blankTheme();
}
}
Widget redTheme() {
if (isOpened == true) {
return Container(
width: 50,
height: 50,
child: RawMaterialButton(
shape: CircleBorder(),
fillColor: Colors.red,
elevation: 5.0,
onPressed: (){},
child: SizedBox(
height: 40,
width: 40,
//child: Image.asset('lib/images/background_colour.png'),
),
),
);
} else {
return blankTheme();
}
}
Widget whiteTheme() {
if (isOpened == true) {
return Container(
width: 50,
height: 50,
child: RawMaterialButton(
shape: CircleBorder(),
fillColor: Colors.white,
elevation: 5.0,
onPressed: () {},
child: SizedBox(
height: 32,
width: 32,
//child: Image.asset('lib/images/home_button.png'),
),
),
);
} else {
return blankTheme();
}
}
Widget customTheme() {
if (isOpened == true) {
return Container(
width: 50,
height: 50,
child: RawMaterialButton(
shape: CircleBorder(),
fillColor: Colors.white,
elevation: 5.0,
onPressed: () {},
child: SizedBox(
height: 32,
width: 32,
//child: Image.asset('lib/images/home_button.png'),
),
),
);
} else {
return blankTheme();
}
}
Widget blankTheme() {
return Container(
child: Opacity(
opacity: 0.0,
child: FloatingActionButton(
heroTag: null,
onPressed: () {},
),
),
);
}
@override
Widget build(BuildContext context) {
return Stack(
children: <Widget> [
Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Stack(
children: <Widget>[
Transform(
transform: Matrix4.translationValues(
0,
_translateButton.value,
0,
),
child: blueTheme(),
),
Transform(
transform: Matrix4.translationValues(
0,
_translateButton.value * 2,
0,
),
child: greenTheme(),
),
Transform(
transform: Matrix4.translationValues(
0,
_translateButton.value * 3,
0,
),
child: redTheme(),
),
Transform(
transform: Matrix4.translationValues(
0,
_translateButton.value * 4,
0,
),
child: whiteTheme(),
),
Transform(
transform: Matrix4.translationValues(
0,
_translateButton.value * 5,
0,
),
child: customTheme(),
),
blackTheme(),
],
),
],
),
Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Container(
width: 50,
height: 50,
child: Opacity(
opacity: 0.0,
child: FloatingActionButton(
heroTag: null,
onPressed: animate,
),
),
),
SizedBox(
height: 5.0,
),
Container(
width: 50,
height: 50,
child: Opacity(
opacity: 0.0,
child: FloatingActionButton(
heroTag: null,
onPressed: isOpened == true? (){
widget?._callback('blue');
} : () {},
),
),
),
SizedBox(
height: 5.0,
),
Container(
width: 50,
height: 50,
child: Opacity(
opacity: 0.0,
child: FloatingActionButton(
heroTag: null,
onPressed: isOpened == true? (){
widget?._callback('green');
} : () {},
),
),
),
SizedBox(
height: 5.0,
),
Container(
width: 50,
height: 50,
child: Opacity(
opacity: 0.0,
child: FloatingActionButton(
heroTag: null,
onPressed: isOpened == true? (){
widget?._callback('red');
} : () {},
),
),
),
SizedBox(
height: 5.0,
),
Container(
width: 50,
height: 50,
child: Opacity(
opacity: 0.0,
child: FloatingActionButton(
heroTag: null,
onPressed: isOpened == true? (){
widget?._callback('white');
} : () {},
),
),
),
SizedBox(
height: 5.0,
),
Container(
width: 50,
height: 50,
child: Opacity(
opacity: 0.0,
child: FloatingActionButton(
heroTag: null,
onPressed: isOpened == true? (){
widget?._callback('custom');
} : () {},
),
),
),
],
),
],
);
}
}
理想情况下,我希望能够从任何地方调用此类的animate()方法,因此我可以随意对菜单进行动画处理。但是,Flutter不会让我简单地调用此方法,就像我尝试简单的操作时一样:
styleMenuState().animate();
它告诉我该类为null,因此基本上没有动画。
我在这个问题上花了几个星期。有人在说Streambuilders和Listenable构建器,但是我找不到任何如何在线上实际使用它们的示例。
有人可以帮忙吗?我到处都在问,我根本找不到任何帮助。