从gif和下面的代码中可以看到,我有一个容器和一个文本小部件,都 Package 在一个英雄小部件中。
当点击容器时,第二个页面打开。我想为两个小部件都制作一个英雄动画。
容器的动画效果很好。但是文本在过渡过程中似乎失去了风格。
有办法修吗?
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const HomeScreen(),
routes: {
HomeScreen.routName: (context) => const HomeScreen(),
SecondSceen.routeName: (context) => const SecondSceen(),
},
);
}
}
class HomeScreen extends StatelessWidget {
static const routName = '/home-screen';
const HomeScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(children: [
Align(
alignment: Alignment.bottomCenter,
child: InkWell(
onTap: () => Navigator.of(context).pushNamed(SecondSceen.routeName),
child: Hero(
tag: 'box',
child: Container(
color: Colors.amber,
width: MediaQuery.of(context).size.width * 0.8,
height: 210,
),
),
),
),
Align(
alignment: Alignment.bottomCenter,
child: SizedBox(
width: MediaQuery.of(context).size.width * 0.8,
height: 210,
child: Padding(
padding: const EdgeInsets.fromLTRB(16, 16, 8, 16),
child: Column(
children: const [
Hero(
tag: 'text',
child: Text(
"MY HEADER",
style:
TextStyle(fontSize: 28, fontWeight: FontWeight.bold),
),
),
],
),
),
),
),
]),
);
}
}
class SecondSceen extends StatelessWidget {
static const routeName = '/note-screen';
const SecondSceen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
extendBodyBehindAppBar: true,
appBar: AppBar(
backgroundColor: Colors.transparent,
shadowColor: Colors.transparent,
foregroundColor: Colors.black,
centerTitle: true,
title: const Hero(
tag: 'text',
child: Text(
"MY HEADER",
style: TextStyle(fontSize: 28, fontWeight: FontWeight.bold),
),
),
),
body: Stack(children: [
Hero(
tag: 'box',
child: Container(
color: Colors.amber,
),
),
]),
);
}
}
1条答案
按热度按时间vxf3dgd41#
不要使用单独的
TextStyle
对象,而是使用一些来自上下文的样式。这样,即使在动画中,样式也将基于MaterialApp
的Theme
。对于这两个
Text
小工具,请将以下内容替换为:尝试:
(You将需要删除
const
关键字,因为它们不再是常量。)您可以使用
copyWith
轻松自订任何内建样式,例如:一般来说,我认为使用
Theme
样式是一个很好的做法。