根据另一个窗口小部件的位置/大小定位/调整窗口小部件的大小

Question

我已经在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>

• 父级采用全宽度（不重要）。
• 父母要照顾最大的孩子。
• 身高较小的孩子可以适应父母
• 孩子们彼此相邻放置

连连看，我认为我们不能一次获得所有4分。

现在，如果我们有两个这样的列表和一个动画，其中一个元素从一个列表转到另一个列表，该怎么办？例

另一个例子。如果我们想要一个SlideTransition与另一个没有共同点的小部件垂直对齐的成品怎么办？像这样 ：

这些完全是随机的例子。我不需要复制完全相同的东西。真正的问题是：是否有通用的方法可以做类似的事情（获取屏幕尺寸/位置）？某些不是特定于此用例的东西，以后将易于维护吗？

Answer 1

要回答您原始的布局问题，您可以使用IntrinsicHeightWidget和一起完成此布局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放置框。有关使用此类的高级动画的示例，请参见画廊的动画演示：