android - Flutter Hero 动画在 ios 上的行为不同
问题描述
我正在尝试使用英雄动画为图像设置动画..问题是，它在运行时在 android 中运行良好，但是当我在我的 iphone 上运行构建时，屏幕从左到右而不是从下到上转换。
import 'package:Minipoc/screens/main_screen.dart';
import 'package:animate_do/animate_do.dart';
import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart' show timeDilation;
import 'package:lottie/lottie.dart';
import '../widgets/carousel_cards.dart';
class Music extends StatefulWidget {
final int index;
bool playClick;
bool show;
Music({Key key, this.playClick, this.index, this.show}) : super(key: key);
@override
_MusicState createState() => _MusicState();
}
class _MusicState extends State<Music> {
double _currentSliderValue = 20;
double hig = 400.0;
Size size;
@override
void initState() {
// TODO: implement initState
super.initState();
Future.delayed(Duration(seconds: 1)).then((value) {
setState(() {
hig = size.height / 8;
});
});
}
@override
Widget build(BuildContext context) {
size = MediaQuery.of(context).size;
return Scaffold(
body: Container(
// Set background to blue to emphasize that it's a new route.
color: Colors.blue,
//padding: const EdgeInsets.all(16.0),
alignment: Alignment.bottomCenter,
child: SingleChildScrollView(
child: SafeArea(
child: Stack(
children: [
Container(
height: size.height,
width: size.width,
child: Image.asset(
"assets/images/Catcandysleep-background.jpg",
fit: BoxFit.cover,
),
),
Positioned(
top: 10,
left: 160,
child: Container(
height: size.height * 0.06,
width: size.width * 0.13,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
image: DecorationImage(
image: NetworkImage(
'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
fit: BoxFit.cover,
))),
),
Positioned(
top: 60,
left: 70,
child: Text(
"NARRATED BY PAULINE",
style: TextStyle(
color: Colors.white,
fontSize: 30,
fontFamily: 'RaeDunnFarmhouseII'),
),
),
Positioned(
top: 90,
left: 100,
child: Container(
height: size.height * 0.22,
width: size.width * 0.45,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(size.width * 0.05),
bottomRight: Radius.circular(size.width * 0.05))),
child: ClipRRect(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(size.width * 0.05),
bottomRight: Radius.circular(size.width * 0.05)),
child: PhotoHero(
photo: "assets/images/candycat.png",
width: 150.0,
index: widget.index,
onTap: () {
timeDilation = 10.0;
Navigator.of(context).pop(setState(() {
widget.show = true;
}));
// Future.delayed(Duration(seconds: 2), () {
// Navigator.push(
// context,
// MaterialPageRoute(
// builder: (context) => MainScreen(
// playClick: true,
// currentSliderValue: 50,
// )));
// });
///////////////////////////
},
),
),
),
),
Column(
children: [
SizedBox(
height: size.height / 1.3,
),
Container(
width: size.width,
height: size.width / 2.2,
child: Padding(
padding:
EdgeInsets.symmetric(horizontal: size.width * 0.1),
child: Column(
children: [
SlideInUp(
animate: true,
duration: Duration(milliseconds: 200),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Column(
children: [
// SizedBox(
// height: 25,
// ),
Image.asset(
"assets/images/loop_button_icon.png",
height: 50,
width: 50,
),
],
),
Column(
children: [
// SizedBox(
// height: 35,
// ),
Icon(
Icons.fast_rewind,
color: Colors.white,
size: 40,
),
],
),
widget.playClick == false
? GestureDetector(
onTap: () {
Future.delayed(
const Duration(
milliseconds: 300), () {
setState(() {
widget.playClick = true;
widget.show = true;
_currentSliderValue = 10;
});
});
},
//child: SizedBox(
// width: 110,
// child: Lottie.asset(
// notesBigSizeIconAnimation,
// fit: BoxFit.cover,
// frameRate: FrameRate.max,
// ),
child: SizedBox(
height: 60,
child: Image.asset(
"assets/images/play_button_icon.png",
fit: BoxFit.cover,
),
),
)
: GestureDetector(
onTap: () {
setState(() {
widget.playClick = false;
widget.show = false;
_currentSliderValue = 10;
});
},
child: Column(
children: [
SizedBox(
width: 80,
height: 80,
child: Lottie.asset(
"assets/json/notes_big.json",
fit: BoxFit.fill,
frameRate: FrameRate.max,
),
),
SizedBox(
height: 10,
)
],
)),
Column(
children: [
// SizedBox(
// height: 35,
// ),
Icon(
Icons.fast_forward,
color: Colors.white,
size: 40,
),
],
),
],
),
),
SlideInUp(
duration: Duration(milliseconds: 1000),
animate: true,
child: SliderTheme(
data: SliderTheme.of(context).copyWith(
activeTrackColor: Colors.pink,
inactiveTrackColor: Colors.grey,
trackShape: RectangularSliderTrackShape(),
trackHeight: 3.0,
thumbColor: Colors.white,
),
child: Slider(
value: _currentSliderValue,
min: 0,
max: 100,
label: _currentSliderValue.round().toString(),
onChanged: (double value) {
setState(() {
_currentSliderValue = value;
});
},
),
),
),
],
),
),
),
],
)
// Center(
// child: Column(
// crossAxisAlignment: CrossAxisAlignment.center,
// children: [
// Spacer(),
// Row(
// mainAxisAlignment: MainAxisAlignment.spaceEvenly,
// children: [
// Column(
// children: [
// // SizedBox(
// // height: 25,
// // ),
// Image.asset(
// "assets/images/loop_button_icon.png",
// height: 50,
// width: 50,
// ),
// ],
// ),
// Column(
// children: [
// // SizedBox(
// // height: 35,
// // ),
// Icon(
// Icons.fast_rewind,
// color: Colors.white,
// size: 40,
// ),
// ],
// ),
// // playClick == false
// //?
// GestureDetector(
// onTap: () {
// Future.delayed(const Duration(milliseconds: 300), () {
// // setState(() {
// // playClick = true;
// // _currentSliderValue = 10;
// // });
// });
// },
// //child: SizedBox(
// // width: 110,
// // child: Lottie.asset(
// // notesBigSizeIconAnimation,
// // fit: BoxFit.cover,
// // frameRate: FrameRate.max,
// // ),
// child: SizedBox(
// height: 70,
// child: Image.asset(
// "assets/images/play_button_icon.png",
// fit: BoxFit.cover,
// ),
// ),
// ),
// // : GestureDetector(
// // onTap: () {
// // // setState(() {
// // // playClick = false;
// // // _currentSliderValue = 10;
// // // });
// // },
// // child: Column(
// // children: [
// // // SizedBox(
// // // height: 50,
// // // ),
// // Image.asset(
// // "assets/images/rewind_button_icon.png",
// // // width: 70,
// // height: 70,
// // color: Colors.white,
// // ),
// // ],
// // ),
// // ),
// Column(
// children: [
// // SizedBox(
// // height: 35,
// // ),
// Icon(
// Icons.fast_forward,
// color: Colors.white,
// size: 40,
// ),
// ],
// ),
// ],
// ),
// SliderTheme(
// data: SliderTheme.of(context).copyWith(
// activeTrackColor: Colors.pink,
// inactiveTrackColor: Colors.grey,
// trackShape: RectangularSliderTrackShape(),
// trackHeight: 3.0,
// thumbColor: Colors.white,
// ),
// child: Slider(
// value: _currentSliderValue,
// min: 0,
// max: 100,
// label: _currentSliderValue.round().toString(),
// onChanged: (double value) {
// // setState(() {
// // _currentSliderValue = value;
// // });
// },
// ),
// )
// ],
// ),
// ),
],
),
),
),
),
);
}
}
你可以看到我在 photohero {} 中使用了 hero 小部件，我真的希望它的行为方式与它在 android 上的工作方式相同，
解决方案
推荐阅读
- kubernetes - 如何删除所有资源，包括特定部署的服务、部署、pod、副本集，不包括 kubernetes 中的特定资源
- javascript - 如何使用 python 抓取 MSN 股票历史？
- vowpalwabbit - 大众语境强盗：历史数据和在线学习
- python - Tensorflow 2：如何使用 AdamOptimizer.minimize() 更新权重
- azure - 无法将 dotnet core web api 应用发布到 Azure AppService
- windows - winget 源代码库的结构
- c# - '访问被拒绝' IIS 杀死 Windows 进程
- java - 是否缺少正确对齐我的输出的值？
- variables - Apache Tomcat：在 Solaris 11.4 (csh) 上从 7.0.77 升级到 8.5.51
- mysql - 如何在 Node.js 中异步/等待“main”函数，该函数使用 mysql 查询将输出驱动到多个文件？