flutter 平移动画
【代码】flutter 平移动画。
·
import 'dart:ui';
import 'package:flutter/cupertino.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import '../../common/Global.dart';
class TextClass extends StatefulWidget {
const TextClass({
Key? key,
}) : super(key: key);
@override
State<StatefulWidget> createState() => TextClassState();
}
class TextClassState extends State<TextClass>
with SingleTickerProviderStateMixin {
//动画控制器
late AnimationController controller;
late Animation<Offset> animation;
@override
void initState() {
controller =
AnimationController(duration: const Duration(seconds: 2), vsync: this);//两秒的时间完成该动画
animation =
Tween(begin: Offset(0, 0), end: Offset(0, 1)).animate(controller);//这个设置就是向下移动
super.initState();
}
@override
void dispose() {
super.dispose();
}
@override
Widget build(BuildContext context) {
return Stack(
alignment: Alignment.topCenter,
children: [
Positioned(
top: -(100-Global.topHeight),//通过Stack把控件放到手机状态栏上面
child: GestureDetector(
onTap: () {
if(controller.isCompleted||controller.isDismissed)
controller.forward();//向下滑动,就做出了在手机顶部,向下滑动显示,向上滑动消失
},
child: SlideTransition(
position: animation,
child: Container(
color: Colors.red,
width: 100,
height: 100,
child: Text('移动动画测试'),
),
),
)),
],
);
}
}
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐
所有评论(0)