Flutter 颤振英雄动画不使用主题颜色？

在MaterialApp的appbar中创建带有图标的简单英雄动画时，英雄动画似乎不使用主题颜色，除非在图标本身中明确指定了颜色。 有人能解释为什么在飞行中图标颜色没有明确设置的情况下，图标的颜色会发生变化吗？英雄没有访问主题数据的权限吗？还是使用其他颜色集

例如：

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();
                },
              ),
            ),
          ),
        ]
      ),
    );
  }
}

---

这是因为英雄的飞行动画是对MaterialApp的过度渲染。 因此，虽然使用的小部件是相同的图标，但其位置却不同

问题是，在您的例子中，IconTheme.ofcontext根据该位置返回不同的值：

作为AppBar的子级，IconTheme被重写以处理primaryColor作为背景 在其他地方，它使用MaterialApp上指定的默认主题。 所以在动画中，使用的图标是不同的，导致了这样的问题

一种可能的解决方案是固定该值，以确保使用的IconTheme始终相同：

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

---

这是因为英雄的飞行动画是对MaterialApp的过度渲染。 因此，虽然使用的小部件是相同的图标，但其位置却不同

问题是，在您的例子中，IconTheme.ofcontext根据该位置返回不同的值：

作为AppBar的子级，IconTheme被重写以处理primaryColor作为背景 在其他地方，它使用MaterialApp上指定的默认主题。 所以在动画中，使用的图标是不同的，导致了这样的问题

一种可能的解决方案是固定该值，以确保使用的IconTheme始终相同：

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

---

啊，明白了：所以在appbar中使用了PrimaryContheme，在飞行过程中使用了iconTheme，这就是颜色不同的原因。谢谢在主题小部件中包装按钮时，图标实际上一直是黑色的。在IconTheme中包装数据：Theme.ofcontext.primaryContheme确实起到了作用。我会坚持这一点，因为如果我选择改变大小或不透明度。啊，明白了：所以在appbar中使用了PrimaryContheme，在flight iconTheme中，这就是颜色不同的原因。谢谢在主题小部件中包装按钮时，图标实际上一直是黑色的。在IconTheme中包装数据：Theme.ofcontext.primaryContheme确实起到了作用。我会坚持，因为如果我选择改变大小或不透明度。