Link编码。
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Moving Box')),
body: Stack(
children: <Widget>[
Align(
alignment: FractionalOffset(1, 0),
child: Container(
// Use the properties stored in the State class.
width: _width,
height: _height,
color: Color(0xffe5ee22),
),
),
],
)
// body: _buildBody(context)
);
}
最佳答案
根据您的要点,您计划使用 AnimatedContainer
因此,我尝试以尽可能少的修改为您修复代码
- 必须将 AnimatedContainerApp 包装到 MaterialApp 小部件中
更改此代码:
void main() => runApp(AnimatedContainerApp());
class AnimatedContainerApp extends StatefulWidget {
@override
_AnimatedContainerAppState createState() => _AnimatedContainerAppState();
}
进入这个:
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: AnimatedContainerApp(),
);
}
}
class AnimatedContainerApp extends StatefulWidget {
@override
_AnimatedContainerAppState createState() => _AnimatedContainerAppState();
}
- 将容器更改为动画容器
改变这部分:
child: Container(
// Use the properties stored in the State class.
width: _width,
height: _height,
color: Color(0xffe5ee22),
),
进入这个:
child: AnimatedContainer( // Changed to AnimatedContainer
duration: Duration(seconds: 1), // Duration is mandatory
width: _width,
height: _height,
color: Color(0xffe5ee22),
),
- 调用setState()创建触发动画的按钮
class _AnimatedContainerAppState extends State<AnimatedContainerApp> {
bool isSmall = true;
double _width = 50;
double _height = 50;
void changeSize() {
// Business Logic
if (isSmall) {
setState(() {
_width = 100;
_height = 100;
isSmall = false;
});
} else {
setState(() {
_width = 50;
_height = 50;
isSmall = true;
});
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Moving Box'),
actions: <Widget>[
IconButton(
icon: Icon(Icons.add_to_home_screen),
onPressed: changeSize, // this will toggle size of container
)
],
),
演示
完整代码:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: AnimatedContainerApp(),
);
}
}
class AnimatedContainerApp extends StatefulWidget {
@override
_AnimatedContainerAppState createState() => _AnimatedContainerAppState();
}
class _AnimatedContainerAppState extends State<AnimatedContainerApp> {
bool isSmall = true;
double _width = 50;
double _height = 50;
void changeSize() {
// Toggle State
if (isSmall) {
setState(() {
_width = 100;
_height = 100;
isSmall = false;
});
} else {
setState(() {
_width = 50;
_height = 50;
isSmall = true;
});
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Moving Box'),
actions: <Widget>[
IconButton(
icon: Icon(Icons.add_to_home_screen),
onPressed: changeSize,
)
],
),
body: Stack(
children: <Widget>[
Align(
alignment: FractionalOffset(1, 0),
child: AnimatedContainer( // Changed to AnimatedContainer
duration: Duration(seconds: 1), // Add Duration
width: _width,
height: _height,
color: Color(0xffe5ee22),
),
),
],
),
);
}
}
关于flutter - 代码是正确的,但容器没有移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57561849/