如何在 Flutter 中为自定义 AppBar 设置动画?
How to animate custom AppBar in Flutter?
我对flutter还没有太多经验,很好奇如何实现自定义的AppBar可以动画
我只想对 AppBar 应用一个简单的动画,它只会改变 AppBar 的高度。据我所知,AppBar 必须是 PreferredSizeWidget,我想为其设置动画以更改高度,我阅读了几篇文章,但大多数文章使用的是 SilverAppBar。
谢谢。
class CustomAppBarRounded extends StatelessWidget implements PreferredSizeWidget{
final String _appBarTitle;
CustomAppBarRounded(this._appBarTitle);
@override
Widget build(BuildContext context) {
return new Container(
child: new LayoutBuilder(builder: (context, constraint) {
final width = constraint.maxWidth * 8;
return new ClipRect(
child: Stack(
children: <Widget>[
new OverflowBox(
maxHeight: double.infinity,
maxWidth: double.infinity,
child: new SizedBox(
width: width,
height: width,
child: new Padding(
padding: new EdgeInsets.only(
bottom: width / 2 - preferredSize.height / 3
),
child: new DecoratedBox(
decoration: new BoxDecoration(
color: Colors.indigo,
shape: BoxShape.circle,
boxShadow: [
new BoxShadow(color: Colors.black54, blurRadius: 10.0)
],
),
),
),
),
),
new Center(
child: new Text("${this._appBarTitle}",
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: Colors.white,
shadows: [
Shadow(color: Colors.black54, blurRadius: 10.0)
]
),
)
),
],
)
);
}),
);
}
@override
Size get preferredSize => const Size.fromHeight(100.0);
}
我已经想出了如何实现我想要的。所以我返回了 PreferredSizeWidget
class CustomRoundedAppBar extends StatelessWidget{
double height = 100;
final String title;
CustomRoundedAppBar(
this.height,
this.title);
@override
Widget build(BuildContext context) {
return PreferredSize(
preferredSize: Size(this.height, this.height),
child: AnimatedContainer(
duration: Duration(seconds: 1),
height: this.height,
child: new LayoutBuilder(builder: (context, constraint){
final width =constraint.maxWidth * 8;
return new ClipRect(
child: Stack(
children: <Widget>[
new OverflowBox(
maxHeight: double.infinity,
maxWidth: double.infinity,
child: new SizedBox(
width: width,
height: width,
child: new Padding(
padding: new EdgeInsets.only(
bottom: width / 2 - this.height / 3
),
child: new DecoratedBox(
decoration: new BoxDecoration(
color: Colors.indigo,
shape: BoxShape.circle,
boxShadow: [
new BoxShadow(color: Colors.black54, blurRadius: 10.0)
],
),
),
),
),
),
new Center(
child: new Text("${this.title}",
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: Colors.white,
shadows: [
Shadow(color: Colors.black54, blurRadius: 10.0)
]
),
)
),
],
)
);
})
),
);
}
}
在脚手架上我有一个动作,当按下按钮时它会改变高度,这必须在 setState()
onPressed: (){
setState(() {
this.height = 200;
this. _appBarTitle = "TEST";
});
},
我对flutter还没有太多经验,很好奇如何实现自定义的AppBar可以动画
我只想对 AppBar 应用一个简单的动画,它只会改变 AppBar 的高度。据我所知,AppBar 必须是 PreferredSizeWidget,我想为其设置动画以更改高度,我阅读了几篇文章,但大多数文章使用的是 SilverAppBar。
谢谢。
class CustomAppBarRounded extends StatelessWidget implements PreferredSizeWidget{
final String _appBarTitle;
CustomAppBarRounded(this._appBarTitle);
@override
Widget build(BuildContext context) {
return new Container(
child: new LayoutBuilder(builder: (context, constraint) {
final width = constraint.maxWidth * 8;
return new ClipRect(
child: Stack(
children: <Widget>[
new OverflowBox(
maxHeight: double.infinity,
maxWidth: double.infinity,
child: new SizedBox(
width: width,
height: width,
child: new Padding(
padding: new EdgeInsets.only(
bottom: width / 2 - preferredSize.height / 3
),
child: new DecoratedBox(
decoration: new BoxDecoration(
color: Colors.indigo,
shape: BoxShape.circle,
boxShadow: [
new BoxShadow(color: Colors.black54, blurRadius: 10.0)
],
),
),
),
),
),
new Center(
child: new Text("${this._appBarTitle}",
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: Colors.white,
shadows: [
Shadow(color: Colors.black54, blurRadius: 10.0)
]
),
)
),
],
)
);
}),
);
}
@override
Size get preferredSize => const Size.fromHeight(100.0);
}
我已经想出了如何实现我想要的。所以我返回了 PreferredSizeWidget
class CustomRoundedAppBar extends StatelessWidget{
double height = 100;
final String title;
CustomRoundedAppBar(
this.height,
this.title);
@override
Widget build(BuildContext context) {
return PreferredSize(
preferredSize: Size(this.height, this.height),
child: AnimatedContainer(
duration: Duration(seconds: 1),
height: this.height,
child: new LayoutBuilder(builder: (context, constraint){
final width =constraint.maxWidth * 8;
return new ClipRect(
child: Stack(
children: <Widget>[
new OverflowBox(
maxHeight: double.infinity,
maxWidth: double.infinity,
child: new SizedBox(
width: width,
height: width,
child: new Padding(
padding: new EdgeInsets.only(
bottom: width / 2 - this.height / 3
),
child: new DecoratedBox(
decoration: new BoxDecoration(
color: Colors.indigo,
shape: BoxShape.circle,
boxShadow: [
new BoxShadow(color: Colors.black54, blurRadius: 10.0)
],
),
),
),
),
),
new Center(
child: new Text("${this.title}",
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: Colors.white,
shadows: [
Shadow(color: Colors.black54, blurRadius: 10.0)
]
),
)
),
],
)
);
})
),
);
}
}
在脚手架上我有一个动作,当按下按钮时它会改变高度,这必须在 setState()
onPressed: (){
setState(() {
this.height = 200;
this. _appBarTitle = "TEST";
});
},