Flutter 来回播放'的动画;动画容器';从设备屏幕全宽到颤振中特定值的宽度
我想从全屏宽度前后设置动画容器的动画 每当点击Flutter 来回播放'的动画;动画容器';从设备屏幕全宽到颤振中特定值的宽度,flutter,flutter-layout,flutter-animation,Flutter,Flutter Layout,Flutter Animation,我想从全屏宽度前后设置动画容器的动画 每当点击按钮时,我使用一种方法来检查bool和反转动画但容器未设置动画。 我发现由于我的变量animatedContainerWidth用于设置AnimatedContainer宽度,因此在小部件的build方法中设置了宽度,因为我想使用MediaQuery.of(context).size.width 因此,每当调用setState时,点击按钮上的。Build函数传递MediaQuery.of(context).size.width,因此我不获取容器的动画
按钮时,我使用一种方法来检查bool和反转动画但容器未设置动画。
我发现由于我的变量animatedContainerWidth
用于设置AnimatedContainer
宽度,因此在小部件的build
方法中设置了宽度,因为我想使用MediaQuery.of(context).size.width
因此,每当调用setState
时,点击按钮上的。Build函数传递MediaQuery.of(context).size.width
,因此我不获取容器的动画
有人能建议我如何做到这一点吗
我想在AnimatedContainer
的width:
参数中调用一个函数,该函数将屏幕宽度作为参数,然后返回适当的宽度,而不是在该方法中设置animatedContainerWidth
。但这将是一个复杂的方法
如果有人能提出更简单的方法,我们将不胜感激。谢谢大家!
我的代码如下:
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool isOpen = false;
double screenWidth;
double animatedSearchContainerWidth = 342;
void containerAnimation(double _screenWidth) {
isOpen = !isOpen;
isOpen
? animatedSearchContainerWidth = 50.0
: animatedSearchContainerWidth = _screenWidth;
setState(() {});
}
@override
Widget build(BuildContext context) {
screenWidth = MediaQuery.of(context).size.width;
animatedSearchContainerWidth = screenWidth;
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: AnimatedContainer(
duration: Duration(milliseconds: 300),
width: animatedSearchContainerWidth,
height: 50.0,
curve: Curves.easeOut,
color: Colors.redAccent,
),
),
floatingActionButton: FloatingActionButton(
onPressed: () => containerAnimation(screenWidth),
tooltip: 'Animate',
child: Icon(Icons.play_arrow),
),
);
}
}
类MyHomePage扩展StatefulWidget{
MyHomePage({Key,this.title}):超级(Key:Key);
最后的字符串标题;
@凌驾
_MyHomePageState createState()=>\u MyHomePageState();
}
类_MyHomePageState扩展状态{
bool-isOpen=false;
双屏宽;
双动画SearchContainerWidth=342;
空容器动画(双屏幕宽度){
等参=!等参;
等参
?动画SearchContainerWidth=50.0
:animatedSearchContainerWidth=\u屏幕宽度;
setState((){});
}
@凌驾
小部件构建(构建上下文){
screenWidth=MediaQuery.of(context).size.width;
animatedSearchContainerWidth=屏幕宽度;
返回脚手架(
appBar:appBar(
标题:文本(widget.title),
),
正文:中(
子:动画容器(
持续时间:持续时间(毫秒:300),
宽度:动画SearchContainerWidth,
身高:50.0,
曲线:Curves.easeOut,
颜色:Colors.redAccent,
),
),
浮动操作按钮:浮动操作按钮(
按下:()=>容器图像(屏幕宽度),
工具提示:“设置动画”,
子:图标(图标。播放箭头),
),
);
}
}
您正在放置行animatedSearchContainerWidth=screenWidth代码>在build方法中,因此它可以在每个build上运行
import 'dart:math';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(
title: 'title',
),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool isOpen = false;
@override
Widget build(BuildContext context) {
var screenWidth = MediaQuery.of(context).size.width;
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: AnimatedContainer(
duration: Duration(milliseconds: 300),
width: isOpen ? 50.0 : screenWidth,
height: 50.0,
curve: Curves.easeOut,
color: Colors.redAccent,
),
),
floatingActionButton: FloatingActionButton(
onPressed: () => setState(() {
isOpen = !isOpen;
}),
tooltip: 'Animate',
child: Icon(Icons.play_arrow),
),
);
}
}
import'dart:math';
进口“包装:颤振/材料.省道”;
void main()=>runApp(MyApp());
类MyApp扩展了无状态小部件{
@凌驾
小部件构建(构建上下文){
返回材料PP(
标题:“颤振演示”,
主题:主题数据(
主样本:颜色。蓝色,
),
主页:我的主页(
标题:“标题”,
),
);
}
}
类MyHomePage扩展StatefulWidget{
MyHomePage({Key,this.title}):超级(Key:Key);
最后的字符串标题;
@凌驾
_MyHomePageState createState()=>\u MyHomePageState();
}
类_MyHomePageState扩展状态{
bool-isOpen=false;
@凌驾
小部件构建(构建上下文){
var screenWidth=MediaQuery.of(context).size.width;
返回脚手架(
appBar:appBar(
标题:文本(widget.title),
),
正文:中(
子:动画容器(
持续时间:持续时间(毫秒:300),
宽度:等参线?50.0:屏幕宽度,
身高:50.0,
曲线:Curves.easeOut,
颜色:Colors.redAccent,
),
),
浮动操作按钮:浮动操作按钮(
按下时:()=>设置状态(){
等参=!等参;
}),
工具提示:“设置动画”,
子:图标(图标。播放箭头),
),
);
}
}