我曾经在Flutter面对过一段相当大的墙 . 动画或构建小部件,取决于其他小部件以获取其大小/位置 .
可能是我最糟糕的噩梦的几个例子:动态地 grab 小部件彼此相邻 . 在CSS中我们有这个:
.root {
display: flex;
background: grey;
padding: 4px;
}
.root > div {
background: lightgrey;
margin-right: 5px;
padding: 5px;
}
<div class="root">
<div>
dynamic height
dynamic width
fat
super fat
</div>
<div>
dynamic width
dynamic height
</div>
</div>
-
父级采用全宽(不重要) .
-
父母占据最大孩子的身高 .
-
具有较小高度的儿童伸展以适合父母
-
孩子们彼此相邻
在颤动中,我认为我们不能同时获得所有4分 .
现在如果我们有2个这样的列表和一个动画,其中一个元素从一个列表到另一个列表怎么办?例
另一个例子 . 如果我们想让 SlideTransition
与另一个没有共同点的小部件垂直对齐怎么办?像这样 :
这些是完全随机的例子 . 我不需要重现完全相同的东西 . 这里真正的问题是:是否有一种通用的方法来做类似的事情(获取屏幕尺寸/位置)?这个用例不具体的东西,以后可以轻松维护吗?
1 回答
要回答原始布局问题,可以使用IntrinsicHeight小部件和
CrossAxisAlignment.stretch
来完成此布局 . 它看起来像这样:这是代码:
要实现更高级的动画示例,我建议使用CustomMultiChildLayout来定位框 . 有关使用此类的高级动画示例,请参阅图库的animation demo: