【发布时间】：2018-01-14 07:35:22
【问题描述】：
根据下面的 gif，我正在尝试控制 FAB 中较小项目的可见性：
但是我无法在项目中插入opacity。我放的任何地方都会发生某种错误。我不知道opacity 是不是最好的方法。
要隐藏项目，我相信通过动画可以控制它们出现的时间。
以下是我目前所取得的成就：
你能帮我解决这个问题吗？
下面是上面的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,
right: 24.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,
fontFamily: 'Roboto',
color: new Color(0xFF9E9E9E),
fontWeight: FontWeight.bold,
),
),
),
new Material(
color: new Color(0xFF00BFA5),
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: 88.0,
right: 24.0,
child: new Container(
child: new Row(
children: <Widget>[
new Container(
margin: new EdgeInsets.only(right: 16.0),
child: new Text(
'foo3',
style: new TextStyle(
fontSize: 13.0,
fontFamily: 'Roboto',
color: new Color(0xFF9E9E9E),
fontWeight: FontWeight.bold,
),
),
),
new Material(
color: new Color(0xFFE57373),
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: 16.0,
right: 16.0,
child: new Material(
color: new Color(0xFFE57373),
type: MaterialType.circle,
elevation: 6.0,
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,
color: new Color(0xFFFFFFFF),
),
)
),
)
),
)
),
),
]
)
);
}
}
【问题讨论】：
-
您粘贴的动画 Gif 是否符合预期/期望的行为？您认为代码中的哪些内容应该从 foo1/foo2/foo3 的视图引导到另一个视图？ （动画 Gif 和您的代码是不同的语言，因此很难理解和猜测您要做什么）。请说清楚;一个更准系统的例子会有所帮助。
-
最终目标是 gif，但我首先需要将
foo1隐藏起来，以便在点击后出现。到目前为止，我还没有找到任何东西可以帮助我使用 Flutter 控制小部件的可视性 -
不确定这对您的最终目标有帮助，但是：您可以将水龙头绑定到 setState，然后再次调用 build()，这次跳过（不添加）foo1（基本上是foo1 的存在将基于一个条件）。如果您需要 foo1 保留它的空间，请在条件下用相同大小的空容器替换它（但我认为获得相同大小通常会很痛苦）。
-
以前有人问过这个问题，但我不知道如何解决您的动画问题stackoverflow.com/questions/44489804/… 您可以将容器包装在 opacity 类中并使用 _rotated 作为变量添加选择。如果我弄清楚您的动画，我将能够提供完整的答案docs.flutter.io/flutter/widgets/Opacity-class.html