视频链接：哔哩哔哩
指南针功能开发
上一节我们讲解了工具箱 App 的感光仪功能的开发，本节我们将讲解 指南针功能的开发流程。
和感光仪功能开发流程类似，我们接下来去修改指南针的的页面信息
在工作台的项目列表中找到工具箱 App，点击【项目菜单】->【开发文档】进入到需求文档页面。
编辑页面信息
- 点击 切换到页面菜单，选中Compass (指南针)。
- 点击 编辑 按钮，对页面信息进行修改
功能详情
功能详情填写：
- 利用设备内置的磁力计和方向传感器，实时获取设备相对于地磁北极的方向
- 通过磁力计获取当前磁场强度
- 使用定位服务获取设备的经纬度以及海拔高度
- 通过气压传感器获取当前气压值
参考页面
放入下图：
变量列表
进入变量列表，点击 添加变量：
| 变量名称 | 变量类型 | 是否为数组 | 默认值 | 变量描述 |
|---|---|---|---|---|
| azimuth | Int | 否 | 0 | 指南针的方向角 |
| latitudeNorth | Double | 否 | 0 | 北纬值 |
| eastLongitude | Double | 否 | 0 | 东经值 |
| airPressure | Double | 否 | 0 | 气压值 |
| altitude | Double | 否 | 0 | 海拔值 |
| magneticField | Double | 否 | 0 | 磁场值 |
配置流程
在流程设计中，填写以下流程：
页面初始化：
监听磁力计数据，将获取的方向角赋值给 azimuth， 将磁场强度赋值给magneticField
监听定位数据，将北纬值赋值给latitudeNorth；东经值赋值给eastLongitude，海拔高度复制给altitude
监听气压计数据，将气压值赋值给airPressure
页面销毁：取消监听磁力计数据、气压计数据点击保存按钮保存数据
页面搭建
我们先看一下需求中的页面布局结构：
-
最上方是一个导航栏，标题为「指南针」。
-
导航栏下方首先展示当前的 方向 和 方向角。
-
继续往下，是设备的 北纬 与 东经 信息展示区域。
-
页面底部是指南针主体，由一条竖线和一张指南针图片组合而成。其中，指南针图片会根据方向角动态旋转，从而实现指南针指向的效果。
-
最底部是一个左右分栏布局，分别展示气压、海拔、磁场信息，
1. 点击右上角 跳转到开发页面，选中“指南针”页面，开始页面设计。
2. 点击小部件面板图标进入小部件面板
3.在页面预览区域点击顶部导航栏图标，打开添加顶部导航
4. 拖动文本组件到导航栏中间，点击选中刚拖动的文本小部件，右侧出现小部件的配置页面，并配置如下内容
-
文本内容：
指南针 -
字号：
18 -
字体颜色：
#FFFFFFFF
5.拖动左右布局到上下布局中，然后在右侧的属性编辑器中配置属性，属性信息如下：
-
内边距：
上内边距30，下内边距10 -
主轴对齐：
居中对齐 -
次轴对齐：
居中对齐
6.拖动文本到左右布局中，然后在右侧的属性编辑器中配置属性，属性信息如下：
-
文本内容：
${directionText(azimuth)} ${azimuth}°我们可以使用${}来包裹一个变量值，directionText是我们写的一个函数，用于将方向角转换成东、西、南、北等 -
打开“显示模拟预览文本”并填写预览文本为
南 152°，当我们使用变量表示内容后可能会导致内容过长或者显示内容不符合预期，那么我们可以使用模拟预览文本。 -
字体大小：
22 -
字体粗细：
600
7.拖动左右布局到上下布局中，然后在右侧的属性编辑器中配置属性，属性信息如下：
-
组件边距：
外边距 ，下外边距60 -
主轴对齐：四周留空（倒数第二个）
-
次轴对齐：
居中对齐
8.拖动文本到左右布局中，然后在右侧的属性编辑器中配置属性，属性信息如下：
-
文本内容：
北纬 ${decimalToDMS(latitudeNorth)}我们可以使用${}来包裹一个变量值，decimalToDMS是我写的函数，用于将double的地理位置转换成度分秒（DMS）格式，我将会在流程图中添加这个函数 -
打开“显示模拟预览文本”并填写预览文本为
北纬31°55'41''，当我们使用变量表示内容后可能会导致内容过长或者显示内容不符合预期，那么我们可以使用模拟预览文本。
-
文本内容：
东经 ${decimalToDMS(eastLongitude)}这里我也同样是转换成度分秒（DMS）格式 -
打开“显示模拟预览文本”并填写预览文本为
东经 31°55'41''
10.拖拽 拖拽布局到上下布局中，并配置如下参数
-
宽：
300 -
高：
300 -
对齐方式：
顶部居中
11.拖拽 旋转小部件到拖拽布局中，并配置如下参数
-
打开Z轴旋转，并在输入框中输入
-azimuth
12.拖拽 图片小部件到旋转中，并配置如下参数
-
宽：
300 -
高：
300 -
图片来源：我的文件
-
本地文件点击上传图片，选择我下面的图片
13. 拖动容器小部件到拖拽布局中，并配置如下内容：
-
宽：
3 -
高：
40 -
背景色：
#FF131212 -
边框圆角：
3
14.点击左侧导航栏的页面管理，选中拖拽布局，并配置以下属性
- 子组件位置
- 容器
- 纵向（Y)：
-5
- 纵向（Y)：
- 容器
15.拖拽 容器小部件到上下布局中，并配置如下参数
-
宽：
无限 -
高：
80 -
外边距：
上外边距180 左外边距20，右外边距20 -
边框圆角：
15
16.拖动左右布局到容器中，然后在右侧的属性编辑器中配置属性，属性信息如下：
-
主轴对齐：四周留空（倒数第二个）
-
次轴对齐：
居中对齐
-
主轴对齐：居中对齐
-
次轴对齐：
居中对齐
18.拖动文本小部件到我们刚拖入的上下布局中，并配置如下内容
-
文本内容：
${airPressure>0?"${airPressure.toStringAsFixed(1)} 百帕":"--"}这里我们用了一个三元运算符，当airPressure>0时显示airPressure的值，反之显示-- -
打开“显示模拟预览文本”并填写预览文本为
1018.6 百帕
19.拖动文本小部件到我们刚拖入的上下布局中，并配置如下内容
-
文本内容：气压
-
文本颜色：
#FF727273
20.点击左侧的页面管理，点击页面预览的气压文本，然后我们就能在组件树中看到我们刚才选择的文本小部件
21.选择文本小部件的父组件上下布局，右击鼠标点击复制
22. 鼠标放在上下布局的父组件左右布局上，右击鼠标选择粘贴多次，次数输入2，这是我们可以看到页面预览中出现了两个新的上下布局
23.修改左右布局中间的1018.6百帕的文本，并修改以下配置
-
文本内容：
${altitude>0?"${altitude.toStringAsFixed(1)} 米":"--"}这里我们用了一个三元运算符，当altitude>0时显示altitude的值，反之显示-- -
打开“显示模拟预览文本”并填写预览文本为
--
24.修改左右布局中间的“气压”的文本，为海拔
25.同理，将左右布局最右侧的1018.6百帕的文本，并修改以下配置
-
文本内容：
${magneticField>0?"${magneticField.toStringAsFixed(0)} µT":"--"} -
打开“显示模拟预览文本”并填写预览文本为
--
26.修改左右布局最右侧的“气压”的文本，为磁场
至此页面搭建完成
配置逻辑（动作流程图）
进入页面动作流程图
1.点击右上角 页面设置 图标进入到页面设置中
2.打开动作 → 点击 编辑流程图
页面初始化
1. 点击页面初始化下面的加号添加事件
2.点击开始下方的加号，添加动作
3.鼠标选中动作，右侧出现动作配置并配置如下内容
-
动作类型：定位服务
-
经度值绑定：
eastLongitude -
维度值绑定：
latitudeNorth -
海拔值绑定：
altitude
4.在定位服务下方添加一个新的动作并用鼠标选中动作，右侧出现动作配置并配置如下内容
-
动作类型：硬件动作
-
硬件类型：气压计
-
传感器操作类型：开始数据监听
-
气压值绑定变量：
airPressure
5.在气压计下方添加一个新的动作并用鼠标选中动作，右侧出现动作配置并配置如下内容
-
动作类型：硬件动作
-
硬件类型：磁力计
-
传感器操作类型：开始数据监听
-
方向角绑定变量：
azimuth - 磁场强度绑定变量：
magneticField
- 动作类型：
自定义代码块
- 点击新增自定义代码块
- 自定义代码块编辑区
-
String directionText( degree) { if (degree >= 337.5 || degree < 22.5) return '北'; if (degree >= 22.5 && degree < 67.5) return '东北'; if (degree >= 67.5 && degree < 112.5) return '东'; if (degree >= 112.5 && degree < 157.5) return '东南'; if (degree >= 157.5 && degree < 202.5) return '南'; if (degree >= 202.5 && degree < 247.5) return '西南'; if (degree >= 247.5 && degree < 292.5) return '西'; return '西北'; }
-
- 代码块名称：
directionText - 添加入参
- 变量类型：
Int
- 变量类型：
- 自定义代码块编辑区
- 点击新增自定义代码块
- 自定义代码块编辑区
-
String decimalToDMS(double decimalDegree) { final degrees = decimalDegree.truncate(); final minutesDecimal = (decimalDegree - degrees) * 60; final minutes = minutesDecimal.truncate(); final seconds = ((minutesDecimal - minutes) * 60).toStringAsFixed(0); return '$degrees°$minutes\'$seconds"'; }
-
- 代码块名称：
decimalToDMS - 添加入参
- 变量类型：
double
- 变量类型：
- 自定义代码块编辑区
不用勾选，我们只要定义了代码块，那么在这个页面中就能直径引用
页面销毁
1. 点击页面销毁下面的加号添加事件
2.点击开始下方的加号，添加动作
3.鼠标选中动作，右侧出现动作配置并配置如下内容
-
动作类型：硬件动作
-
硬件类型：气压计
-
传感器操作类型：停止数据监听
4..添加新的动作并且鼠标选中动作，右侧出现动作配置并配置如下内容
-
动作类型：硬件动作
-
硬件类型：磁力计
-
传感器操作类型：停止数据监听
点击右上角叉号保存流程。至此，页面及逻辑全部设置完成。
配置路由并开始打包
1.将指南针页面的路由输入框内容清空，使其作为根路由页面。
2.需要修改 Sensitometer（感光仪） 的路由名称，避免出现两个根路由导致报错。在页面管理中选择 Sensitometer（感光仪），将其路由修改为 sensitometer。
3.接下来进行 App 打包：点击右上角 下载 → 下载应用
在弹窗中做如下配置
-
平台：Android
-
版本号：1.0.0
-
点击下载
系统将自动跳转至日志管理页面。你可以扫码关注公众号，打包成功后会收到通知。
待打包完成后点击下载按钮，安装应用并进行测试。
实机效果
打开 App 进入指南针页面。
等待一会后我们可以看到指南针工作
扫一扫
206
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
