2017-08-07 115 views
1

我试图控制FAB的小项目的可见性的知名度,根据下面的GIF:扑 - 浮动的操作按钮 - 隐藏物品

enter image description here

但是我不能在项目中插入opacity。任何地方我都会发生某种错误。我不知道opacity是否是最好的方法。

要隐藏项目,我相信动画可以控制它们出现的时间。

下面是我迄今取得:

enter image description here

你能帮我解决这个问题?

下面是上述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), 
         ), 
        ) 
        ), 
       ) 
       ), 
      ) 
      ), 
     ), 
     ] 
    ) 
    ); 
    } 
} 
+0

是GIF动画,你粘贴的预期/期望行为?你认为你的代码中的哪些内容应该从foo1/foo2/foo3的视图引导到另一个视图? (动画Gif和你的代码是不同的语言,所以很难跟踪和猜测你想要做什么)。请澄清;更准确的例子会有所帮助。 – mzimmermann

+0

最终目标是gif,但我首先需要的是将'foo1'隐藏起来,以便在出现轻击之后。到目前为止,我还没有找到任何东西来帮助我用Flutter来控制widget的可视性 – rafaelcb21

+0

不确定这有助于您的最终目标,但是:您可以将tap添加到setState,然后再次调用build(),这次跳过(不添加)foo1(基本上foo1的存在将基于条件)。如果你需要foo1保留它的空间,把它换成条件相同大小的空容器(但获得相同的大小通常会让我觉得很痛苦)。 – mzimmermann

回答

1

我用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, 1.0, curve: Curves.linear), 
    ); 

    _animation3 = new CurvedAnimation(
     parent: _controller, 
     curve: new Interval(0.8, 1.0, curve: Curves.linear), 
    ); 
    _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, 
       right: 24.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, 
          fontFamily: 'Roboto', 
          color: new Color(0xFF9E9E9E), 
          fontWeight: FontWeight.bold, 
         ), 
         ), 
        ), 
        ), 

        new ScaleTransition(
         scale: _animation3, 
         alignment: FractionalOffset.center, 
         child: 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:(){ 
           if(_angle == 45.0){ 
            print("foo1"); 
           } 
           }, 
           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 ScaleTransition(
        scale: _animation2, 
        alignment: FractionalOffset.center, 
        child: 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 ScaleTransition(
        scale: _animation2, 
        alignment: FractionalOffset.center, 
        child: 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:(){ 
           if(_angle == 45.0){ 
           print("foo2"); 
           } 
          }, 
          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 ScaleTransition(
        scale: _animation, 
        alignment: FractionalOffset.center, 
        child: 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 ScaleTransition(
        scale: _animation, 
        alignment: FractionalOffset.center, 
        child: 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:(){ 
           if(_angle == 45.0){ 
           print("foo3"); 
           } 
          }, 
          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), 
         ), 
        ) 
        ), 
       ) 
       ), 
      ) 
      ), 
     ), 
     ] 
    ) 
    ); 
    } 
} 

Float Action Button with cascade animation