animation - 如何为 Tween<Offset> 转换 RenderBox 全局位置坐标？-6ren

animation - 如何为 Tween 转换 RenderBox 全局位置坐标？

转载作者：IT王子更新时间：2023-10-29 07:09:42

我正在尝试创建自己的 Hero使用 SlideTransition 的样式转换位置Offset从用户在上一屏幕上点击项目的位置开始。

这是我目前用于接收用户点击屏幕位置的坐标值的方法(我只需要 dy 值):

GestureDetector(
    child: //stuff
    onTapDown: (TapDownDetails details) async {
        RenderBox box = context.findRenderObject();
        double position = box.localToGlobal(details.globalPosition).dy;
            await Navigator.push(context, MaterialPageRoute(builder: (context) {
        return SecondPage(startPosition: position);
        }));
    },
)

然后我将其传递给 SecondPage并将其用作 Animation<Offset> 的起始位置在我的 initState :

@override
void initState() {
    controller = new AnimationController(
        duration: const Duration(milliseconds: 2000), vsync: this);
    curve = CurvedAnimation(parent: controller, curve: Curves.easeInOut);
    offset = new Tween<Offset>(begin: Offset(0.0, widget.startPosition), end: Offset.zero).animate(curve);
    controller.forward();
    super.initState();
}

我遇到的问题是找到一种方法来正确转换 dy与 Tween<Offset> 匹配的值用作 dy value 带有 say 250-300 的值对于屏幕的一半，但对于 Offset(0.0, widget.startPosition) 也是一样的大约是 2.0使其匹配相同的位置。我已经尝试了各种数学来匹配这些(例如将 dy 除以屏幕高度)但我还没有找到任何与它完全匹配的东西。

如果有人知道我在匹配这些值时必须执行的正确方法/精确数学，我会永远爱你。

编辑:我正在尝试实现的自包含示例，您可以尝试一下。我目前正在使用 double position = (box.globalToLocal(details.globalPosition).dy) / box.size.height * 3;因为这是我找到的最接近的匹配项。

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  @override
  State createState() => HomePageState();
}

class HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.indigo.shade200,
        floatingActionButton: Padding(
            padding: EdgeInsets.only(
                bottom: MediaQuery.of(context).size.height / 35),
            child: FloatingActionButton(
              child: Icon(Icons.add),
              backgroundColor: Colors.grey.shade200,
              foregroundColor: Colors.black,
              onPressed: () {},
            )),
        body: Stack(children: <Widget>[
          SingleChildScrollView(
              child: Padding(
                  padding: EdgeInsets.only(
                      bottom: MediaQuery.of(context).size.height / 11),
                  child:
                      Column(children: <Widget>[Stack(children: getCards())]))),
          Container(
              height: MediaQuery.of(context).size.height / 5,
              width: MediaQuery.of(context).size.width,
              decoration: BoxDecoration(
                  color: Colors.grey.shade200,
                  borderRadius:
                      BorderRadius.only(bottomLeft: Radius.circular(100.0))),
              child: Center(
                  child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: <Widget>[
                    Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        InkWell(
                            child: Padding(
                          padding: EdgeInsets.all(6.0),
                          child: Container(
                            height: 40.0,
                            width: 40.0,
                            decoration: BoxDecoration(
                                shape: BoxShape.circle,
                                border: Border.all(
                                    width: 2.0, color: Colors.pink.shade300)),
                            child: Icon(Icons.sentiment_satisfied),
                          ),
                        )),
                        Text('Tab1',
                            style: TextStyle(
                                fontSize: 10.0,
                                fontWeight: FontWeight.bold,
                                color: Colors.black38))
                      ],
                    ),
                    Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        InkWell(
                            child: Padding(
                          padding: EdgeInsets.all(6.0),
                          child: Container(
                            height: 40.0,
                            width: 40.0,
                            decoration: BoxDecoration(
                                shape: BoxShape.circle,
                                border: Border.all(
                                    width: 2.0, color: Colors.pink.shade300)),
                            child: Icon(Icons.trending_up),
                          ),
                        )),
                        Text('Tab2',
                            style: TextStyle(
                                fontSize: 10.0,
                                fontWeight: FontWeight.bold,
                                color: Colors.black38))
                      ],
                    ),
                    Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        InkWell(
                            child: Padding(
                          padding: EdgeInsets.all(6.0),
                          child: Container(
                            height: 40.0,
                            width: 40.0,
                            decoration: BoxDecoration(
                                shape: BoxShape.circle,
                                border: Border.all(
                                    width: 2.0, color: Colors.pink.shade300)),
                            child: Icon(Icons.favorite_border),
                          ),
                        )),
                        Text('Tab3',
                            style: TextStyle(
                                fontSize: 10.0,
                                fontWeight: FontWeight.bold,
                                color: Colors.black38))
                      ],
                    )
                  ])))
        ]));
  }

  List<Widget> getCards() {
    List<Widget> widgets = new List<Widget>();
    for (int i = 0; i < 5; i++) {
      widgets.add(GestureDetector(
        child: Container(
          margin: EdgeInsets.only(top: (i * 175).toDouble()),
          padding: EdgeInsets.all(60.0),
          height: 300.0,
          decoration: BoxDecoration(
            color: getColor(i),
            borderRadius: BorderRadius.only(bottomLeft: Radius.circular(100.0)),
          ),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.end,
            children: <Widget>[
              Center(
                      child: Text('Text ' + (i + 1).toString(),
                          maxLines: 2,
                          overflow: TextOverflow.ellipsis,
                          style: TextStyle(
                              color: Colors.white,
                              fontSize: 26.0,
                              fontWeight: FontWeight.bold)))
            ],
          ),
        ),
        onTapDown: (TapDownDetails details) async {
          RenderBox box = context.findRenderObject();
          double position = (box.globalToLocal(details.globalPosition).dy) / box.size.height * 3;
          await Navigator.push(context, CustomPageRoute(builder: (context) {
            return SecondPage(index: i, startPosition: position);
          }));
        },
      ));
    }
    return widgets.reversed.toList();
  }
}

class SecondPage extends StatefulWidget {
  final int index;
  final double startPosition;

  SecondPage({this.index, this.startPosition});

  @override
  State createState() => SecondPageState();
}

class SecondPageState extends State<SecondPage> with TickerProviderStateMixin {
  AnimationController controller;
  Animation curve;
  Animation<Offset> offset;

  @override
  void initState() {
    controller = new AnimationController(
        duration: const Duration(milliseconds: 2000), vsync: this);
    curve = CurvedAnimation(parent: controller, curve: Curves.easeInOut);
    offset = new Tween<Offset>(
            begin: Offset(0.0, widget.startPosition), end: Offset.zero)
        .animate(curve);
    controller.forward();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.indigo,
        body: Material(
            color: Colors.transparent,
            child: Stack(children: <Widget>[
              SlideTransition(
                  position: offset,
                  child: Container(
                      height: 200.0,
                      decoration: BoxDecoration(
                          color: getColor(widget.index),
                          borderRadius: BorderRadius.only(
                              bottomLeft: Radius.circular(100.0))),
                      child: Padding(
                          padding: EdgeInsets.only(top: 28.0),
                          child: Stack(
                            children: <Widget>[
                              Align(
                                  alignment: Alignment.topLeft,
                                  child: IconButton(
                                    icon: Icon(Icons.arrow_back,
                                        color: Colors.white),
                                    onPressed: () {
                                      Navigator.of(context).pop(true);
                                    },
                                  )),
                              Align(
                                  alignment: Alignment.topRight,
                                  child: IconButton(
                                    icon:
                                        Icon(Icons.launch, color: Colors.white),
                                    onPressed: () {
                                      print("launch website");
                                    },
                                  )),
                                  Align(
                                  alignment: Alignment.center,
                                  child: Padding(
                                      padding: EdgeInsets.symmetric(
                                          horizontal: MediaQuery.of(context)
                                                  .size
                                                  .width /
                                              5),
                                      child: Material(
                                            color: Colors.transparent,
                                            child: Text('Text ' + (widget.index + 1).toString(),
                                              maxLines: 2,
                                              overflow: TextOverflow.ellipsis,
                                              style: TextStyle(
                                                  color: Colors.white,
                                                  fontSize: 26.0,
                                                  fontWeight:
                                                      FontWeight.bold)))))
                            ],
                          ))))
            ])));
  }
}

class CustomPageRoute<T> extends MaterialPageRoute<T> {
  CustomPageRoute({WidgetBuilder builder, RouteSettings settings})
      : super(builder: builder, settings: settings);

  @override
  Widget buildTransitions(BuildContext context, Animation<double> animation,
      Animation<double> secondaryAnimation, Widget child) {
    return child;
  }
}

Color getColor(int index) {
  switch (index) {
    case 0:
      return Colors.pink.shade300;
    case 1:
      return Colors.purple.shade300;
    case 2:
      return Colors.deepPurple.shade400;
    case 3:
      return Colors.deepPurple.shade900;
    case 4:
      return Colors.indigo.shade900;
    default:
      return Colors.red;
  }
}

最佳答案

在这种情况下查找 renderBox 没有用，因为所有卡片都放在堆栈中，context.findRenderObject 会找到最顶层的堆栈。该堆栈覆盖了整个屏幕，因此当您从全局位置转换为本地位置时，您会获得相同的位置。

您可以像这样计算第二个屏幕的正确偏移量:

  var scrollOffset = controller.position.pixels;
  double position =  ((i * 175).toDouble() + 100 - scrollOffset) / 200;

(i * 175) :每张卡片从顶部开始的偏移量。
100 : 首屏卡片高度差和第二个屏幕(第一个 300，第二个 200)。我们将这个添加到补偿差异，因此卡的位置将是一样。
200 : 卡片在第二屏的高度。我们除以这个因为

The translation is expressed as an Offset scaled to the child's size

最后，您需要为 SingleChildScrollView 提供一个 scrollController 以获取滚动偏移量。没有滚动偏移，如果卡片滚动(即卡片 4 或卡片 5)，您将无法计算出正确的位置

这是您的 HomePageState 的样子。

class HomePageState extends State<HomePage> {

  ScrollController controller = new ScrollController();


  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.indigo.shade200,
        floatingActionButton: Padding(
            padding: EdgeInsets.only(
                bottom: MediaQuery.of(context).size.height / 35),
            child: FloatingActionButton(
              child: Icon(Icons.add),
              backgroundColor: Colors.grey.shade200,
              foregroundColor: Colors.black,
              onPressed: () {},
            )),
        body: Stack(children: <Widget>[
          SingleChildScrollView(
            controller: controller,
              child: Padding(
                  padding: EdgeInsets.only(
                      bottom: MediaQuery.of(context).size.height / 11),
                  child:
                      Column(children: <Widget>[Stack(children: getCards())]))),
          Container(
              height: MediaQuery.of(context).size.height / 5,
              width: MediaQuery.of(context).size.width,
              decoration: BoxDecoration(
                  color: Colors.grey.shade200,
                  borderRadius:
                      BorderRadius.only(bottomLeft: Radius.circular(100.0))),
              child: Center(
                  child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: <Widget>[
                    Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        InkWell(
                            child: Padding(
                          padding: EdgeInsets.all(6.0),
                          child: Container(
                            height: 40.0,
                            width: 40.0,
                            decoration: BoxDecoration(
                                shape: BoxShape.circle,
                                border: Border.all(
                                    width: 2.0, color: Colors.pink.shade300)),
                            child: Icon(Icons.sentiment_satisfied),
                          ),
                        )),
                        Text('Tab1',
                            style: TextStyle(
                                fontSize: 10.0,
                                fontWeight: FontWeight.bold,
                                color: Colors.black38))
                      ],
                    ),
                    Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        InkWell(
                            child: Padding(
                          padding: EdgeInsets.all(6.0),
                          child: Container(
                            height: 40.0,
                            width: 40.0,
                            decoration: BoxDecoration(
                                shape: BoxShape.circle,
                                border: Border.all(
                                    width: 2.0, color: Colors.pink.shade300)),
                            child: Icon(Icons.trending_up),
                          ),
                        )),
                        Text('Tab2',
                            style: TextStyle(
                                fontSize: 10.0,
                                fontWeight: FontWeight.bold,
                                color: Colors.black38))
                      ],
                    ),
                    Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        InkWell(
                            child: Padding(
                          padding: EdgeInsets.all(6.0),
                          child: Container(
                            height: 40.0,
                            width: 40.0,
                            decoration: BoxDecoration(
                                shape: BoxShape.circle,
                                border: Border.all(
                                    width: 2.0, color: Colors.pink.shade300)),
                            child: Icon(Icons.favorite_border),
                          ),
                        )),
                        Text('Tab3',
                            style: TextStyle(
                                fontSize: 10.0,
                                fontWeight: FontWeight.bold,
                                color: Colors.black38))
                      ],
                    )
                  ])))
        ]));
  }

  List<Widget> getCards() {
    List<Widget> widgets = new List<Widget>();
    for (int i = 0; i < 5; i++) {
      widgets.add(GestureDetector(
        child: Container(
          margin: EdgeInsets.only(top: (i * 175).toDouble()),
          padding: EdgeInsets.all(60.0),
          height: 300.0,
          decoration: BoxDecoration(
            color: getColor(i),
            borderRadius: BorderRadius.only(bottomLeft: Radius.circular(100.0)),
          ),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.end,
            children: <Widget>[
              Center(
                      child: Text('Text ' + (i + 1).toString(),
                          maxLines: 2,
                          overflow: TextOverflow.ellipsis,
                          style: TextStyle(
                              color: Colors.white,
                              fontSize: 26.0,
                              fontWeight: FontWeight.bold)))
            ],
          ),
        ),
        onTapDown: (TapDownDetails details) async {
          var scrollOffset = controller.position.pixels;
          double position =  ((i * 175).toDouble() + 100 - scrollOffset) / 200;

          await Navigator.push(context, CustomPageRoute(builder: (context) {
            return SecondPage(index: i, startPosition: position);
          }));
        },
      ));
    }
    return widgets.reversed.toList();
  }
}

关于animation - 如何为 Tween<Offset> 转换 RenderBox 全局位置坐标？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54287694/

文章推荐： ruby - 使实例方法在运行时私有(private)

文章推荐： ruby - Ruby 脚本如何检测到它正在 irb 中运行？

文章推荐： ruby-on-rails - rails 中的路径解析

PHP $全局 |安全查询
我的应用程序中有一个 settings.php 页面，它使用 $GLOBALS 来存储网络应用程序中使用的配置。例如，他是我使用的一个示例设置变量: $GLOBALS["new_login_page
macos - 未知的伪操作 : . 全局
我正在尝试编译我们在 OS 类上获得的简单操作系统代码。它在 Ubuntu 下运行良好，但我想在 OS X 上编译它。我得到的错误是: [compiling] arch/i386/arch/start
hadoop - 带有通配符或变量的distcp目录的设计模式(全局)
我知道distcp无法使用通配符。但是，我将需要在更改的目录上安排distcp。 (即，仅在星期一等“星期五”目录中复制数据)，还从指定目录下的所有项目中复制数据。是否有某种设计模式可用于编写此类
grails - 全局@Resource格式优先级
是否可以在config.groovy中全局定义资源格式(json，xml)的优先级，而不是在每个Resource上指定？例如，不要在@Resource Annotation的参数中指定它，例如: @R
Hibernate - 如何使关联渴望(全局)？
是否有一些简单的方法来获取大对象图的所有关联，而不必“左连接获取”所有关联？我不能只告诉 Hibernate 默认获取 eager 关联吗？最佳答案即使有可能有一个全局 lazy=false(谷歌
Java - 全局、可重用的加载对话框
我正在尝试实现一个全局加载对话框...我想调用一些静态函数来显示对话框和一些静态函数来关闭它。与此同时，我正在主线程或子线程中做一些工作...... 我尝试了以下操作，但对话框没有更新...最后一次，
styling - 哪个字母占用了最多的新兴市场(全局)？
当我偶然发现 this question 时，我正在阅读更改占位符文本。无论如何，我回去学习了占位符。一个 SO 的回答大致如下: Be careful when designing your pl
javascript - 匹配不遵循字母表的数字并将它们放在捕获组中(全局)
例如，如果我有这样的文字: "hello800 more text 1234 and 567" 它应该匹配 1234 和 567，而不是 800(因为它遵循 hello 的 o，这不是一个数字)。这
android - 短信电话号码验证的替代方案 - 全局
我一直在尝试寻找一种无需使用 SMS 验证系统即可验证电话号码(Android 和 iPhone)的方法。原因纯粹是围绕成本。我想要一个免费的解决方案。我可以安全地假设 Android 操作系统会向
c++ - 为所有类提供运行时参数的规范方法——全局？
解决此类问题的规范 C++ 设计模式是什么？我有一些共享多个类的多线程服务器。我需要为大多数类提供各种运行时参数(例如服务器名称、日志记录级别)。在下面的伪 C++ 代码中，我使用了一个日志记录类
Python 全局/局部变量赋值问题
这个问题在这里已经有了答案: Using global variables in a function (25 个答案) 关闭 9 年前。我是 python 的新手，所以可能有一个简单的答案，但我
c++ - (全局)静态变量会在程序结束时被销毁吗？
这个问题在这里已经有了答案: 关闭 10 年前。 Possible Duplicate: Does C++ call destructors for global and class static
ios - NSMutableArray 全局
我正在尝试使用 Objective-C 中的 ArrayList 的等价物。我知道我必须使用 NSMutableArray。我想要一个字符串列表 (NSString)。关键是我的列表应该可以从我类(c
Android 全局/通用函数
今天刚开始学习 Android 开发，我找不到任何关于如何定义 Helper 类或将全局加载的函数集合的信息，我会能够在我创建的任何 Activity 中使用它们。我的计划是创建(至少目前)2 个几
Python 全局/局部变量
为什么这段代码有效: var = 0 def func(num): print num var = 1 if num != 0: func(num-1) fun
php - 错误还是黑客？ $全局
$GLOBALS["items"] = array('one', 'two', 'three', 'four', 'five' ,'six', 'seven'); $alter = &$GLOBALS
Python:日志记录模块 - 全局
我想知道如何实现一个可以在任何地方使用您自己的设置的全局记录器: 我目前有一个自定义记录器类: class customLogger(logging.Logger): ... 该类位于一个单独的
jestjs - 全局 beforeAll in Jest？
我需要使用 React 测试库和 Jest 在我的测试中模拟不同的窗口大小。目前我必须在每个测试文件中包含这个beforeAll: import matchMediaPolyfill from 'm
oop - 静态成员不会使类本身成为(全局)对象吗？
每次我遇到单例模式或任何静态类(即(几乎)只有静态成员的类)的实现时，我想知道这是否实际上不是一种黑客行为，因此只是为了设计而严重滥用类和实例的原则单个对象，而不是设计类和创建单个实例。对我来说，看起
regex - 全局 g 正则表达式标志的奇怪行为
这个问题在这里已经有了答案: Help understanding global flag in perl (2 个回答) 7年前关闭。 my $test = "There was once an\n

IT王子

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

animation - 如何为 Tween 转换 RenderBox 全局位置坐标？