根据另一个窗口小部件的位置/大小定位/调整窗口小部件的大小 [英] Positioning/Sizing a widget depending of the position/size of another widget

问题描述

我已经几次在Flutter面对一堵相当大的墙。
动画或构建窗口小部件，这取决于其他窗口小部件的大小/位置。

一些可能是我最扑朔迷离的噩梦的例子：
动态相邻的捕捉小部件。
在CSS中，我们需要这样：

  .root {显示：flex;背景：灰色； padding：4px;}。root> div {background：lightgrey;右边距：5px； padding：5px;}  

 < div class = root > < div>动态高度< br />动态宽度< br />脂肪< br />超级脂肪< / div> < div>动态宽度< br />动态高度< / div>< / div>  

• 父母采用全宽度（不重要）。


• 父母采用最大孩子的身高。


• 孩子身高较小以适合父母的身材


• 孩子的位置彼此相邻

在扑朔迷离中，我认为我们不能一次拥有所有4个点。

现在，如果我们有两个列表和一个动画，其中一个元素从一个清单转到另一个清单？
示例

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

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

解决方案

到回答您原来的布局问题，您可以使用

下面是代码：

  import'package：flutter / material.dart'; 
 
 void main（）{
 runApp（new MyApp（））; 
} 
 
类MyApp扩展了StatelessWidget {
 @override 
 Widget build（BuildContext context）{
 return new MaterialApp（
 home：new MyHomePage（），
）; 
} 
} 
 
类MyHomePage扩展了StatelessWidget {
 @override 
 Widget build（BuildContext context）{
 return new Scaffold（
主体：新填充（
填充：新EdgeInsets.all（10.0），
子代：新IntrinsicHeight（
子代：新容器（
颜色：Colors.grey，
 padding：new EdgeInsets.all（4.0），
 child：new Row（
 mainAxisAlignment：MainAxisAlignment.start，
 crossAxisAlignment：CrossAxisAlignment.stretch，
 child：<窗口小部件> [
个新容器（
个填充：new EdgeInsets.all（5.0），
个边距：new EdgeInsets.only（右：5.0），
颜色：Colors.grey [ 200]，
子元素：新列（
 crossAxisAlignment：CrossAxisAlignment.start，
子元素：< Widget> [
 new Text（'动态高度'），
 new Text（'动态宽度'），
 new Text（'脂肪'），
 new Text（'超级脂肪'），
]，
），
），
新的Container（
填充：new EdgeInsets.all（5.0），
颜色：Colors.grey [200]，
子代：新列（
 crossAxisAlignment：CrossAxisAlignment.start，
子代：< Widget> [
 new Text（'dynamic width'），
 new Text（'动态高度'），
]，
），
），
]，
），
），
），
），
）; 
} 
} 
  

要实现更高级的动画示例，我建议使用

I faced a few times already a quite big wall in Flutter. Animating or building widgets, that depends on other widgets to get their size/position.

A few examples of what could be my worst nightmares in flutter : Snaping widgets next to each other dynamically. In css we'd have this :

.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>

• the parent takes the full width (not important).
• the parent takes the height of the biggest children.
• children with a smaller height stretch to fit the parent
• children are positionned right next to each other

In flutter, I don't think we can have all the 4 points at once.

And now what if we have 2 of these list and an animation where one element go from one list to the other one ? example

Another example. What if we wanted to have a SlideTransition that finish vertically aligned with another widget that has nothing in common ? Like this :

These are totally random examples. I don't need to reproduce the exact same thing. The real question here is : Is there a generic way to do something similar (get the screen size/position) ? Something that will not be specific for this use case and will be easily maintainable later ?

解决方案

To answer your original layout question, you can accomplish this layout using the IntrinsicHeight widget together with CrossAxisAlignment.stretch. It looks like this:

Here's the code:

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'),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

To implement your more advanced animation examples, I would recommend using CustomMultiChildLayout to position the boxes. See the Gallery's animation demo for an example of advanced animation using this class:

这篇关于根据另一个窗口小部件的位置/大小定位/调整窗口小部件的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！