我有两个连续的可扩展按钮占据了整个屏幕宽度。在左键上单击我希望左键占据整个屏幕宽度,右键通过向右移出屏幕而消失。这是我到目前为止取得的成就:
正如您所注意到的,当没有足够的空间来呈现右按钮时,它会在最后被压扁。我只是想让它继续移出屏幕而不改变它的宽度。我可以通过为按钮设置一行文本来实现这一点,但我希望该解决方案通常适用于所有小部件(看起来右边有足够的空间来呈现它)。
当前解决方案:
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: () {},
),
),
)
],
),
),
),
);
}
}
最佳答案
更新:其他方法是为文本小部件定义 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: () {},
),
),
)
这个(右键被压扁)可以在 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: () {},
),
),
)
],
),
),
),
);
}
}
输出:
关于animation - 如何为可扩展的 Flutter 小部件设置动画以将其滑出屏幕,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54810420/