如何在作用域模型的作用域模型后代的小部件中运行动画。我这里有一个红色按钮,单击它会显示一个正方形。正方形在 3 秒后消失,这恰好很快。我想要做的是让广场在几秒钟内消失。我尝试了 AnimationController,但它需要一个“vsync:”参数,我看到它通常在 initState() 中作为“vsync: this”完成,并且在其他地方使用时会出错。
import 'package:flutter/material.dart';
import 'dart:async';
import 'package:scoped_model/scoped_model.dart';
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'scoped model Opacity',
home: new ScopedModel<MyScopedModel>(
model: new MyScopedModel(),
child: new MyPage(),
),
);
}
}
class MyScopedModel extends Model {
double myOpacity = 0.0;
Timer myTimer;
AnimationController myAnimationController;
void myShowSquare() {
myOpacity = 1.0;
myTimer = new Timer(new Duration(seconds: 3), _removeSquare);
notifyListeners();
}
void _removeSquare() {
myOpacity = 0.0;
myTimer.cancel();
notifyListeners();
}
}
class MyPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Container(
color: Colors.grey,
child: new ScopedModelDescendant<MyScopedModel>(
builder: (context, child, model) => new Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
new GestureDetector(
onTap: model.myShowSquare,
child: new Stack(
alignment: Alignment.center,
children: <Widget>[
new Container(
constraints: new BoxConstraints.expand(
width: 50.0, height: 50.0),
color: Colors.deepOrange,
),
new Text(
'+',
style: new TextStyle(color: Colors.black),
),
],
),
),
new Opacity(
opacity: model.myOpacity,
child: new Container(
constraints:
new BoxConstraints.expand(width: 50.0,
height: 50.0),
color: Colors.amber,
),
)
],
),
));
}
}
最佳答案
我想你要找的是 FadeTransition我相信它可以为您处理淡出小部件的艰苦工作。您也可以使用 AnimatedCrossFade小部件,如果你也想改变尺寸。
但是,如果您想自己制作动画,我建议您查看 Animation documentation还有这个Animation Tutorial因为他们会详细解释它是如何工作的。
关于flutter - 飞镖 flutter : How to run animation from a scoped-model?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49977113/