时间戳

首页 > 解决方案 > 使用偏移量的容器动画 - Flutter

dart - 使用偏移量的容器动画 - Flutter

问题描述

我试图通过offset像 from 一样给出 begin 和 end 来移动屏幕上的容器Offset(0.0,0.0) to Offset(400.0,300.0)。我正在使用幻灯片过渡来为我 Tween<Offset>(begin: const Offset(3.0, 4.0), end: Offset(0.0, 0.0))用来在屏幕上移动它的容器设置动画，我想传递这些 Offset(400.0,300.0)并为其设置动画。

这是我的代码

class MoveContainer extends StatefulWidget {


  MoveContainer({Key key, }) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return new _MyMoveContainer();
  }
}

class _MyMoveContainer extends State<MoveContainer>
    with TickerProviderStateMixin {
  GlobalKey _globalKey = new GlobalKey();
  AnimationController _controller;
  Animation<Offset> _offset;
  Offset local;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 3),
    );
    _offset =
        Tween<Offset>(begin: const Offset(3.0, 4.0), end: Offset(0.0, 0.0))
            .animate(_controller);
    _offset.addListener(() {
      setState(() {});
    });
    _controller.forward();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SlideTransition(
      position: _offset,
      child: GestureDetector(
        onPanStart: (start) {
          RenderBox getBox = context.findRenderObject();
          local = getBox.localToGlobal(start.globalPosition);
          print('point are $local');
        },
        child: Container(
            color: Colors.cyan,
            height: 200.0,
            width: 200.0,
            child: Text("hello ")),
      ),
    );
  }
}

标签： dartflutterflutter-layoutflutter-animation

解决方案

对于作者来说，这个问题可能并不实际。（7个月前问）。但也许我的回答会帮助别人。

通常幻灯片过渡用于页面之间的过渡。这就是为什么，这里的一个位置值单位是一页的大小。当你把 Offset(400.0,300.0) 放在那里时，它等于 400 屏幕右侧和 300 页向下。

对于您的情况，最好使用 AnimatedPositioned Widget。

在此处输入图像描述

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        backgroundColor: Colors.blue,
        body: MoveContainer(),
      ),
    );
  }
}

class MoveContainer extends StatefulWidget {
  @override
  _MoveContainerState createState() => _MoveContainerState();
}

class _MoveContainerState extends State<MoveContainer> {
  Offset offset = Offset.zero;
  final double height = 200;
  final double width = 200;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onPanStart: (details) {
        RenderBox getBox = context.findRenderObject();
        setState(() {
          offset = getBox.localToGlobal(details.globalPosition);
        });
      },
      child: Stack(
        children: <Widget>[
          AnimatedPositioned(
            duration: Duration(milliseconds: 300),
            top: offset.dy - (height / 2),
            left: offset.dx - (width / 2),
            child: Container(
              color: Colors.cyan,
              height: height,
              width: width,
              child: Text("hello "),
            ),
          ),
        ],
      ),
    );
  }
}

推荐阅读