代码之家  ›  专栏  ›  技术社区  ›  DolDurma

从外部滑动到屏幕的20%

  •  0
  • DolDurma  · 技术社区  · 5 年前

    在下面的代码中 SlideTransition 可以是工作和动画 container

    我不知道如何编辑动画来实现这一点

    import 'package:flutter/material.dart';
    
    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: Home(),
        );
      }
    }
    
    class Home extends StatefulWidget {
      @override
      State<StatefulWidget> createState() => HomeState();
    }
    
    class HomeState extends State<Home> with SingleTickerProviderStateMixin {
      AnimationController controller;
      Animation<Offset> offset;
    
      @override
      void initState() {
        super.initState();
    
        controller =
            AnimationController(vsync: this, duration: Duration(seconds: 1));
    
        offset = Tween<Offset>(begin:Offset.zero , end: Offset(0.0, -4.0)).animate(controller);
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Stack(
            children: <Widget>[
              Center(
                child: RaisedButton(
                  child: Text('Show / Hide'),
                  onPressed: () {
                    switch (controller.status) {
                      case AnimationStatus.completed:
                        controller.reverse();
                        break;
                      case AnimationStatus.dismissed:
                        controller.forward();
                        break;
                      default:
                    }
                  },
                ),
              ),
              Align(
                alignment: Alignment.bottomCenter,
                child: SlideTransition(
                    position: offset,
                    child: Container(
                      margin: EdgeInsets.all(10.0),
                      height: 150.0,
                      width: double.infinity,
                      decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(10.0), boxShadow: [
                        BoxShadow(
                          color: Colors.black26,
                          blurRadius: 0.9,
                          spreadRadius: 0.5,
                          offset: Offset(0.0, 0.0),
                        ),
                      ]),
                      child: InkWell(
                        onTap: (){
                          controller.reverse();
                        },
                        child: Center(
                          child: Text(
                            'ssss',
                            style: TextStyle(
                              fontSize: 26.0,
                            ),
                          ),
                        ),
                      ),
                    )),
              )
            ],
          ),
        );
      }
    }
    
    0 回复  |  直到 5 年前
        1
  •  0
  •   DolDurma    5 年前

    问题已解决

    import 'package:flutter/material.dart';
    
    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: Home(),
        );
      }
    }
    
    class Home extends StatefulWidget {
      @override
      State<StatefulWidget> createState() => HomeState();
    }
    
    class HomeState extends State<Home> with SingleTickerProviderStateMixin {
      AnimationController controller;
      Animation<Offset> offset;
    
      @override
      void initState() {
        super.initState();
    
        controller = AnimationController(vsync: this, duration: Duration(milliseconds: 300));
        // offset = Tween<Offset>(begin: Offset.zero, end: Offset(1.0, 0.0)).animate(controller); from right
        offset = Tween<Offset>(begin:Offset.zero , end: Offset(0.0, -1.0)).animate(controller);
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Stack(
            children: <Widget>[
              Center(
                child: RaisedButton(
                  child: Text('Show / Hide'),
                  onPressed: () {
                    switch (controller.status) {
                      case AnimationStatus.completed:
                        controller.reverse();
                        break;
                      case AnimationStatus.dismissed:
                        controller.forward();
                        break;
                      default:
                    }
                  },
                ),
              ),
              Align(
                alignment: Alignment.topCenter,
                child: SlideTransition(
                    position: offset,
                    child: Container(
                      margin: EdgeInsets.only(top:50.0),
                      height: 150.0,
                      width: double.infinity,
                      decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(10.0), boxShadow: [
                        BoxShadow(
                          color: Colors.black26,
                          blurRadius: 0.9,
                          spreadRadius: 0.5,
                          offset: Offset(0.0, 0.0),
                        ),
                      ]),
                      child: InkWell(
                        onTap: (){
                          controller.reverse();
                        },
                        child: Center(
                          child: Text(
                            'ssss',
                            style: TextStyle(
                              fontSize: 26.0,
                            ),
                          ),
                        ),
                      ),
                    )),
              )
            ],
          ),
        );
      }
    }
    
    推荐文章