Flutter动态测量尺寸插件measure_size的使用

measure_size 是一个Flutter插件，它允许您创建一个状态组件，在子组件渲染后立即测量其尺寸。这对于需要根据子组件实际大小进行响应式设计或动画的应用场景非常有用。

注意事项

• 警告：该插件不支持 PreferredSizeWidget 类型的组件。

功能演示

下图展示了如何测量文本大小并绘制一个与之匹配大小的覆盖层：

使用方法

基本用法

import 'package:measure_size/measure_size.dart';

MeasureSize(
  onChange: (Size newSize) {
    // [newSize] 将是 [Widget child] 的显示尺寸
  },
  child: Text('Lorem ipsum dolor sit amet'),
);

MeasureSize属性说明

必填项

• Widget child - 此组件将被显示并测量。

可选项

• void onChange(Size newSize) - 在子组件首次渲染后的下一帧触发的回调函数，参数为新测量到的尺寸。

示例代码

以下是一个完整的示例应用，展示了如何在用户点击按钮时动态改变文本内容，并实时获取和展示文本的新尺寸：

import 'dart:math';
import 'package:measure_size/measure_size.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(ExampleApp());
}

class ExampleApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MeasureSize Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MeasureSizePage(title: 'MeasureSize Demo Home Page'),
    );
  }
}

class MeasureSizePage extends StatefulWidget {
  final String title;

  MeasureSizePage({Key key, this.title}) : super(key: key);

  @override
  _MeasureSizePageState createState() => _MeasureSizePageState();
}

class _MeasureSizePageState extends State<MeasureSizePage> {
  Size _size;
  String _text = 'Tap button to add words';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Stack(
        children: [
          MeasureSize(
            onChange: (newSize) => setState(() => _size = newSize),
            child: Text(_text),
          ),
          if (_size != null)
            Container(
              width: _size.width,
              height: _size.height,
              color: Colors.black.withOpacity(0.1),
            ),
          if (_size != null)
            Positioned(
              bottom: 0,
              right: 0,
              child: Text(
                '${_size.width.toStringAsFixed(2)} x ${_size.height.toStringAsFixed(2)}',
                style: TextStyle(
                  color: Colors.red,
                  fontSize: 12.0,
                ),
              ),
            ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.text_snippet),
        onPressed: () => setState(() {
          _text = '$_text ${['lorem', 'ipsum', 'dolor', 'sit', 'amet'][Random().nextInt(5)]}';
        }),
      ),
    );
  }
}

此示例中，我们通过 MeasureSize 来监控 _text 文本的尺寸变化，并在界面上以半透明黑色背景及红色文字的形式显示当前文本的实际尺寸。每次点击浮动按钮都会随机添加一个单词到 _text 中，从而改变文本宽度，同时更新测量结果。

致谢

感谢 Gene Bo 和 Dev Aggarwal 提供了这个插件的基础代码实现，详情请参考 StackOverflow上的回答。