Flutter界面元素查找插件widget_finder的使用

Flutter界面元素查找插件widget_finder的使用

Easily find position and size of widget. Additionally, available to receive the size through callback function, using WidgetFinder.sizeNotifier widget.

开始使用

在你的 pubspec.yaml 文件中添加 widget_finder：

dependencies:
  widget_finder:

示例

以下是一个完整的示例，展示了如何使用 widget_finder 插件来查找和获取控件的位置和大小。

import 'dart:math';

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

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final key = GlobalKey();

  Offset? position;
  Size? size;

  double _width = 200;
  double _height = 200;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Widget_Finder Example'),
        ),
        body: Container(
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                // 使用 WidgetFinder.sizeNotifer 来接收控件的大小变化
                WidgetFinder.sizeNotifer(
                  key: key,
                  onSizeChanged: (Size value) {
                    print('Size is changed! : $value');
                  },
                  child: Container(
                    color: Colors.red,
                    width: _width,
                    height: _height,
                  ),
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: MaterialButton(
                        color: Colors.blue,
                        onPressed: () {
                          Random _rand = Random();
                          setState(() {
                            _width = (_rand.nextBool() ? 1 : -1) * _rand.nextInt(100) + 200;
                            _height = (_rand.nextBool() ? 1 : -1) * _rand.nextInt(100) + 200;
                          });
                        },
                        child: Text('Change size!'),
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: MaterialButton(
                        color: Colors.blue,
                        onPressed: () {
                          setState(() {
                            position = WidgetFinder.of(key).topLeft;
                            size = WidgetFinder.of(key).size;
                          });
                        },
                        child: Text('Find!'),
                      ),
                    ),
                  ],
                ),
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text('position of topLeft: $position'),
                ),
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text('size: $size'),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

说明

1. 创建全局键：

   final key = GlobalKey();
   

2. 创建包含全局键的控件：

   WidgetFinder.sizeNotifer(
     key: key,
     onSizeChanged: (Size value) {
       print('Size is changed! : $value');
     },
     child: Container(
       color: Colors.red,
       width: _width,
       height: _height,
     ),
   )
   

3. 查找控件位置和大小：

   position = WidgetFinder.of(key).topLeft;
   size = WidgetFinder.of(key).size;