Question

我有一行，其中包含Expand（LayoutBuilder（Widget可以更改用户的垂直大小）））和右侧的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的高度为最小高度，在这种情况下，您可以将Row用IntrinsicHeight包裹起来，请注意使用{{1 }}可能会很昂贵，因此如果您可以重组窗口小部件以避免它，请不要每次都使用它。

在颤振中获取LayoutBuilder的高度

1 个答案: