Flutter动态测量子组件尺寸插件measure_size_builder的使用

简介

MeasureSizeBuilder 是一个用于动态测量Flutter中具有可变大小的小部件渲染尺寸的插件。它能够根据数据或子小部件的变化来返回小部件的尺寸，从而帮助开发者更灵活地处理UI。

主要特点

• 🔑 使用简单
• 🗂️ 允许访问小部件的渲染尺寸值以适当地处理UI
• ⏰ 当小部件大小动态变化时检测并返回更改后的大小

安装步骤

1. 添加依赖

在项目的 pubspec.yaml 文件中的 dependencies 部分添加以下行：

dependencies:
  measure_size_builder: ^1.0.3

2. 安装包

在终端或命令提示符中运行以下命令：

$ flutter pub get

3. 导入包

在Dart代码中添加以下导入语句：

import 'package:measure_size_builder/measure_size_builder.dart';

使用方法

包裹需要测量尺寸的小部件

将你想要测量的小部件包裹在 MeasureSizeBuilder 中。渲染后的小部件尺寸会作为 Size 类型的对象返回。请注意，初始值为 Size(0,0)。

MeasureSizeBuilder(
  builder: (context, size) {
    print('height : ${size.height} width: ${size.width}');
    return Container(
      child: SomeWidget(),
    );
  },
)

根据小部件尺寸有条件地处理UI

在 MeasureSizeBuilder 内部返回的小部件可以访问 size 值以有条件地处理UI。

MeasureSizeBuilder(
  builder: (context, size) {
    return Container(
      color: size.height > 300 ? Colors.red : Colors.blue,
      child: SomeWidget(),
    );
  },
)

测量动态变化的小部件的尺寸

即使像 ExpansionTile 这样的小部件的尺寸发生变化，MeasureSizeBuilder 也能检测到这些变化并返回新的尺寸。你可以通过 sensitivity 属性控制检测小部件尺寸变化的速度。对于 sensitivity 的持续时间值越短，返回小部件尺寸变化的频率越高。但是请注意，频繁的尺寸变化会导致 MeasureSizeBuilder 内部的小部件每次都被重新渲染。

MeasureSizeBuilder(
  sensitivity: Duration.zero, // 设置为零持续时间
  builder: (context, size) {
    print('Widget Size that changes dynamically : $size');
    return const ExpansionTile(
      title: Text('ExpansionTile'),
      subtitle: Text('Trailing expansion arrow icon'),
      children: <Widget>[
        ListTile(title: Text('This is tile number 1')),
      ],
    );
  },
)

完整示例Demo

下面是一个完整的示例程序，展示了如何使用 MeasureSizeBuilder 来动态测量小部件的尺寸，并根据尺寸改变背景颜色。

import 'package:flutter/material.dart';
import 'package:measure_size_builder/measure_size_builder.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('MeasureSizeBuilder Example'),
        ),
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  @override
  Widget build(BuildContext context) {
    return MeasureSizeBuilder(
      builder: (context, size) {
        return Container(
          width: double.infinity,
          height: double.infinity,
          color: size.height > 300 ? Colors.red : Colors.blue,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                'Height: ${size.height.toStringAsFixed(2)}',
                style: TextStyle(color: Colors.white),
              ),
              Text(
                'Width: ${size.width.toStringAsFixed(2)}',
                style: TextStyle(color: Colors.white),
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  setState(() {});
                },
                child: Text('Refresh Size'),
              ),
            ],
          ),
        );
      },
    );
  }
}

这个示例程序创建了一个带有按钮的应用，点击按钮会触发刷新操作，更新显示的尺寸信息和背景颜色。