下面的代码是我的示例代码,用来实现简单的滑动小部件到底部,翻译到底部的动画很好,但是当我再次点击关闭时,那就不起作用了。
我还有另一个问题,就是在代码的这一部分中使用容器的大小进行翻译:
Tween<Offset>(begin: Offset.zero, end: Offset(0.0, 0.50))
例如:
Tween<Offset>(begin: Offset.zero, end: Offset(0.0, HEIGHT OF WIDGET ))
完整源代码:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Stack(
children: <Widget>[
TopSlidingLayer(
context,
height: 200.0,
backgroundColor: Colors.indigo,
child: Container(color: Colors.green),
)
],
),
),
);
}
}
class TopSlidingLayer extends StatefulWidget {
final BuildContext context;
final double height;
final Color backgroundColor;
final int animationSpeed;
final Widget child;
TopSlidingLayer(this.context, {this.height = 100.0, this.backgroundColor, this.animationSpeed = 300, @required this.child});
@override
State<TopSlidingLayer> createState() => _TopSlingLayerState();
}
class _TopSlingLayerState extends State<TopSlidingLayer> with TickerProviderStateMixin {
AnimationController _controller;
Animation<Offset> _offset;
@override
void initState() {
super.initState();
_controller = AnimationController(vsync: this, duration: Duration(milliseconds: widget.animationSpeed));
_offset = Tween<Offset>(begin: Offset.zero, end: Offset(0.0, 0.50)).animate(_controller);
}
@override
Widget build(BuildContext context) {
return SlideTransition(
position: _offset,
child: Container(
height: widget.height,
decoration: BoxDecoration(
color: Colors.indigo,
),
child: Column(
children: <Widget>[
Expanded(child: widget.child),
InkWell(
onTap: () {
print('tapped');
switch (_controller.status) {
case AnimationStatus.completed:
_controller.reverse();
break;
case AnimationStatus.dismissed:
_controller.forward();
break;
default:
}
},
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'click me',
style: TextStyle(color: Colors.white),
),
),
),
],
),
),
);
}
}
发布于 2019-07-05 08:29:18
问题来自于SlideTransition小部件中子容器中的高度。按下容器的按钮
当你点击按钮时,它会移出容器,这样你就不能再点击它了。
因此,我去掉了高度,有一个全屏容器,取而代之的是,我在墨水槽周围放了一个大小的盒子,给出了和你一样的结果。
class _TopSlingLayerState extends State<TopSlidingLayer>
with TickerProviderStateMixin {
AnimationController _controller;
Animation<Offset> _offset;
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this, duration: Duration(milliseconds: widget.animationSpeed));
_offset = Tween<Offset>(begin: Offset.zero, end: Offset(0.0, 0.20))
.animate(_controller);
}
@override
Widget build(BuildContext context) {
return SlideTransition(
position: _offset,
child: Container(
child: Column(
children: <Widget>[
Container(child: widget.child, height: widget.height),
InkWell(
onTap: () {
print('tapped ${_controller.status}');
switch (_controller.status) {
case AnimationStatus.completed:
_controller.reverse();
break;
case AnimationStatus.dismissed:
_controller.forward();
break;
default:
}
},
child: SizedBox(
width: double.infinity,
child: Container(
decoration: BoxDecoration(
color: Colors.indigo,
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'click me',
style: TextStyle(color: Colors.white),
textAlign: TextAlign.center,
),
),
),
),
),
],
),
),
);
}
}
我不知道它是否能很好地回答你的问题。
https://stackoverflow.com/questions/56898100
复制相似问题