我曾经在 Flutter 中遇到过几次已经相当大的墙。 动画或构建小部件,这取决于其他小部件来获取它们的大小/位置。
一些可能是我最糟糕的噩梦的例子: 动态地将小部件彼此相邻。 在 css 中我们会有这个:
.root {
display: flex;
background: grey;
padding: 4px;
}
.root > div {
background: lightgrey;
margin-right: 5px;
padding: 5px;
}
<div class="root">
<div>
dynamic height
<br/>
dynamic width
<br/>
fat
<br/>
super fat
</div>
<div>
dynamic width
<br/>
dynamic height
</div>
</div>
- 父级占据整个宽度(不重要)。
- parent 取最大 child 的高度。
- 高度较小的 child 会拉伸(stretch)以适应 parent
- children 彼此相邻
在 flutter 中,我认为我们不能同时获得所有 4 个点。
现在,如果我们有 2 个这个列表和一个动画,其中一个元素从一个列表移动到另一个列表,该怎么办? 例子
另一个例子。如果我们想要一个 SlideTransition
与另一个没有共同点的小部件垂直对齐怎么办?
像这样:
这些都是完全随机的例子。我不需要复制同样的东西。 这里真正的问题是:是否有一种 generic 方法可以做类似的事情(获取屏幕尺寸/位置)? 不是特定于该用例并且以后易于维护的东西?
最佳答案
要回答您最初的布局问题,您可以使用 IntrinsicHeight
完成此布局。小部件与 CrossAxisAlignment.stretch
一起使用。它看起来像这样:
代码如下:
import 'package:flutter/material.dart';
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
body: new Padding(
padding: new EdgeInsets.all(10.0),
child: new IntrinsicHeight(
child: new Container(
color: Colors.grey,
padding: new EdgeInsets.all(4.0),
child: new Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
new Container(
padding: new EdgeInsets.all(5.0),
margin: new EdgeInsets.only(right: 5.0),
color: Colors.grey[200],
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Text('dynamic height'),
new Text('dynamic width'),
new Text('fat'),
new Text('super fat'),
],
),
),
new Container(
padding: new EdgeInsets.all(5.0),
color: Colors.grey[200],
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Text('dynamic width'),
new Text('dynamic height'),
],
),
),
],
),
),
),
),
);
}
}
要实现更高级的动画示例,我建议使用 CustomMultiChildLayout
定位框。请参阅画廊的 animation demo使用此类的高级动画示例:
关于flutter - 根据另一个小部件的位置/大小定位/调整小部件的大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45991872/