工具箱APP开发（08）：直尺开发-171主机测评

视频链接：哔哩哔哩

直尺功能开发

上一节我们讲解了工具箱 App 的分贝仪功能的开发，本节我们将讲解直尺功能的开发流程。

和分贝仪功能开发流程类似，我们接下来去修改直尺的的页面信息

在工作台的项目列表中找到工具箱 App，点击【项目菜单】->【开发文档】进入到需求文档页面。

编辑页面信息

点击切换到页面菜单，选中 RulerMeasurement (直尺测量页面)。

点击编辑按钮，对页面信息进行修改

功能详情

功能详情填写：

支持通过拖动 X 轴和 Y 轴进行直尺测量，实现二维距离计算。
拖动过程中实时计算并显示当前测量的水平距离（X）与垂直距离（Y）。
根据 X、Y 轴位移计算总测量长度，用于表示实际测量结果

参考页面

放入下图：

变量列表

进入变量列表，点击添加变量：

变量名称变量类型是否为数组默认值变量描述

data

Map

否

尺子的x轴与y轴的值

配置流程

在流程设计中，填写以下流程：

点击保存按钮
　　跳出300*400的弹窗，并向弹窗中传入data参数
点击历史记录按钮
　　携带type参数跳转到历史记录页面

点击保存按钮保存数据

页面搭建

我们先看一下需求中的页面布局结构：

页面顶部为导航栏，标题为「直尺」，右侧有保存图标按钮以及历史记录图标按钮
下方是直尺的测量页面

1. 点击右上角跳转到开发页面，选中“直尺测量页面“页面，开始页面设计。

2. 点击小部件面板图标进入小部件面板

3.在页面预览区域点击顶部导航栏图标，打开添加顶部导航

4. 拖动文本组件到导航栏中间，点击选中刚拖动的文本小部件，右侧出现小部件的配置页面，并配置如下内容

文本内容：直尺
字号：18
字体颜色：#FFFFFFFF

5. 拖动按钮到导航栏右侧，选中按钮然后在右侧的属性编辑器中配置属性，属性信息如下：

宽：40
高：40
背景颜色：#00FCFCFC
阴影大小：0

6.拖动图标到按钮中，然后在右侧的属性编辑器中配置属性，属性信息如下：

图标选择：保存图标
图标大小：24
图标颜色：#FFFFFF

7.拖动按钮到导航栏右侧，选中按钮然后在右侧的属性编辑器中配置属性，属性信息如下：

宽：40
高：40
背景颜色：#00FCFCFC
阴影大小：0

8.拖动图标到按钮中，然后在右侧的属性编辑器中配置属性，属性信息如下：

图标选择：历史图标
图标大小：24
图标颜色：#FFFFFF

9.点击左侧自定义管理图标，并选中自定义小部件，点击创建小部件按钮

10.点击下一步，在小部件上传中填写如下内容后点击下一步

小部件名称：直尺
小部件图片：自定义
小部件类型：Ruler
小部件类名：Ruler
项目入参：
- 标题：初始值
- 变量名：data
- 变量类型：Map
- 是否为数组：否
- 描述：由父组件传入的初始值
代码块：

import 'dart:math';

import 'package:display_metrics/display_metrics.dart';
import 'package:flutter/material.dart';
import 'dart:math' as math;

class RulerTest extends StatefulWidget {
const RulerTest({super.key});

@override
State<RulerTest> createState() => _RulerTestState();
}

class _RulerTestState extends State<RulerTest> {
Map data = {};

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("测试"),
actions: [
IconButton(
icon: Icon(Icons.abc),
onPressed: () {
print("当前的值:${data}");
},
)
],
),
body: Column(
children: [
Ruler(data: data),
],
),
);
}
}

class Ruler extends StatelessWidget {
const Ruler({
super.key,
this.data = const {"x": 0.0, "y": 0.0},
});
final Map data;

@override
Widget build(BuildContext context) {
return Expanded(
child: DisplayMetricsWidget(
child: RulerPage(data: data),
),
);
}
}

class RulerPage extends StatefulWidget {
const RulerPage({
super.key,
this.data = const {"x": 0.0, "y": 0.0},
});
final Map data;

@override
State<RulerPage> createState() => _RulerPageState();
}

class _RulerPageState extends State<RulerPage> {
// 大画布尺寸（可以改）
double canvasWidth = 2000;
double canvasHeight = 1500;

// 直尺宽度和高度占用
final double rulerThickness = 40;

// 两条可拖动参考线的初始位置（相对于画布左上角）
double guideX = 150;
double guideY = 120;

// 将像素转换为你想要的单位（这里直接返回像素，可按需修改）

double pxToUnit(double px) {
// 返回厘米单位
return px / _pxPerCm!;
}

@override
void initState() {
super.initState();
// 获取屏幕的宽高
WidgetsBinding.instance.addPostFrameCallback((_) {
Future.delayed(const Duration(milliseconds: 500), () {
_initMetrics();
});
});
}

double? _pxPerCm;

Future<void> _initMetrics() async {
final metrics = DisplayMetrics.of(context);

final ppi = metrics.ppi; // 每英寸像素数
final devicePixelRatio = MediaQuery.of(context).devicePixelRatio;

final pxPerCm = ppi / 2.54; // 每厘米多少物理像素
final logicalPx = pxPerCm / devicePixelRatio; // 转成逻辑像素单位

setState(() {
_pxPerCm = logicalPx; // 更新状态
double x = 0;
double y = 0;
try {
if (widget.data["x"] != null) {
x = double.parse("${widget.data['x']}") * _pxPerCm!;
}
} catch (e) {}
try {
if (widget.data["y"] != null) {
y = double.parse("${widget.data['y']}") * _pxPerCm!;
}
} catch (e) {}

guideX = x;
guideY = y;
setState(() {});
});
}

@override
Widget build(BuildContext context) {
// 整体使用Stack布局：左上角留出直尺区域
return Scaffold(
body: _pxPerCm == null
? const Center(child: CircularProgressIndicator())
: LayoutBuilder(builder: (context, constraints) {
return Stack(children: [
// 顶部直尺（横向）
Positioned(
left: rulerThickness,
top: 0,
right: 0,
height: rulerThickness,
child: IgnorePointer(
// 让下方滚动捕获手势
ignoring: true,
child: RulerPainterWidget(
length: canvasWidth,
thickness: rulerThickness,
isHorizontal: true,
cmPx: _pxPerCm!),
),
),

// 左侧直尺（竖向）
Positioned(
left: 0,
top: rulerThickness,
width: rulerThickness,
bottom: 0,
child: IgnorePointer(
ignoring: true,
child: RulerPainterWidget(
length: canvasHeight,
thickness: rulerThickness,
isHorizontal: false,
cmPx: _pxPerCm!),
),
),

// 左上角空白（原点标记）
Positioned(
left: 0,
top: 0,
width: rulerThickness,
height: rulerThickness,
child: Container(
color: Colors.grey.shade200,
child: const Center(
child: Text('0,0', style: TextStyle(fontSize: 12))),
),
),
// 主内容：水平与竖直两个方向的滚动区域（实现大画布可滚动）
Positioned(
left: rulerThickness,
top: rulerThickness,
right: 0,
bottom: 0,
child: SizedBox(
width: canvasWidth,
height: canvasHeight,
child: Stack(
children: [
// 画布背景（可替换为实际内容）
Container(color: Colors.white),

// 竖直参考线（可拖）
Positioned(
left: guideX.clamp(0.0, canvasWidth – 1),
top: 0,
bottom: 0,
child: DraggableGuideVertical(
initialX: guideX,
onDrag: (dx) {
// 这里 dx 是相对父级的局部增量
setState(() {
// 需要将偏移考虑进来？我们在外部直接用绝对坐标
guideX = (dx).clamp(0.0, canvasWidth – 1);
widget.data['x'] =
pxToUnit(guideX).toStringAsFixed(1);
widget.data["y"] = widget.data["y"] ?? 0;
});
},
getValue: () {
// 计算实际显示值：在画布坐标系中，左上角为0
// 还可以把 scroll offset 考虑在内，如果你要显示相对于屏幕的值的话
return pxToUnit(guideX);
},
),
),

// 横向参考线（可拖）
Positioned(
top: guideY.clamp(0.0, canvasHeight – 1),
left: 0,
right: 0,
child: DraggableGuideHorizontal(
initialY: guideY,
onDrag: (dy) {
setState(() {
guideY = (dy).clamp(0.0, canvasHeight – 1);
widget.data["x"] = widget.data["x"] ?? 0;
widget.data['y'] =
pxToUnit(guideY).toStringAsFixed(1);
});
},
getValue: () => pxToUnit(guideY),
),
),
],
),
),
),
]);
}),
);
}
}

/// 画布上的细格（可选）
class GridPainter extends CustomPainter {
final double spacing;
GridPainter({this.spacing = 50});
@override
void paint(Canvas canvas, Size size) {
final paint = Paint()
..color = Colors.grey.shade300
..strokeWidth = 0.5;
for (double x = 0; x < size.width; x += spacing) {
canvas.drawLine(Offset(x, 0), Offset(x, size.height), paint);
}
for (double y = 0; y < size.height; y += spacing) {
canvas.drawLine(Offset(0, y), Offset(size.width, y), paint);
}
}

@override
bool shouldRepaint(covariant GridPainter oldDelegate) => false;
}

/// 绘制直尺（水平或垂直）
class RulerPainterWidget extends StatefulWidget {
final double length; // 画布对应的长度（像素）
final double thickness; // 直尺占用的宽或高
final bool isHorizontal;
final double cmPx; // 1cm 对应的像素

const RulerPainterWidget({
super.key,
required this.length,
required this.thickness,
required this.isHorizontal,
required this.cmPx,
});

@override
State<RulerPainterWidget> createState() => _RulerPainterWidgetState();
}

class _RulerPainterWidgetState extends State<RulerPainterWidget> {
@override
Widget build(BuildContext context) {
return CustomPaint(
size: widget.isHorizontal
? Size(widget.length, widget.thickness)
: Size(widget.thickness, widget.length),
painter: _RulerPainter(
length: widget.length,
thickness: widget.thickness,
isHorizontal: widget.isHorizontal,
cmPx: widget.cmPx,
),
);
}
}

class _RulerPainter extends CustomPainter {
final double length;
final double thickness;
final bool isHorizontal;
final double cmPx; // 1cm 对应的像素

_RulerPainter({
required this.length,
required this.thickness,
required this.isHorizontal,
required this.cmPx,
});

@override
void paint(Canvas canvas, Size size) {
final bg = Paint()..color = Colors.grey.shade200;
canvas.drawRect(Offset.zero & size, bg);

final tickPaint = Paint()..color = Colors.black;
const textStyle = TextStyle(fontSize: 10, color: Colors.black);

final mmPx = cmPx / 10; // 每1mm对应的像素
final totalMm = (length / mmPx).floor(); // 总共多少毫米

for (int i = 0; i <= totalMm; i++) {
final pos = i * mmPx;
double tickLength = thickness * 0.25; // 默认短线（1mm）

// 每5mm是中线
if (i % 5 == 0) {
tickLength = thickness * 0.45;
}

// 每10mm(1cm)是长线并标数字
if (i % 10 == 0) {
tickLength = thickness * 0.6;
final cmValue = (i / 10).round();
final tp = TextPainter(
text: TextSpan(text: '$cmValue', style: textStyle),
textDirection: TextDirection.ltr,
)..layout();

if (isHorizontal) {
tp.paint(
canvas, Offset(pos + 2, thickness – tickLength – tp.height – 2));
} else {
canvas.save();
canvas.translate(2 + tp.height, pos – tp.width / 2);
canvas.rotate(-math.pi / 2);
tp.paint(canvas, Offset.zero);
canvas.restore();
}
}

// 绘制线
if (isHorizontal) {
canvas.drawLine(
Offset(pos, thickness),
Offset(pos, thickness – tickLength),
tickPaint,
);
} else {
canvas.drawLine(
Offset(thickness, pos),
Offset(thickness – tickLength, pos),
tickPaint,
);
}
}
}

@override
bool shouldRepaint(covariant _RulerPainter oldDelegate) {
return oldDelegate.length != length ||
oldDelegate.thickness != thickness ||
oldDelegate.cmPx != cmPx;
}
}

/// 可拖动的竖线组件
class DraggableGuideVertical extends StatefulWidget {
final double initialX;
final void Function(double newX) onDrag;
final double Function() getValue;

const DraggableGuideVertical({
super.key,
required this.initialX,
required this.onDrag,
required this.getValue,
});

@override
State<DraggableGuideVertical> createState() => _DraggableGuideVerticalState();
}

class _DraggableGuideVerticalState extends State<DraggableGuideVertical> {
late double x;

@override
void initState() {
super.initState();
x = widget.initialX;
}

@override
void didUpdateWidget(covariant DraggableGuideVertical oldWidget) {
super.didUpdateWidget(oldWidget);
x = widget.initialX;
}

@override
Widget build(BuildContext context) {
// thin clickable area with visible vertical line
return GestureDetector(
behavior: HitTestBehavior.translucent,
onHorizontalDragUpdate: (details) {
setState(() {
x += details.delta.dx;
widget.onDrag(x);
});
},
child: MouseRegion(
cursor: SystemMouseCursors.resizeColumn,
child: Container(
width: 30, // 点击热区（包含线）
child: Stack(
// 允许超出
clipBehavior: Clip.none,
children: [
Positioned(
left: 0, // 线在中间
top: 0,
bottom: 0,
child: Container(width: 2, color: Colors.red.withOpacity(0.9)),
),
Positioned(
bottom: 0,
left: -40,
child: Container(
width: 80,
height: 40,
decoration: const BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(40),
topRight: Radius.circular(40),
),
),
alignment: Alignment.center,
child: Text(
"${widget.getValue().toStringAsFixed(1)} cm",
style: const TextStyle(color: Colors.white, fontSize: 12),
),
),
),
],
),
),
),
);
}
}

/// 可拖动的横线组件
class DraggableGuideHorizontal extends StatefulWidget {
final double initialY;
final void Function(double newY) onDrag;
final double Function() getValue;

const DraggableGuideHorizontal({
super.key,
required this.initialY,
required this.onDrag,
required this.getValue,
});

@override
State<DraggableGuideHorizontal> createState() =>
_DraggableGuideHorizontalState();
}

class _DraggableGuideHorizontalState extends State<DraggableGuideHorizontal> {
late double y;

@override
void initState() {
super.initState();
y = widget.initialY;
}

@override
void didUpdateWidget(covariant DraggableGuideHorizontal oldWidget) {
super.didUpdateWidget(oldWidget);
y = widget.initialY;
}

@override
Widget build(BuildContext context) {
return GestureDetector(
behavior: HitTestBehavior.translucent,
onVerticalDragUpdate: (details) {
setState(() {
y += details.delta.dy;
widget.onDrag(y);
});
},
child: MouseRegion(
cursor: SystemMouseCursors.resizeRow,
child: SizedBox(
height: 30,
child: Stack(
clipBehavior: Clip.none,
children: [
Positioned(
left: 0,
right: 0,
top: 0,
child:
Container(height: 2, color: Colors.blue.withOpacity(0.9)),
),
Positioned(
right: -20,
top: -20,
child: Transform.rotate(
angle: -pi / 2,
child: Container(
width: 80,
height: 40,
decoration: const BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(40),
topRight: Radius.circular(40),
),
),
alignment: Alignment.center,
child: Text(
"${widget.getValue().toStringAsFixed(1)} cm",
style: const TextStyle(color: Colors.white, fontSize: 12),
),
),
),
),
],
),
),
),
);
}
}

11.点击返回小部件列表，我们可以看到刚才添加的小部件已经显示在列表中了

12.点击小部件面板图标，在我的小部件中找到直尺小部件

13.拖动直尺小部件到自动扩展布局中，然后在右侧的属性编辑器中配置属性，属性信息如下：

初始值：data

14.点击页面管理，点击添加页面图标

15.点击新组件，在创建空白页面中点击创建页面

16.组件信息添加以下内容后点击保存

组件名称：saveRuler
组件别名：保存尺子数据弹窗
组件描述：通过此弹窗保存尺子数据

17.选中自定义组件，配置如下内容

宽：300
高：400

18.拖动容器到自定义组件中，选中容器并做以下配置：

宽：无限
高：无限
圆角：10
内边距：10

背景颜色：#FFFFFFFF

19.拖动上下布局到容器中，然后在右侧的属性编辑器中配置属性，属性信息如下：

主轴对齐：两端对齐
次轴对齐：居中对齐

20.拖动左右布局到上下布局中，然后在右侧的属性编辑器中配置属性，属性信息如下：

主轴对齐：两端对齐
次轴对齐：居中对齐

21.拖动容器到左右中，然后在右侧的属性编辑器中配置属性，属性信息如下：

宽：50
高：80
背景颜色：#00FFFFFF

22.拖动文本小部件到左右布局中，然后在右侧的属性编辑器中配置属性，属性信息如下：

文本内容：保存
文本大小：28
字体粗细：700

23.拖动按钮小部件左右内容中，然后在右侧的属性编辑器中配置属性，属性信息如下：

宽：50
高：50
背景颜色：#00FCFCFC
阴影大小：0

24.拖动图标到按钮小部件中，然后在右侧的属性编辑器中配置属性，属性信息如下：

图标选择：关闭图标
图标大小：30
图标颜色：#FF9E9E9E

25.拖动上下布局到上下布局中，然后在右侧的属性编辑器中配置属性，属性信息如下：

26.拖动容器到上下布局中，然后在右侧的属性编辑器中配置属性，属性信息如下：

宽：无限
高：60
下边框
- 样式：第二个图标
- 宽度：1
- 颜色：#FFCCCCCC
背景颜色：#00FFFFFF
对齐方式居中

27.拖动左右布局到容器中

28.拖动文本到左右布局中，然后在右侧的属性编辑器中配置属性，属性信息如下：

文本内容：X:
字体大小：16
字体粗细：700

29.拖动文本到左右布局中，然后在右侧的属性编辑器中配置属性，属性信息如下：

文本内容：${data['x']}
字体大小：16

30.在部件树中选中容器，右击点击复制，选中上下布局，右键选择粘贴

31.选中刚粘贴的X:文本小部件，并改为Y:

32.选中刚粘贴的${data['x']}文本小部件，并改为${data['y']}

33.拖动左右布局到上下布局中

34.拖动文本到左右布局中，然后在右侧的属性编辑器中配置属性，属性信息如下：

文本内容：备注：
字体大小：16
字体粗细：700

35：拖动容器到左右布局中，然后在右侧的属性编辑器中配置属性，属性信息如下：

宽：200
高：50
下边框
- 样式：第二个图标
- 宽度：1
- 颜色：#FFCCCCCC
背景色：#00FFFFFF

36.点击右上角的页面设置，添加一个变量

变量名：note
变量类型：String
变量描述：备注内容

37.点击小部件面板，拖动文本输入框到容器中，然后在右侧的属性编辑器中配置属性，属性信息如下：

数据绑定：note
宽：200
高：50
输入装饰属性
- 边框：无

38.拖动左右布局到上下布局中，然后在右侧的属性编辑器中配置属性，属性信息如下：

主轴对齐：居中
次轴对齐：居中

39.拖动按钮到左右布局中，然后在右侧的属性编辑器中配置属性，属性信息如下：

宽：160
高：40
背景颜色：Primary
阴影大小：4
圆角：10

40.拖动文本到按钮中，然后在右侧的属性编辑器中配置属性，属性信息如下：

文本内容：保存
字体粗细：500
字体颜色：#FFFFFFFF

至此页面搭建完成

配置逻辑（动作流程图）

配置关闭逻辑

1.点击关闭按钮，在右侧配置中选择动作，打开动作 → 点击编辑流程图

2.在单击事件中添加一个动作

动作类型：导航，选中关闭弹窗、抽屉等

配置保存按钮逻辑

1.点击关闭按钮，在右侧配置中选择动作，打开动作 → 点击编辑流程图

2.在单击事件中添加一个动作并选中

动作类型：自定义代码块
新增自定义代码块
- 代码块名称：保存数据
- 自定义代码块

void function(){
String id = DateTime.now().toString().substring(0, 19);
String x = data['x'];
String y = data['y'];
SQLiteUtil().execute(
'''INSERT INTO data (id, x, y, note, type) values ( '$id', '$x', '$y', '$note', 'ruler')''');
}