草庐IT

Flutter Hero动画不用主题色？

coder 2023-07-22 原文

在 MaterialApp 的应用栏中创建带有图标的简单英雄动画时，英雄动画似乎不使用主题颜色，除非在图标本身中明确指定颜色。 有人可以解释为什么未明确设置图标颜色时图标颜色在飞行过程中发生变化吗？英雄是否无法访问主题数据？还是使用其他颜色集？

例子:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: Hero(
          tag: "mytag",
          child: Material(
            color: Colors.transparent,
            child: IconButton(
              icon: Icon(
                Icons.menu,
                // uncomment below line and the flying icon is white as expected...
                // color: Theme.of(context).primaryIconTheme.color
              ),
              onPressed: () {
                Navigator.of(context).push(
                  PageRouteBuilder(
                    pageBuilder: 
                      (context, animation, secondaryAnimation) => SecondPage()
                  )
                );
              },
            ),
          ),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: <Widget> [
          Hero(
            tag: "mytag",
            child: Material(
              color: Colors.transparent,
                child: IconButton(
                icon: Icon(
                  Icons.menu,
                  // uncomment below line and the reverse flying icon is white as expected...
                  // color: Theme.of(context).primaryIconTheme.color
                ),
                onPressed: () {
                  Navigator.of(context).pop();
                },
              ),
            ),
          ),
        ]
      ),
    );
  }
}

最佳答案

发生这种情况是因为 Hero 的飞行动画是 MaterialApp 上的 OverlayEntry。 因此，虽然使用的小部件相同(图标)，但其位置不同。

问题是，在您的情况下，IconTheme.of(context) 根据该位置返回不同的值:

  • 作为 AppBar 的子项，IconTheme 被覆盖以处理 primaryColor 作为背景
  • 在其他任何地方，它都使用在 MaterialApp 上指定的默认主题。

所以在动画的时候，使用的IconTheme不一样，导致了这个问题。

一个潜在的解决方案是修复该值以确保使用的 IconTheme 始终相同:

AppBar(
  leading: Builder(
    builder: (context) {
      return Hero(
        child: IconTheme(
          data: Theme.of(context).primaryIconTheme,
          child: Icon(Icons.whatshot),
        ),
      );
    },
  ),
);

关于Flutter Hero动画不用主题色？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53815339/

FlutterHerocodecontextsectionflutter-animation

有关Flutter Hero动画不用主题色？的更多相关文章

  1. Unity 3D 制作开关门动画,旋转门制作,推拉门制作,门把手动画制作 - 2

    Unity自动旋转动画1.开门需要门把手先动,门再动2.关门需要门先动,门把手再动3.中途播放过程中不可以再次进行操作觉得太复杂?查看我的文章开关门简易进阶版效果:如果这个门可以直接打开的话,就不需要放置"门把手"如果门把手还有钥匙需要旋转,那就可以把钥匙放在门把手的"门把手",理论上是可以无限套娃的可调整参数有:角度,反向,轴向,速度运行时点击Test进行测试自己写的代码比较垃圾,命名与结构比较拉,高手轻点喷,新手有类似的需求可以拿去做参考上代码usingSystem.Collections;usingSystem.Collections.Generic;usingUnityEngine;u

  2. LVGL V8动画 - 2

    动画/*INITIALIZEANANIMATION 初始化一个动画*-----------------------*/lv_anim_ta;lv_anim_init(&a);/*MANDATORYSETTINGS 必选设置*------------------*//*Setthe"animator"function 设置“动画”功能*/lv_anim_set_exec_cb(&a,(lv_anim_exec_xcb_t)lv_obj_set_x);/*Setthe"animator"function*/lv_anim_set_var(&a,obj);/*Lengthoftheanim

  3. ruby-on-rails - 在暂存环境中覆盖 ActionMailer 主题 - 2

    我希望从我们的登台服务器发送的所有电子邮件的主题中都带有“[STAGING]”字样。在Rails3.2中使用ActionMailer是否有一种优雅的方式来做到这一点？ 最佳答案 这是我使用ActionMailerInterceptor找到的一个优雅的解决方案基于anexistinganswer.#config/initializers/change_staging_email_subject.rbifRails.env.staging?classChangeStagingEmailSubjectdefself.delivering_

  4. ruby - Carrierwave + MiniMagick - 如何将动画 GIF 压缩到第一帧？ - 2

    有人知道如何使用Carrierwave+MiniMagick将动画GIF压缩到第一帧吗？ 最佳答案 我认为MiniMagick有一些变化，因为我只花了三个小时试图找出为什么Andrey的代码对我不起作用。我收到以下错误:ActiveRecord::RecordInvalid(Validationfailed:ImageFailedtomanipulatewithMiniMagick,maybeitisnotanimage?OriginalError:Command("mogrify-scene/var/folders/0o/0oqN

  5. ruby - 如何检查我的主题是否引发异常？ - 2

    我目前正在subject中创建一个对象，需要测试这是否会引发异常。以下代码说明了我要实现的目标:describeMyClassdodescribe'#initialize'dosubject{MyClass.new}it{is_expected.not_toraise_error(Some::Error)}endend我有一种感觉，我正在以错误的方式处理这件事。将subject设置为新对象而不创建对象两次的首选方法是什么？更新我的问题有两个。首先，这种语法不起作用:it{is_expected.not_toraise_error}但是，在itblock中使用expect确实如此(正如J

  6. kafka如何动态消费新增topic主题 - 2

    一、解决痛点使用spring-kafka客户端，每次新增topic主题，都需要硬编码客户端并重新发布服务，操作麻烦耗时长。kafkaListener虽可以支持通配符消费topic，缺点是并发数需要手动改并且重启服务。对于业务逻辑相似场景，创建新主题动态监听可以用kafka-batch-starter组件二、组件能力1、新增topic名称为：auto.topic1（由于配置spring.kafka.consumer.prefix为auto，因此只有auto前缀的topic，才会被组件动态监听。）2、应用输出日志，监听到新增auto.topic1，并初始化客户端(主题刷新间隔为10s)3、发新的消

  7. ruby - 使用适用于 Ruby 的 AWS 开发工具包发布到 SNS 主题时指定区域 - 2

    我正在使用适用于Ruby的AWS开发工具包向Rails3应用程序发布消息和AWSSNS主题，如下所示:sns=AWS::SNS.newtopic=sns.topics['arn:aws:sns:eu-west-1:55555555555:my_topic']topic.publish("MESSAGE",:subject=>"SUBJECT")当我发布到“us-east-1”中的主题时，它按预期工作，但发布到“eu-west-1”区域中的主题时不起作用:AWS::SNS::Errors::InvalidParameter-Invalidparameter:TopicArn:使用AWSS

  8. objective-c - 不用 Mac 学习 Objective C - 2

    我没有Mac或iPhone。然而，采用C并使其更加动态地朝着smalltalk、python或ruby​​的想法发展的概念对我来说确实很有吸引力。我很乐意从Objective-C开始。Objective-C只是C的语法超集还是真的像C。比如，它可以用gcc等编译吗？我的大部分编程都是用Ruby完成的。ObjectiveC似乎比C宽容得多。您可以在C中为Ruby编写native扩展。您可以在ObjectiveC中为Ruby编写native扩展吗？除了拥有Mac/iPhone和XCode之外，我如何开始使用ObjectiveC？ 最佳答案

  9. ruby-on-rails - 如何处理 UTF-8 电子邮件 header (如主题 :) using Ruby? - 2

    我是一个电子邮件n00b，但我正在开发一个发送带有Unicode字符的HTML电子邮件的应用程序(正如我friend所说的“享受编码hell”)。Subject:header来自用户输入，因此可能包含Unicode字符。一些邮件客户端(如GMail和Outlook2007)对此没有问题，但从我的阅读来看，执行此操作的正确方法似乎是使用MIMEEncoded-Wordencoding对于标题。我找不到Ruby库来执行此操作。有吗？此外，是否有要添加的header告诉邮件客户端在显示消息时使用UTF-8？我们要发送多部分电子邮件，所以我们的Content-Type是multipart/mi

  10. ruby-on-rails - 如何在 Ajax 请求处理期间显示动画图标 - Rails 3 - 2

    我正在尝试为每个ajax请求显示一个加载指示器，我在Rails3应用程序中工作。HTML:"loading-indicator",:style=>"display:none")%>CSS:#loading-indicator{position:absolute;left:10px;top:10px;}loading.js:我放在assest/javascripts/$(document).ready(function(){$(document).ajaxSend(function(event,request,settings){$('#loading-indicator').show(

随机推荐