使用 Flutter 编写一个简单的尺子 App(刻度尺子间隔获取手机)

说干就干，查了一些资料，开始 coding

其实编写这个 App 只需要解决两个问题就行了：

Scaffold( body: CustomPaint( painter: MyCustomPainter(), ),)

接下来 MyCustomPainter 继承 CustomPainter，需要重写 paint 方法。
canvas.drawLine可以从两个坐标之间画一条线。

class MyCustomPainter extends CustomPainter { const MyCustomPainter(); @override void paint(Canvas canvas, Size size) { canvas.drawLine( Offset(0, 10), Offset(50, 10), // 从 0,10 到 50,10 画一条线 Paint() ..color = Colors.black ..strokeWidth = 3); // 线的粗细 } @override bool shouldRepaint(CustomPainter oldDelegate) => false;}

现在能画线了，再多画几条长短不一的线，加上数字，就变成了这样。

手机屏幕上画刻度

上面图中的刻度间隔是自己随意设的，跟现实中的尺子刻度是不相等的，要解决这个问题有两种方法：

第一种方法简单粗暴，直接用尺子量手机，然后手动调整屏幕上刻度的间距，就好了。
这种方法唯一的问题是，在其他手机上刻度就不准了。
这时我调整的间距是 5.95dp，已经跟现实中的尺子非常接近了。

用尺子调整手机刻度间隔

第二种方法就是用算法算出刻度的间隔，这种方法在不同手机上都可以保证刻度的准确性。

Flutter 中我们可以通过 MediaQuery.of(context).size 获取到小米13设备独立像素为Size(392.7, 856.7)dp，通过网上查询小米13屏幕尺寸是 6.36 英寸。

由此可以计算出对角线长度=915.96dp

这样就可以换算出(915.96/6.36)=148.18dp/英寸，148.18/25.4=5.83dp/毫米，上面通过尺子大致估算的是 5.95，这里算出来的精确值是 5.83。

所以我们只需要知道屏幕的尺寸，就能算出每毫米的dp设备独立像素数量，如何获取屏幕尺寸 Flutter 中并没有直接的方法，我们下次重新写一篇文章，讲一讲如何获取屏幕的尺寸。

最终效果图

import 'dart:math';import 'package:flutter/material.dart';class RulerPage extends StatelessWidget { const RulerPage({super.key}); @override Widget build(BuildContext context) { //获取屏幕尺寸。
单位dp double height = MediaQuery.of(context).size.height; double width = MediaQuery.of(context).size.width; // 获取屏幕尺寸，这里根据自己手机修改，后面再写一篇文章讲如何获取屏幕尺寸 double screenInches = 6.36; // 对角线dp长度除于屏幕尺寸 6.36，可得到每英寸多少 dp，即为刻度间隔 double dppinch = sqrt(height height + width width) / screenInches / 10; // 1英寸等于 25.4毫米，除于25.4，可得到每毫米多少 dp double dppmm = sqrt(height height + width width) / screenInches / 25.4; return Scaffold( appBar: AppBar(title: const Text("尺子")), body: Padding( padding: const EdgeInsets.only(top: 8), child: CustomPaint( painter: MyCustomPainter(dppinch, dppmm), //将刻度间隔传到自定义画笔组件 size: Size.infinite, //size 设置为全屏幕 ), )); }}class MyCustomPainter extends CustomPainter { //接受传过来的两个刻度间隔 double mmGap; double inchGap; MyCustomPainter(this.inchGap, this.mmGap); // 定义三种粗细的画笔，用来画刻度线 Paint paint1 = Paint() ..color = Colors.black ..strokeWidth = 1; Paint paint2 = Paint() ..color = Colors.black ..strokeWidth = 2; Paint paint3 = Paint() ..color = Colors.black ..strokeWidth = 3; // 重写 paint 方法，通过循环画刻度线 @override void paint(Canvas canvas, Size size) { int i = 0; while (i mmGap < size.height) { if (i % 10 == 0) { canvas.drawLine(Offset(0, i mmGap), Offset(50, i mmGap), paint3); canvas.drawLine(Offset(size.width - 50, i inchGap), Offset(size.width, i inchGap), paint3); drawNum(i, canvas, size); } else if (i % 5 == 0) { canvas.drawLine(Offset(0, i mmGap), Offset(40, i mmGap), paint2); canvas.drawLine(Offset(size.width - 40, i inchGap), Offset(size.width, i inchGap), paint2); } else { canvas.drawLine(Offset(0, i mmGap), Offset(30, i mmGap), paint1); canvas.drawLine(Offset(size.width - 30, i inchGap), Offset(size.width, i inchGap), paint1); } i++; } drawText(canvas, size); } // 标出刻度数字 void drawNum(int i, Canvas canvas, Size size) { var numPainter = TextPainter( text: TextSpan( text: "${i ~/ 10}", style: const TextStyle(fontSize: 16, color: Colors.black)), textDirection: TextDirection.ltr, textAlign: TextAlign.left); numPainter.layout(); numPainter.paint(canvas, Offset(60, i mmGap - 10)); numPainter.paint(canvas, Offset(size.width - 65, i inchGap - 10)); } // 标出 cm 和 inch 文字 void drawText(Canvas canvas, Size size) { var textPainter = TextPainter( text: const TextSpan( text: "cm inch", style: TextStyle(fontSize: 30, color: Colors.black)), textDirection: TextDirection.ltr, ); textPainter.layout(); textPainter.paint(canvas, Offset(80, size.height / 2)); } @override bool shouldRepaint(CustomPainter oldDelegate) => false;}