如何在 flutter 中重置补间颜色
how can I reset a color tween in flutter
所以我正在尝试制作一个颜色补间动画，当按下按钮时，如果文本字段中的答案正确，背景颜色将为绿色然后变回黑色，如果不正确则相同事情会发生但是红色而不是绿色但是我遇到了问题。
当我输入一个答案时，补间颜色有效，但当我再次输入时，没有任何反应。
这是完整的代码
import 'dart:async';
import 'dart:io';
import 'dart:math';
import 'math_utils.dart';
import 'package:flutter/material.dart';
class GameScreen extends StatefulWidget {
@override
State<GameScreen> createState() => _GameScreenState();
}
class _GameScreenState extends State<GameScreen> with TickerProviderStateMixin {
int n1 = Random().nextInt(13) + 0;
int n2 = Random().nextInt(13) + 0;
int lives = 3;
int score = 0;
FocusNode node = FocusNode();
double sec = 60.00;
dynamic isCorrect = null;
TextEditingController controller = TextEditingController();
late AnimationController ctrl;
late Animation<Color?> clr;
@override
void initState(){
Timer.periodic(const Duration(milliseconds: 1), (timer) {
setState(() {
sec=sec-0.01;
});
});
super.initState();
ctrl = AnimationController(
duration: Duration(seconds: 1), vsync: this,
);
clr = ColorTween(begin: Colors.black).animate(ctrl);
}
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
backgroundColor: Colors.black,
body: Container(
width: size.width,
child: SingleChildScrollView(
child: Container(
height: size.height,
width: size.width,
decoration: BoxDecoration(
color: clr.value,
),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Align(
alignment: Alignment.centerLeft,
child: Padding(
padding: EdgeInsets.only(
top: getVerticalSize(
16.00,
),
bottom: getVerticalSize(
20.00,
),
),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Align(
alignment: Alignment.centerLeft,
child: Container(
width: size.width,
child: Padding(
padding: EdgeInsets.only(
left: getHorizontalSize(
16.00,
),
right: getHorizontalSize(
16.00,
),
),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: [
Padding(
padding: EdgeInsets.only(
top: getVerticalSize(
3.00,
),
),
child: Row(
crossAxisAlignment:
CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
lives >= 1? Image.asset(
"assets/heart.webp",
height: getSize(
32.00,
),
width: getSize(
32.00,
),
fit: BoxFit.fill,
): SizedBox(
height: getSize(
32.00,
),
width: getSize(
32.00,
),
),
lives >= 2? Image.asset(
"assets/heart.webp",
height: getSize(
32.00,
),
width: getSize(
32.00,
),
fit: BoxFit.fill,
): SizedBox(
height: getSize(
32.00,
),
width: getSize(
32.00,
),
),
lives >= 3? Image.asset(
"assets/heart.webp",
height: getSize(
32.00,
),
width: getSize(
32.00,
),
fit: BoxFit.fill,
): SizedBox(
height: getSize(
32.00,
),
width: getSize(
32.00,
),
),
],
),
),
Text(
"Score: $score",
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white70,
fontSize: getFontSize(
24,
),
fontFamily: 'Inter',
fontWeight: FontWeight.w400,
),
),
],
),
),
),
),
Container(
width: size.width,
height: getVerticalSize(
20
),
child:
// Text(
// "$sec",
// maxLines: null,
// textAlign: TextAlign.center,
// style: TextStyle(
// color: Colors.white70,
// fontSize: getFontSize(
// 24,
// ),
// fontFamily: 'Inter',
// fontWeight: FontWeight.w400,
// ),
// ),
LinearProgressIndicator(
value: sec/60,
color: sec/60 >= 0.5? Colors.green:Colors.red,
backgroundColor: Colors.black,
),
),
Padding(
padding: EdgeInsets.only(
left: getHorizontalSize(
96.00,
),
top: getVerticalSize(
200.00,
),
right: getHorizontalSize(
96.00,
),
),
child: Text(
"${n1} x ${n2}",
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white70,
fontSize: getFontSize(
64,
),
fontFamily: 'Inter',
fontWeight: FontWeight.w400,
),
),
),
],
),
),
),
TextField(
focusNode: node,
controller: controller,
textAlign: TextAlign.center,
onSubmitted: (value) async{
setState(() {
if(value == (n1 * n2).toString()){
score += 10;
n1 = Random().nextInt(13) + 0;
n2 = Random().nextInt(13) + 0;
WidgetsBinding.instance!.addPostFrameCallback((_) {
clr = ColorTween(begin: Colors.green, end: Colors.black).animate(ctrl);
ctrl.forward();
});
print(true);
}
else {
lives -= 1;
WidgetsBinding.instance!.addPostFrameCallback((_) {
clr = ColorTween(begin: Colors.red, end: Colors.black).animate(ctrl);
ctrl.forward();
});
print(false);
}
});
clr = ColorTween(begin: Colors.black).animate(ctrl);
controller.clear();
Future sleep(final Duration duration) async {
await Future.delayed(duration);
}
await sleep(Duration(milliseconds: 10));
node.requestFocus();
},
autofocus: true,
decoration: InputDecoration(
border: InputBorder.none
),
style: TextStyle(
color: Colors.white,
fontSize: 48
),
),
],
),
),
),
),
),
);
}
}
我关注的代码是这个
TextField(
focusNode: node,
controller: controller,
textAlign: TextAlign.center,
onSubmitted: (value) async{
setState(() {
if(value == (n1 * n2).toString()){
score += 10;
n1 = Random().nextInt(13) + 0;
n2 = Random().nextInt(13) + 0;
WidgetsBinding.instance!.addPostFrameCallback((_) {
clr = ColorTween(begin: Colors.green, end: Colors.black).animate(ctrl);
ctrl.forward();
});
print(true);
}
else {
lives -= 1;
WidgetsBinding.instance!.addPostFrameCallback((_) {
clr = ColorTween(begin: Colors.red, end: Colors.black).animate(ctrl);
ctrl.forward();
});
print(false);
}
});
clr = ColorTween(begin: Colors.black).animate(ctrl);
controller.clear();
Future sleep(final Duration duration) async {
await Future.delayed(duration);
}
await sleep(Duration(milliseconds: 10));
node.requestFocus();
},
autofocus: true,
decoration: InputDecoration(
border: InputBorder.none
),
style: TextStyle(
color: Colors.white,
fontSize: 48
),
),
要重置任何动画控制器，请使用 animationController.reset()。
Sets the controller's value to lowerBound, stopping the animation (if in progress), and resetting to its beginning point, or dismissed state.
更多关于 AnimationController。
所以我正在尝试制作一个颜色补间动画，当按下按钮时，如果文本字段中的答案正确，背景颜色将为绿色然后变回黑色，如果不正确则相同事情会发生但是红色而不是绿色但是我遇到了问题。
当我输入一个答案时，补间颜色有效，但当我再次输入时，没有任何反应。
这是完整的代码
import 'dart:async';
import 'dart:io';
import 'dart:math';
import 'math_utils.dart';
import 'package:flutter/material.dart';
class GameScreen extends StatefulWidget {
@override
State<GameScreen> createState() => _GameScreenState();
}
class _GameScreenState extends State<GameScreen> with TickerProviderStateMixin {
int n1 = Random().nextInt(13) + 0;
int n2 = Random().nextInt(13) + 0;
int lives = 3;
int score = 0;
FocusNode node = FocusNode();
double sec = 60.00;
dynamic isCorrect = null;
TextEditingController controller = TextEditingController();
late AnimationController ctrl;
late Animation<Color?> clr;
@override
void initState(){
Timer.periodic(const Duration(milliseconds: 1), (timer) {
setState(() {
sec=sec-0.01;
});
});
super.initState();
ctrl = AnimationController(
duration: Duration(seconds: 1), vsync: this,
);
clr = ColorTween(begin: Colors.black).animate(ctrl);
}
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
backgroundColor: Colors.black,
body: Container(
width: size.width,
child: SingleChildScrollView(
child: Container(
height: size.height,
width: size.width,
decoration: BoxDecoration(
color: clr.value,
),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Align(
alignment: Alignment.centerLeft,
child: Padding(
padding: EdgeInsets.only(
top: getVerticalSize(
16.00,
),
bottom: getVerticalSize(
20.00,
),
),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Align(
alignment: Alignment.centerLeft,
child: Container(
width: size.width,
child: Padding(
padding: EdgeInsets.only(
left: getHorizontalSize(
16.00,
),
right: getHorizontalSize(
16.00,
),
),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: [
Padding(
padding: EdgeInsets.only(
top: getVerticalSize(
3.00,
),
),
child: Row(
crossAxisAlignment:
CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
lives >= 1? Image.asset(
"assets/heart.webp",
height: getSize(
32.00,
),
width: getSize(
32.00,
),
fit: BoxFit.fill,
): SizedBox(
height: getSize(
32.00,
),
width: getSize(
32.00,
),
),
lives >= 2? Image.asset(
"assets/heart.webp",
height: getSize(
32.00,
),
width: getSize(
32.00,
),
fit: BoxFit.fill,
): SizedBox(
height: getSize(
32.00,
),
width: getSize(
32.00,
),
),
lives >= 3? Image.asset(
"assets/heart.webp",
height: getSize(
32.00,
),
width: getSize(
32.00,
),
fit: BoxFit.fill,
): SizedBox(
height: getSize(
32.00,
),
width: getSize(
32.00,
),
),
],
),
),
Text(
"Score: $score",
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white70,
fontSize: getFontSize(
24,
),
fontFamily: 'Inter',
fontWeight: FontWeight.w400,
),
),
],
),
),
),
),
Container(
width: size.width,
height: getVerticalSize(
20
),
child:
// Text(
// "$sec",
// maxLines: null,
// textAlign: TextAlign.center,
// style: TextStyle(
// color: Colors.white70,
// fontSize: getFontSize(
// 24,
// ),
// fontFamily: 'Inter',
// fontWeight: FontWeight.w400,
// ),
// ),
LinearProgressIndicator(
value: sec/60,
color: sec/60 >= 0.5? Colors.green:Colors.red,
backgroundColor: Colors.black,
),
),
Padding(
padding: EdgeInsets.only(
left: getHorizontalSize(
96.00,
),
top: getVerticalSize(
200.00,
),
right: getHorizontalSize(
96.00,
),
),
child: Text(
"${n1} x ${n2}",
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white70,
fontSize: getFontSize(
64,
),
fontFamily: 'Inter',
fontWeight: FontWeight.w400,
),
),
),
],
),
),
),
TextField(
focusNode: node,
controller: controller,
textAlign: TextAlign.center,
onSubmitted: (value) async{
setState(() {
if(value == (n1 * n2).toString()){
score += 10;
n1 = Random().nextInt(13) + 0;
n2 = Random().nextInt(13) + 0;
WidgetsBinding.instance!.addPostFrameCallback((_) {
clr = ColorTween(begin: Colors.green, end: Colors.black).animate(ctrl);
ctrl.forward();
});
print(true);
}
else {
lives -= 1;
WidgetsBinding.instance!.addPostFrameCallback((_) {
clr = ColorTween(begin: Colors.red, end: Colors.black).animate(ctrl);
ctrl.forward();
});
print(false);
}
});
clr = ColorTween(begin: Colors.black).animate(ctrl);
controller.clear();
Future sleep(final Duration duration) async {
await Future.delayed(duration);
}
await sleep(Duration(milliseconds: 10));
node.requestFocus();
},
autofocus: true,
decoration: InputDecoration(
border: InputBorder.none
),
style: TextStyle(
color: Colors.white,
fontSize: 48
),
),
],
),
),
),
),
),
);
}
}
我关注的代码是这个
TextField(
focusNode: node,
controller: controller,
textAlign: TextAlign.center,
onSubmitted: (value) async{
setState(() {
if(value == (n1 * n2).toString()){
score += 10;
n1 = Random().nextInt(13) + 0;
n2 = Random().nextInt(13) + 0;
WidgetsBinding.instance!.addPostFrameCallback((_) {
clr = ColorTween(begin: Colors.green, end: Colors.black).animate(ctrl);
ctrl.forward();
});
print(true);
}
else {
lives -= 1;
WidgetsBinding.instance!.addPostFrameCallback((_) {
clr = ColorTween(begin: Colors.red, end: Colors.black).animate(ctrl);
ctrl.forward();
});
print(false);
}
});
clr = ColorTween(begin: Colors.black).animate(ctrl);
controller.clear();
Future sleep(final Duration duration) async {
await Future.delayed(duration);
}
await sleep(Duration(milliseconds: 10));
node.requestFocus();
},
autofocus: true,
decoration: InputDecoration(
border: InputBorder.none
),
style: TextStyle(
color: Colors.white,
fontSize: 48
),
),
要重置任何动画控制器，请使用 animationController.reset()。
Sets the controller's value to lowerBound, stopping the animation (if in progress), and resetting to its beginning point, or dismissed state.
更多关于 AnimationController。