检索呈现的小部件的尺寸答案

【问题标题】：Retrieve the dimensions of a rendered widget检索呈现的小部件的尺寸
【发布时间】：2023-02-15 08:28:25
【问题描述】：

假设 Widget 根据底层数据结构的某些属性具有不同的大小。

我可以在屏幕外渲染 Widget 只是为了测量它的宽度和高度吗？

我该怎么做？

更新 - 2020-09-25

我需要一个渲染小部件的尺寸来分配正确的尺寸来计算并将尺寸分配给小部件树中的项目以进行渲染。

因此，在小部件树中使用它们之前，我需要检索尺寸。

【问题讨论】：

你可以使用CustomSingleChild Layout
有帮助。不幸的是，文档解释了这一点：“但是父母的大小不能取决于孩子的大小”。因为我想布局树，所以父级的大小需要与子树的子级一样大。
所以很可能 boxed 包会有所帮助 - 文档说：“这本质上是 CustomMultiChildLayout 或 CustomPaint 的更强大版本，它允许您手动膨胀，约束和布置每个孩子，它还允许其大小取决于关于其子项的布局。”
当然还有其他可能 - 自定义 RenderBox ;-)
查看ContainerRenderObjectMixin了解更多关于如何实施RenderBox多个孩子的信息

标签： flutter flutter-layout

【解决方案1】：

你可以制作一个小部件（可见或不可见，必要时使用Opacity小部件隐藏它），给它一个GlobalKey，然后使用该键获取其渲染对象，然后从中获取大小。

例如，我在默认的“flutter counter example”项目中添加了 3 行代码。现在单击浮动操作按钮将打印出列的大小。

示例输出：Size(297.0, 741.0)

代码：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final GlobalKey _key = GlobalKey(); // <--- 1. add this line
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
    print(_key.currentContext?.size);  // <--- 2. add this line
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          key: _key,  // <--- 3. add this line
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

【讨论】：