本文介绍了抽屉中没有动画效果的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
因此，我使用窗口小部件堆栈创建了自己的抽屉，这样它就会出现在内容的顶部。我希望该抽屉具有与小部件 Scaffold 抽屉相同的动画（默认设置），以便我将动画放在此抽屉上，但是当我点击菜单图标时动画不起作用。因此，这是我的代码。
So i create my own drawer using widget Stack so that it would appear on the top of the content. I want this drawer have the same animation as widget Scaffold drawer (the default), so that i put animation on this drawer but the animation is not working when i tap on menu icon. so this is my code.
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:rencana_belanja/ui/common/gradient_app_bar.dart';
import 'package:rencana_belanja/ui/home/home_screen_body.dart';
class HomeScreen extends StatefulWidget {
@override
State createState() {
// TODO: implement createState
return new HomeScreenState();
}
}
class HomeScreenState extends State<HomeScreen> with TickerProviderStateMixin{
bool isShow = false;
AnimationController _showingDrawerAnimation;
Animation<Size> _theDrawer;
@override
void initState() {
// TODO: implement initState
super.initState();
_showingDrawerAnimation = new AnimationController(
vsync: this,
duration: new Duration(milliseconds: 300)
);
_theDrawer = new SizeTween(
begin: new Size.fromWidth(0.0),
end: new Size.fromWidth(280.0)
).animate(new CurvedAnimation(
parent: _showingDrawerAnimation,
curve: Curves.ease
));
}
@override
Widget build(BuildContext context) {
Widget drawer = new Stack(
children: <Widget>[
new InkWell(
child: new Container(
color: Colors.black54
),
onTap: () async {
if (_showingDrawerAnimation.isCompleted) {
await _showingDrawerAnimation.reverse();
setState(() {
isShow = false;
});
}
},
),
new AnimatedBuilder(
animation: _theDrawer,
builder: (BuildContext context, Widget child) {
return new PreferredSize(
preferredSize: _theDrawer.value,
child: new SizedBox(
width: _theDrawer.value.width,
child: new Container(
decoration: new BoxDecoration(
boxShadow: [
new BoxShadow(
color: Colors.black45,
blurRadius: 7.0
)
],
gradient: new LinearGradient(
colors: [
const Color(0xFF02AAB0),
const Color(0xFF00CDAC)
],
begin: const FractionalOffset(0.0, 0.7),
end: const FractionalOffset(0.6, 0.3),
stops: [0.0, 1.0],
tileMode: TileMode.clamp
)
),
child: new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
_showingDrawerAnimation.isAnimating ? new Container() : new Stack(
children: <Widget>[
new Image(
image: new AssetImage(
'assets/img/bokeh.jpg',
),
),
new Positioned(
bottom: 10.0,
left: 5.0,
child: new Text(
'Rencanakan kebutuhan belanjamu!',
style: new TextStyle(
color: Colors.white,
fontFamily: 'Ubuntu',
fontWeight: FontWeight.w500,
fontSize: 15.0,
)
),
)
],
),
_showingDrawerAnimation.isAnimating ? new Container() : new Container(
margin: const EdgeInsets.only(top: 12.0, bottom: 180.0),
padding: const EdgeInsets.symmetric(horizontal: 18.0),
child: new Column(
children: <Widget>[
new Row(
children: <Widget>[
new Icon(Icons.delete, color: Colors.white,),
new Container(width: 20.0,),
new Text('Tong Sampah', style: new TextStyle(
color: Colors.white,
fontFamily: 'Ubuntu',
fontWeight: FontWeight.w500,
fontSize: 16.0,
),)
],
),
new Divider(color: Colors.white,),
new Row(
children: <Widget>[
new Icon(Icons.help_outline, color: Colors.white,),
new Container(width: 20.0,),
new Text('Petunjuk Penggunaan', style: new TextStyle(
color: Colors.white,
fontFamily: 'Ubuntu',
fontWeight: FontWeight.w500,
fontSize: 16.0,
),)
],
),
new Divider(color: Colors.white,),
new Row(
children: <Widget>[
new Icon(Icons.person, color: Colors.white,),
new Container(width: 20.0,),
new Text('Hubungi Author', style: new TextStyle(
color: Colors.white,
fontFamily: 'Ubuntu',
fontWeight: FontWeight.w500,
fontSize: 16.0,
),)
],
),
new Divider(color: Colors.white,),
],
),
),
_showingDrawerAnimation.isAnimating ? new Container() : new Row(
children: <Widget>[
new Container(
width: 10.0,
),
new Text(
'Personalization',
style: new TextStyle(
color: Colors.white,
fontFamily: 'Ubuntu',
fontWeight: FontWeight.w500,
fontSize: 14.0,
)
),
],
),
_showingDrawerAnimation.isAnimating ? new Container() : new Divider(color: Colors.white,),
_showingDrawerAnimation.isAnimating ? new Container() : new Row(
children: <Widget>[
new Container(margin: const EdgeInsets.only(left: 15.0)),
new Icon(Icons.settings, color: Colors.white,),
new Container(width: 20.0,),
new Text('Pengaturan', style: new TextStyle(
color: Colors.white,
fontFamily: 'Ubuntu',
fontWeight: FontWeight.w500,
fontSize: 16.0,
),)
],
),
],
),
),
),
);
},
)
],
);
// TODO: implement build
return new Scaffold(
body: new Stack(
children: <Widget>[
new Column(
children: <Widget>[
new GradientAppBar(
title: 'Daftar Belanja',
isShow: isShow,
onDrawerShows: (bool value) async {
if (_showingDrawerAnimation.isDismissed) {
await _showingDrawerAnimation.forward();
setState(() {
isShow = true;
});
}
},
),
new HomeScreenBody()
],
),
new Positioned(
bottom: 20.0,
right: 15.0,
child: new GestureDetector(
onTap: () => print("tiesto"),
child: new CircleAvatar(
backgroundColor: Colors.red,
child: new Icon(
Icons.add,
color: Colors.white,
),
radius: 25.0,
),
)
),
isShow == true ? drawer : new Text(''),
],
),
);
}
}
唯一起作用的动画是 reverse 。我该如何使前进动画正常工作？
The only animation that working is only reverse one. How can i make forward animation working?
注意：抱歉英语不好，这不是我的母语，所以我希望你能理解。谢谢
note: sorry for bad english, it's not my first language so i hope you understand. Thank you
推荐答案
您可以使用容纳整个抽屉的单独类。
You Can use separate Class which hold whole Drawer. I hope That You are looking for that.
import 'dart:async';
import 'package:flutter/material.dart';
import 'dart:math' as math;
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "List View",
home: new HomePage(),
);
}
}
String text = "hello World";
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: new AppBar(
title:Text("Home Page"),
),
drawer: Example(),
body: new Text(text),
);
}
}
class Example extends StatefulWidget {
@override
_ExampleState createState() => new _ExampleState();
}
class _ExampleState extends State<Example> with TickerProviderStateMixin {
AnimationController _animationController;
double animationDuration = 0.0;
int totalItems = 9;
@override
void initState() {
super.initState();
final int totalDuration = 1000;
_animationController = AnimationController(
vsync: this, duration: new Duration(milliseconds: totalDuration));
animationDuration = totalDuration/(100*(totalDuration/(totalItems)));
_animationController.forward();
}
@override
void dispose() {
_animationController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Container(
width: 75.0,
child: ListView.builder(
itemCount: totalItems,
itemBuilder: (BuildContext context, int index) {
return new Item(index: index, animationController: _animationController, duration: animationDuration);
},
),
);
}
}
class Item extends StatefulWidget {
final int index;
final AnimationController animationController;
final double duration;
Item({this.index, this.animationController, this.duration});
@override
_ItemState createState() => _ItemState();
}
class _ItemState extends State<Item> {
Animation _animation;
double start;
double end;
Animation<double> rotateY;
@override
void initState() {
super.initState();
start = (widget.duration * widget.index).toDouble();
end = start + widget.duration;
print("START $start , end $end");
_animation = Tween<double>(
begin: 1.0,
end: 1.0,
).animate(
CurvedAnimation(
parent: widget.animationController,
curve: Interval(
widget.index == 0 ? start : start - widget.duration/2,
widget.index == 0 ? end + widget.duration : end + widget.duration/2,
curve: Curves.easeIn,
),
),
)..addListener((){
setState(() {
});
});
rotateY = new Tween<double>(
begin: -0.5,
end: .0,
).animate(
CurvedAnimation(
parent: widget.animationController,
curve: Interval(
widget.index == 0 ? start: start - widget.duration/2,
widget.index == 0 ? end + widget.duration : end + widget.duration/2,
curve: Curves.easeIn,
),
),
);
}
Future<Null> reverse() async {
await widget.animationController
.reverse()
.orCancel;
Navigator.pop(context);
Navigator.push(
context,
MaterialPageRoute(builder: (context) => MyApp()),
);
}
@override
Widget build(BuildContext context) {
return new AnimatedBuilder(
animation: widget.animationController,
builder: (context, child) {
final card = Opacity(
opacity: _animation.value,
child: new Container(
height: 75.0,
child: RaisedButton(
color: Colors.blueGrey,
child: Icon(
Icons.ac_unit,
color: Colors.white,
size: 50.0,
),
onPressed: (){
reverse();
},
),
),
);
return new Transform(
transform: new Matrix4.rotationY(rotateY.value * math.pi),
alignment: Alignment.centerLeft,
child: card,
);
},
);
}
}
这篇关于抽屉中没有动画效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！