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

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

以下是我在一次飞行中最糟糕的噩梦的几个例子： 动态捕捉彼此相邻的小部件。 在css中，我们有以下内容：

.root{
显示器：flex；
背景：灰色；
填充：4px；
}
.root>div{
背景：浅灰色；
右边距：5px；
填充物：5px；
}

动态高度


动态宽度


脂肪


超级脂肪
动态宽度


动态高度

要回答您最初的布局问题，您可以使用小部件和

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

导入“包装：颤振/材料.省道”；
void main（）{
runApp（新的MyApp（））；
}
类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回新材料PP(
主页：新建MyHomePage（），
);
}
}
类MyHomePage扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
归还新脚手架(
车身：新衬垫(
填充：新边缘设置。全部（10.0），
孩子：新的内在精神(
子容器：新容器(
颜色：颜色。灰色，
填充：新边缘设置。全部（4.0），
孩子：新的一排(
mainAxisAlignment:mainAxisAlignment.start，
crossAxisAlignment:crossAxisAlignment.stretch，
儿童：[
新容器(
填充：新的边缘设置。全部（5.0），
边距：仅限新边集（右：5.0），
颜色：颜色。灰色[200]，
子：新列(
crossAxisAlignment:crossAxisAlignment.start，
儿童：[
新文本（“动态高度”），
新文本（“动态宽度”），
新文本（“fat”），
新文本（“超级脂肪”），
],
),
),
新容器(
填充：新的边缘设置。全部（5.0），
颜色：颜色。灰色[200]，
子：新列(
crossAxisAlignment:crossAxisAlignment.start，
儿童：[
新文本（“动态宽度”），
新文本（“动态高度”），
],
),
),
],
),
),
),
),
);
}
}

要实现更高级的动画示例，我建议使用来定位长方体。有关使用此类的高级动画示例，请参见图库：

• 父母的身高是最大的孩子的身高：

您可以在行或列中使用MainAxisSize.min，它可以作为父窗口小部件的换行

body: new Container(

 color: Colors.yellowAccent,

 child: new Row(

 mainAxisSize: MainAxisSize.min,

 children: [...],

 ),

)

• 身高较小的儿童伸展以适应父母的要求：

分馏lysizedbox是一个小部件（容器）&根据它的宽度因子和高度因子，所有子小部件都将被设置。您可以将其视为一种比例值。因此，如果我们想要一个水平和垂直占用一半可用空间的容器，我们将执行以下操作：

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("FractionallySizedBox"),
      ),
      body: FractionallySizedBox(
        widthFactor: 0.5,
        heightFactor: 0.5,
        child: Container(
          // this container won't be larger than
          // half of its parent size
        ),
      ),
    );
  }

• 孩子们彼此紧挨着放置：

当您希望将子项彼此相邻放置时，每个颤振布局都使用行和列。

---

啊，很酷，我不知道你可以像那样使用

IntrinsicHeight

。另一方面，对于我展示的动画，

CustomChildLayout

不起作用。不仅CustomChildLayout的大小不能在子级上显示；但它仍然无法解决访问全球小部件的世界位置/大小的问题。你问了很多问题，我认为你应该考虑把它们分解成自己的堆栈溢出问题。如果您使用的是

MultiChildLayoutDelegate

，则小部件的大小将在

performLayout

中提供给您。您可以通过调用

layoutChild

来确定孩子的大小。如果您想获得

renderObject

的全局坐标，您可以使用，尽管这样做可能违反了封装，并且应该在更高的级别上实现自定义布局注意，对于简单的用例，您可以使用

LayoutBuilder

获得小部件周围的大小约束。但是，如果您正在实现

MultiChildLayoutDelegate

，则不需要此选项。谢谢，但正如我所说，MultiChildLayout（也称为CustomChildlayout）不起作用。虽然您可以在

performLayout

中获取子项大小，但无法在

getSize

中访问子项大小。这违反了封装。但是对于某些动画来说，没有其他的解决方案，比如像英雄一样的动画。假设您希望将脚手架主体内的图像可视化地转换为脚手架应用程序栏内的购物车图标。你别无选择。

Row(
    children: [
          YourWidget(),
          YourWidget(),
          YourWidget(),
      ]
 )