在MaterialApp的应用栏中使用图标创建简单的Hero动画时,除非在图标本身中明确指定了颜色,否则hero动画似乎不会使用主题颜色。 有人可以解释为什么未明确设置图标颜色时图标的颜色在飞行过程中发生变化吗?英雄是否无法访问主题数据?还是使用其他颜色设置?
示例:
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();
},
),
),
),
]
),
);
}
}
答案 0 :(得分:1)
发生这种情况是因为Hero
的飞行动画是OverlayEntry
上的MaterialApp
。
因此,尽管使用的小部件相同(图标),但其位置却不同。
根据您的情况,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),
),
);
},
),
);