飞镖 – 颤动 – 浮动动作按钮 – 隐藏物品的可见性
发布时间：2020-12-14 14:51:50 所属栏目：百科 来源：网络整理
导读：我试图控制FAB中较小项目的可见性,根据下面的gif： 但是我无法在项目中插入不透明度.在任何地方我都会发生某种错误.我不知道不透明度是否是最好的方法. 要隐藏我相信动画的项目,可以控制它们出现的时间. 以下是我迄今取得的成就： 你能帮我解决这个问题吗？
|
我试图控制FAB中较小项目的可见性,根据下面的gif：
但是我无法在项目中插入不透明度.在任何地方我都会发生某种错误.我不知道不透明度是否是最好的方法. 要隐藏我相信动画的项目,可以控制它们出现的时间. 以下是我迄今取得的成就：
你能帮我解决这个问题吗？ 以下是上面的gif代码： import 'package:flutter/animation.dart';
import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(home: new HomePage()));
}
class HomePage extends StatefulWidget {
@override
HomePageState createState() => new HomePageState();
}
class HomePageState extends State<HomePage> with TickerProviderStateMixin {
int _angle = 90;
bool _isRotated = true;
void _rotate(){
setState((){
if(_isRotated) {
_angle = 45;
_isRotated = false;
} else {
_angle = 90;
_isRotated = true;
}
});
}
@override
Widget build(BuildContext context) {
return new Scaffold(
body: new Stack(
children: <Widget>[
new Positioned(
bottom: 200.0,right: 24.0,child: new Container(
child: new Row(
children: <Widget>[
new Container(
margin: new EdgeInsets.only(right: 16.0),child: new Text(
'foo1',style: new TextStyle(
fontSize: 13.0,fontFamily: 'Roboto',color: new Color(0xFF9E9E9E),fontWeight: FontWeight.bold,),new Material(
color: new Color(0xFF9E9E9E),type: MaterialType.circle,elevation: 6.0,child: new GestureDetector(
child: new Container(
width: 40.0,height: 40.0,child: new InkWell(
onTap: (){},child: new Center(
child: new Icon(
Icons.add,color: new Color(0xFFFFFFFF),)
),)
),],)
),new Positioned(
bottom: 144.0,child: new Container(
child: new Row(
children: <Widget>[
new Container(
margin: new EdgeInsets.only(right: 16.0),child: new Text(
'foo2',style: new TextStyle(
fontSize: 13.0,new Material(
color: new Color(0xFF00BFA5),child: new GestureDetector(
child: new Container(
width: 40.0,child: new InkWell(
onTap: (){},child: new Center(
child: new Icon(
Icons.add,)
),)
),)
),new Positioned(
bottom: 88.0,child: new Text(
'foo3',new Material(
color: new Color(0xFFE57373),new Positioned(
bottom: 16.0,right: 16.0,child: new Material(
color: new Color(0xFFE57373),child: new GestureDetector(
child: new Container(
width: 56.0,height: 56.00,child: new InkWell(
onTap: _rotate,child: new Center(
child: new RotationTransition(
turns: new AlwaysStoppedAnimation(_angle / 360),child: new Icon(
Icons.add,)
),]
)
);
}
}
解决方法
我使用了Opacity,但在使用ScaleTransition后它变得多余了.使用ScaleTransition,可以隐藏和显示小部件.
我使用3个动画来生成级联效果. 以下是代码及其结果： import 'package:flutter/animation.dart';
import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(home: new HomePage()));
}
class HomePage extends StatefulWidget {
@override
HomePageState createState() => new HomePageState();
}
class HomePageState extends State<HomePage> with TickerProviderStateMixin {
int _angle = 90;
bool _isRotated = true;
AnimationController _controller;
Animation<double> _animation;
Animation<double> _animation2;
Animation<double> _animation3;
@override
void initState() {
_controller = new AnimationController(
vsync: this,duration: const Duration(milliseconds: 180),);
_animation = new CurvedAnimation(
parent: _controller,curve: new Interval(0.0,1.0,curve: Curves.linear),);
_animation2 = new CurvedAnimation(
parent: _controller,curve: new Interval(0.5,);
_animation3 = new CurvedAnimation(
parent: _controller,curve: new Interval(0.8,);
_controller.reverse();
super.initState();
}
void _rotate(){
setState((){
if(_isRotated) {
_angle = 45;
_isRotated = false;
_controller.forward();
} else {
_angle = 90;
_isRotated = true;
_controller.reverse();
}
});
}
@override
Widget build(BuildContext context) {
return new Scaffold(
body: new Stack(
children: <Widget>[
new Positioned(
bottom: 200.0,child: new Container(
child: new Row(
children: <Widget>[
new ScaleTransition(
scale: _animation3,alignment: FractionalOffset.center,child: new Container(
margin: new EdgeInsets.only(right: 16.0),child: new Text(
'foo1',style: new TextStyle(
fontSize: 13.0,new ScaleTransition(
scale: _animation3,child: new Material(
color: new Color(0xFF9E9E9E),child: new GestureDetector(
child: new Container(
width: 40.0,child: new InkWell(
onTap: (){
if(_angle == 45.0){
print("foo1");
}
},child: new Center(
child: new Icon(
Icons.add,)
),child: new Container(
child: new Row(
children: <Widget>[
new ScaleTransition(
scale: _animation2,child: new Container(
margin: new EdgeInsets.only(right: 16.0),child: new Text(
'foo2',new ScaleTransition(
scale: _animation2,child: new Material(
color: new Color(0xFF00BFA5),child: new InkWell(
onTap: (){
if(_angle == 45.0){
print("foo2");
}
},child: new Container(
child: new Row(
children: <Widget>[
new ScaleTransition(
scale: _animation,child: new Text(
'foo3',new ScaleTransition(
scale: _animation,child: new Material(
color: new Color(0xFFE57373),child: new InkWell(
onTap: (){
if(_angle == 45.0){
print("foo3");
}
},]
)
);
}
}
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
