在颤动中获取 LayoutBuilder 高度

Question

我有一个包含 Expand(LayoutBuilder(Widget that can change vertical size by the user))) 的 Row 和右侧的 Column ，就像代码一样。我希望列的高度等于左侧小部件的高度（垂直长度）。列高也应该能够根据左侧小部件的高度进行更改。

Scaffold(
      backgroundColor: Colors.blue,
      body: Center(
        child: Row(children: <Widget>[
          Expanded(
            child: Container(
              color: Colors.grey,
              child: LayoutBuilder(builder: (context, size) {
                return TextField(
                  maxLines: null,
                );
              }),
            ),
          ),
          Container(
            color: Colors.red,
            child: Column(
              children: <Widget>[
                InkWell(
                  child: Icon(Icons.keyboard_arrow_up),
                  onTap: () {},
                ),
                InkWell(
                  child: Icon(Icons.keyboard_arrow_down),
                  onTap: () {},
                ),
              ],
            ),
          )
        ]),
      ),
    );

看起来与此相似。我的第一个解决方案是以某种方式获取 LayoutBuilder 高度并将其用于列的容器。使其外观和行为与描述相同的任何其他更好的方法都可以。

Answer 1

您可以将Row 放在LayoutBuilder 中，如下所示：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text("")),
    body: Container(
      child: LayoutBuilder(builder: (context, size) {
        return Row(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            Flexible(
              child: Container(
                color: Colors.grey,
                child: TextField(
                  maxLines: null,
                ),
              ),
            ),
            Container(
              color: Colors.red,
              child: Column(
                children: <Widget>[
                  InkWell(
                    child: Icon(Icons.keyboard_arrow_up),
                    onTap: () {},
                  ),
                  InkWell(
                    child: Icon(Icons.keyboard_arrow_down),
                    onTap: () {},
                  ),
                ],
              ),
            )
          ],
        );
      }),
    ),
  );
}

编辑：这将使Row 的高度取其父级的高度。

如果您希望Row 的高度为最小高度，在这种情况下，您可以用IntrinsicHeight 包裹Row，注意IntrinsicHeight 的使用可能很昂贵，所以不要如果你可以重组你的小部件来避免它，就不要每次都使用它。