当用户点击带有动画的不同小部件(兄弟或父)时,我如何展开和折叠小部件?
new Column(
children: <Widget>[
new header.IngridientHeader(
new Icon(
Icons.fiber_manual_record,
color: AppColors.primaryColor
),
'Voice Track 1'
),
new Grid()
],
)
我希望用户能够点击 header.IngridientHeader 然后 Grid 小部件应该切换(如果可见则隐藏或其他方式)
编辑:
我正在尝试做一些在 Bootstrap 中称为 Collapse 的事情。 getbootstrap.com/docs/4.0/components/collapse
编辑 2: header.IngridientHeader 应该一直保持原位 Grid() 是可滚动的(水平)小部件。
最佳答案
如果你想折叠一个小部件到零高度或零宽度,并且折叠时有一个子元素溢出,我建议SizeTransition或 ScaleTransition .
这是一个 ScaleTransition 小部件的示例,该小部件用于折叠四个黑色按钮和状态文本的容器。我的 ExpandedSection 小部件与列一起使用以获得以下结构。
通过 SizeTransition 小部件使用动画的小部件示例:
class ExpandedSection extends StatefulWidget {
final Widget child;
final bool expand;
ExpandedSection({this.expand = false, this.child});
@override
_ExpandedSectionState createState() => _ExpandedSectionState();
}
class _ExpandedSectionState extends State<ExpandedSection> with SingleTickerProviderStateMixin {
AnimationController expandController;
Animation<double> animation;
@override
void initState() {
super.initState();
prepareAnimations();
_runExpandCheck();
}
///Setting up the animation
void prepareAnimations() {
expandController = AnimationController(
vsync: this,
duration: Duration(milliseconds: 500)
);
animation = CurvedAnimation(
parent: expandController,
curve: Curves.fastOutSlowIn,
);
}
void _runExpandCheck() {
if(widget.expand) {
expandController.forward();
}
else {
expandController.reverse();
}
}
@override
void didUpdateWidget(ExpandedSection oldWidget) {
super.didUpdateWidget(oldWidget);
_runExpandCheck();
}
@override
void dispose() {
expandController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return SizeTransition(
axisAlignment: 1.0,
sizeFactor: animation,
child: widget.child
);
}
}
AnimatedContainer也可以,但如果 child 不能调整到零宽度或零高度,Flutter 可能会提示溢出。
https://stackoverflow.com/questions/49029841/
相关文章:
json - 如何从列表中映射 Flutter JSON 字符串?
flutter - 控制和禁用 flutter 中的下拉按钮?
firebase - 如何在 Flutter 中从 Firebase Auth 获取用户 ID?
flutter - 流生成器。错误状态 : Stream has already been list
dart - 在 Dart 中向服务器发出多个独立请求的最佳方式
android - 如何设置 Flutter 应用的构建和版本号
listview - 如何通过 Flutter 中的 RaisedButton 传递/绑定(bind