Flutter：在构建之前获取小部件大小

Question

有什么方法可以测量尚未构建的小部件的尺寸，但这只是一个变量示例：

列 myColumn = Column(children[......]);

myColumn.iWouldLikeToGetItsHeightAndWidth();

Answer 1

迭代一下，评论中提到的帖子似乎是您正在寻找的解决方案。正如答案中提到的：

\n

\n

要获取屏幕上小部件的大小/位置，您可以使用 GlobalKey\n 获取其 BuildContext，然后查找该特定\n小部件的 RenderBox，其中将包含其全局位置和渲染大小。

\n

只需要注意一件事：如果未呈现小部件，则该上下文可能不存在。这可能会导致 ListView 出现问题，因为\n只有在可能可见的情况下才会呈现小部件。

\n

另一个问题是，您无法在构建调用期间获取小部件的 RenderBox，因为小部件尚未渲染。

\n

\n

为了更好地理解它，您可以访问此博客中的示例。看一下演示代码：

\n

\n

   _getSizes() {\n   }\n\n   _getPositions(){\n   }\n\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      appBar: AppBar(\n      ),\n      body: Column(\n        children: <Widget>[\n          Flexible(\n            flex: 2,\n            child: Container(\n              color: Colors.red,\n            ),\n          ),\n          Flexible(\n            flex: 1,\n            child: Container(\n              color: Colors.purple,\n            ),\n          ),\n          Flexible(\n            flex: 3,\n            child: Container(\n              color: Colors.green,\n            ),\n          ),\n          Spacer(),\n          Padding(\n            padding: const EdgeInsets.only(bottom: 8.0),\n            child: Row(\n              mainAxisAlignment: MainAxisAlignment.spaceAround,\n              crossAxisAlignment: CrossAxisAlignment.center,\n              children: <Widget>[\n                MaterialButton(\n                  elevation: 5.0,\n                  padding: EdgeInsets.all(15.0),\n                  color: Colors.grey,\n                  child: Text("Get Sizes"),\n                  onPressed: _getSizes,\n                ),\n                MaterialButton(\n                  elevation: 5.0,\n                  color: Colors.grey,\n                  padding: EdgeInsets.all(15.0),\n                  child: Text("Get Positions"),\n                  onPressed: _getPositions,\n                )\n              ],\n            ),\n          )\n        ],\n      ),\n    );\n  }\n

\n

\n

\n

在此示例中，重点关注红色面板：

\n

\n

获取 Widget 的大小 为此，我们需要 Widget 有一个 Key，为此我们创建一个 GlobalKey 并将其分配给我们的

\n

小部件。

\n

//creating Key for red panel\nGlobalKey _keyRed = GlobalKey();\n...\n//set key\n    Flexible(\n             flex: 2,\n             child: Container(\n               key: _keyRed,\n               color: Colors.red,\n             ),\n     ),\n

\n

一旦我们的 Widget 已经有了一个 Key，我们就可以使用这个 Key 通过以下方式获取大小：

\n

_getSizes() {\n    final RenderBox renderBoxRed = _keyRed.currentContext.findRenderObject();\n    final sizeRed = renderBoxRed.size;\n    print("SIZE of Red: $sizeRed");\n }\n

\n

如果我们按下“获取尺寸”按钮，\xe2\x80\x99 将在控制台中得到以下结果：

\n

flutter: SIZE of Red: Size(375.0, 152.9)\n

\n

现在我们知道我们的红色面板的宽度为 375.0，高度为 152.9

\n

\n