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

Question

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

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

myColumn.iWouldLikeToGetItsHeightAndWidth();

Answer 1

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

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

只有一件事需要注意：如果 小部件未呈现。这可能会导致 ListView 出现问题 仅当小部件可能可见时才会呈现。

还有一个问题是，在执行过程中无法获取到某个 widget 的 RenderBox 构建调用，因为小部件尚未渲染。

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

   _getSizes() {
   }

   _getPositions(){
   }

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

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

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

小部件。

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

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

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

如果我们按获取尺寸按钮，您将在 控制台：

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

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

Answer 2

您可以使用 mixin 类和

 override afterFirstLayout

并从上下文中获取大小

import 'dart:async';

import 'package:flutter/widgets.dart';

mixin AfterLayoutMixin<T extends StatefulWidget> on State<T> {
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.endOfFrame.then(
      (_) {
        if (mounted) afterFirstLayout(context);
      },
    );
  }

  FutureOr<void> afterFirstLayout(BuildContext context);
}