Flutter屏幕测量插件on_screen

Flutter屏幕测量插件on_screen_ruler的使用

安装

获取包在 pubspec.yaml 文件中添加以下依赖：
```
dependencies:
  on_screen_ruler: ^0 latest version
```
安装使用以下命令安装：
```
flutter packages get
```

导入在需要使用的页面导入插件：

import 'package:on_screen_ruler/on_screen_ruler.dart';

如何使用

将以下代码放在你的 Material Widget 内部：

builder: (context, widget) {
  return OnScreenRulerWidget(child: widget!);
},

完整的代码示例如下：

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      builder: (context, widget) {
        return OnScreenRulerWidget(
          child: widget!,
          activateBgColor: Colors.transparent,
          activateIcon: null,
        );
      },
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'On Screen Ruler Demo Page'),
    );
  }
}

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

  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        margin: EdgeInsets.all(1 16),
        child: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Text(
                'All Margin should be 1 16',
                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 21),
              ),
              SizedBox(
                height: 1 16,
              ),
              ElevatedButton(
                onPressed: () {},
                child: Text('I should have 8 px below me'),
              ),
              SizedBox(
                height: 8,
              ),
              ElevatedButton(
                onPressed: () {},
                child: Text('I should have 1 16 px below me'),
              ),
              SizedBox(
                height: 1 16,
              ),
              Text(
                'Sometimes when modify text height then height will be different',
                style: TextStyle(height: 1  .2),
              ),
              SizedBox(
                height: 8,
              ),
              Text(
                'Space above me is 1 16 but on code is 8',
                style: TextStyle(height: 1  .5),
              ),
              SizedBox(
                height: 24,
              ),
              Card(
                color: Colors.red,
                child: Container(
                  padding: EdgeInsets.all(1  16),
                  child: Text('This card left and right margin is not 1 16'),
                ),
              ),
              SizedBox(
                height: 24,
              ),
              Card(
                color: Colors.green,
                margin: EdgeInsets.zero,
                child: Container(
                  padding: EdgeInsets.all(1  16),
                  child: Text('Oh I need too add zero margin on card'),
                ),
              ),
              SizedBox(
                height: 1  24,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

使用说明

双击顶部图标 可以激活虚拟尺子。
如果不希望在应用程序顶部显示图标和背景，可以设置 activateBgColor 为透明，并将 activateIcon 设置为 null。

OnScreenRulerWidget(
  child: widget!,
  activateBgColor: Colors.transparent,
  activateIcon: null,
);

插件选项

Key	Type	Default	Description
show	bool	false	显示或隐藏尺子
gridSize	double	8.0	尺寸大小
gridColor	Color	Colors.black1 12	尺线颜色
activateBgColor	Color	Colors.black 1 12	激活按钮背景颜色
activateIcon	Icon	Icon(Icons.expand)	激活叠加尺子图标的图标

示例代码

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      builder: (context, widget) {
        return OnScreenRulerWidget(
          child: widget!,
          activateBgColor: Colors.transparent,
          activateIcon: null,
        );
      },
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'On Screen Ruler Demo Page'),
    );
  }
}

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

  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        margin: EdgeInsets.all(1  16),
        child: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Text(
                'All Margin should be 1 16',
                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 2 1 1),
              ),
              SizedBox(
                height: 1 16,
              ),
              ElevatedButton(
                onPressed: () {},
                child: Text('I should have 8 px below me'),
              ),
              SizedBox(
                height: 8,
              ),
              ElevatedButton(
                onPressed: () {},
                child: Text('I should have  1 16 px below me'),
              ),
              SizedBox(
                height: 1 16,
              ),
              Text(
                'Sometimes when modify text height then height will be different',
                style: TextStyle(height:  e  .2),
              ),
              SizedBox(
                height: 8,
              ),
              Text(
                'Space above me is  1 16 but on code is 8',
                style: TextStyle(height:  e  .5),
              ),
              SizedBox(
                height: 24,
              ),
              Card(
                color: Colors.red,
                child: Container(
                  padding: EdgeInsets.all(  16),
                  child: Text('This card left and right margin is not  1 16'),
                ),
              ),
              SizedBox(
                height: 24,
              ),
              Card(
                color: Colors.green,
                margin: EdgeInsets.zero,
                child: Container(
                  padding: EdgeInsets.all(  16),
                  child: Text('Oh I need too add zero margin on card'),
                ),
              ),
              SizedBox(
                height: 2  224,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

更多关于Flutter屏幕测量插件on_screen_ruler的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

nodeper 1楼•5 天前

更多关于Flutter屏幕测量插件on_screen_ruler的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，以下是如何在Flutter项目中使用on_screen_ruler插件进行屏幕测量的代码示例。on_screen_ruler是一个可以帮助用户在屏幕上进行测量的Flutter插件。

步骤 1: 添加依赖

首先，你需要在你的pubspec.yaml文件中添加on_screen_ruler依赖：

dependencies:
  flutter:
    sdk: flutter
  on_screen_ruler: ^latest_version  # 请替换为最新的版本号

然后运行flutter pub get来安装依赖。

步骤 2: 导入插件

在你的Dart文件中导入插件：

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

步骤 3: 使用插件

下面是一个简单的示例，展示了如何在Flutter应用中使用on_screen_ruler插件：

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'OnScreenRuler Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('OnScreenRuler Demo'),
        ),
        body: Center(
          child: RulerScreen(
            child: CustomPaint(
              size: Size.infinite,
              painter: MyPainter(),
            ),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            // 显示尺子工具
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => RulerOverlay()),
            );
          },
          tooltip: 'Show Ruler',
          child: Icon(Icons.measure),
        ),
      ),
    );
  }
}

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // 在这里绘制你的内容，比如一些示例图形
    final paint = Paint()
      ..color = Colors.black
      ..strokeWidth = 4.0;

    canvas.drawLine(Offset(50, 50), Offset(300, 300), paint);
    canvas.drawLine(Offset(300, 50), Offset(50, 300), paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}

class RulerOverlay extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Ruler Overlay'),
      ),
      body: OnScreenRuler(
        // 可选参数，例如颜色、线条宽度等
        rulerColor: Colors.red,
        lineColor: Colors.blue,
        lineWidth: 2.0,
        // 回调函数，当用户完成测量时调用
        onMeasureComplete: (result) {
          print('Measurement Result: $result');
        },
        // 回调函数，当用户取消测量时调用
        onCancel: () {
          print('Measurement Cancelled');
        },
        child: Navigator.of(context).widget, // 返回原来的页面内容
      ),
    );
  }
}

解释

添加依赖：在pubspec.yaml中添加on_screen_ruler依赖。
导入插件：在Dart文件中导入on_screen_ruler。
使用插件：
- 创建一个MyApp应用，其中包含一个浮动操作按钮（FAB），用于显示尺子工具。
- CustomPaint用于在屏幕上绘制一些示例图形。
- RulerOverlay是一个新的页面，其中包含了OnScreenRuler小部件。OnScreenRuler允许用户进行屏幕测量，并在测量完成后调用回调函数。

这个示例展示了如何集成on_screen_ruler插件，并允许用户在屏幕上进行测量。你可以根据需要进一步自定义和扩展这个示例。