工具箱APP开发（06）：水平仪

原创于 2026-01-09 13:19:47 发布 · 635 阅读

CC 4.0 BY-SA版权

文章标签：

6 篇文章

订阅专栏

视频链接：哔哩哔哩

上一节我们讲解了工具箱 App 的指南针功能的开发，本节我们将讲解水平仪功能的开发流程。

和指南针功能开发流程类似，我们接下来去修改水平仪的的页面信息

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

功能详情填写：

本功能通过加速度传感器实时获取设备在 x 轴 和 y 轴 上的加速度值（范围为 -9.8 ~ 9.8 m/s²），用于计算小球在水平仪中的位置变化。
根据外圈（大圆）与内圈（小圆）之间的最大半径差（即 r₍大₎ - r₍小₎），确定小球的最大可移动范围。
随后，按照加速度值与该最大距离的比例，计算小球的偏移量，并通过 水平位移 与 垂直位移的变换（Transform） 实现小球在界面中的滚动效果。

放入下图：

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

变量名称	变量类型	是否为数组	默认值	变量描述
x	Double	否	0	x的加速度
y	Double	否	0	y的加速度

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

页面初始化：
监听加速度传感器，并将数值赋值给x,y

页面销毁：取消监听加速度传感器

点击保存按钮保存数据

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

1. 点击右上角 跳转到开发页面，选中“水平仪”页面，开始页面设计。

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

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

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

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

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

文本内容： ${max((x * 90 / 9.8).abs().toInt(), (y * 90 / 9.8).abs().toInt())}°
- 我们可以使用${}来包裹一个变量值
- (x * 90 / 9.8).abs().toInt() 因为x的加速值，范围是-9.8~9.8，这里我是把范围转换成了-90~90，正好对应着手机竖着和反着
- max(a,b)代表着两者取最大值
打开“显示模拟预览文本”并填写预览文本为 45° ，当我们使用变量表示内容后可能会导致内容过长或者显示内容不符合预期，那么我们可以使用模拟预览文本。
字体大小：36