[英]How to animate expandable Flutter widget to slide it out of the screen
I have two expandable buttons in a row occupied all screen width. 我连续有两个可扩展按钮占据了所有屏幕宽度。 On left button click I want left button to occupy whole screen width and right button to disappear by siding right, out of the screen. 在左侧按钮上,单击我希望左侧按钮占据整个屏幕宽度,并希望通过向右偏出屏幕来使右侧按钮消失。 Here is what I achieved so far: 这是我到目前为止所取得的成就:
As you noticed, the right button gets squashed at the end when there is no enough space to render it. 正如您所注意到的,当没有足够的空间可渲染它时,右键会在最后被压缩。 I just want it to continue moving out of the screen without changing it's width. 我只希望它继续移出屏幕而不改变其宽度。 I could achieve this by setting text one line for button, but I want the solution to work in general for all widgets (to look like there is the space to the right enough to render it). 我可以通过为按钮设置一行文本来实现此目的,但是我希望该解决方案总体上适用于所有小部件(看起来右边有足够的空间可以呈现它)。
Current solution: 当前解决方案:
import 'package:flutter/material.dart';
void main() => runApp(TestAnimation());
class TestAnimation extends StatefulWidget {
@override
_TestAnimationState createState() => _TestAnimationState();
}
class _TestAnimationState extends State<TestAnimation> with SingleTickerProviderStateMixin {
AnimationController _animationController;
Animation _animation;
@override
void initState() {
super.initState();
_animationController = AnimationController(duration: Duration(seconds: 2), vsync: this);
_animation = IntTween(begin: 100, end: 0).animate(_animationController);
_animation.addListener(() => setState(() {}));
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Row(
children: <Widget>[
Expanded(
flex: 100,
child: OutlineButton(
child: Text("Left"),
onPressed: () {
if (_animationController.value == 0.0) {
_animationController.forward();
} else {
_animationController.reverse();
}
},
),
),
Expanded(
flex: _animation.value,
// Uses to hide widget when flex is going to 0
child: SizedBox(
width: 0,
child: OutlineButton(
child: Text(
"Right",
),
onPressed: () {},
),
),
)
],
),
),
),
);
}
}
UPDATE: Other way would to define TextOverflow
for Text Widget. 更新:其他方式将为文本小部件定义TextOverflow
。
Expanded(
flex: _animation.value,
// Uses to hide widget when flex is going to 0
child: SizedBox(
width: 0.0,
child: OutlineButton(
child: Text(
"Right",
overflow: TextOverflow.ellipsis, // Add this
),
onPressed: () {},
),
),
)
This ( right button gets squashed) can be solved with help of FittedBox
widget. 可以使用FittedBox
小部件来解决此问题(右键被压扁) 。
import 'package:flutter/material.dart';
void main() => runApp(TestAnimation());
class TestAnimation extends StatefulWidget {
@override
_TestAnimationState createState() => _TestAnimationState();
}
class _TestAnimationState extends State<TestAnimation> with SingleTickerProviderStateMixin {
AnimationController _animationController;
Animation _animation;
@override
void initState() {
super.initState();
_animationController = AnimationController(duration: Duration(seconds: 2), vsync: this);
_animation = IntTween(begin: 100, end: 0).animate(_animationController);
_animation.addListener(() => setState(() {}));
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Row(
children: <Widget>[
Expanded(
flex: 100,
child: OutlineButton(
child: Text("Left"),
onPressed: () {
if (_animationController.value == 0.0) {
_animationController.forward();
} else {
_animationController.reverse();
}
},
),
),
Expanded(
flex: _animation.value,
// Uses to hide widget when flex is going to 0
child: SizedBox(
width: 0.0,
child: OutlineButton(
child: FittedBox( //Add this
child: Text(
"Right",
),
),
onPressed: () {},
),
),
)
],
),
),
),
);
}
}
output: 输出:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.