目标:
当我的手指在设备左方进行上下移动的时候,可以进行屏幕亮度的调节,在调节的同时,有实时的调节进度条显示
步骤:
- 界面逻辑:使用Stack() 组件,完成音量图标和进度条的组合显示,这里称做组合进度条✔
- 显示逻辑:通过给容器组件添加手势监听事件gesture() ,借助监听事件回调函数onActionStart()控制显示,借助监听事件回调函数OnAcitonEnd()来控制隐藏, 为组合进度条添加实时显示的事件。✔
- 更新进度条逻辑:通过监听事件回调函数OnAcitonUpdate()来实时控制进度条的值,在此回调函数中,可以获取手指触碰点在屏幕的x和y坐标,从而根据x的值确定是左边触碰还是右边触碰。✔
- 更新亮度值逻辑:我们在第3步已经把进度值写入,此时只要把进度值传递到底层系统函数,即可完成亮度设置。✖
方法:
这里笔者使用了两个方法,一个是使用 @system.brightness库来直接设置系统的亮度,另一个是使用@ArkUI库中的window库来设置应用主窗体的亮度。方法一亮度获取成功,设置失败。方法二,获取和设置均成功。以下是详细步骤
第4步实现方法一: 使用库 @system.brightness✖
- brightness库:在官方文档中发现使用 @system.brightness 整个库,可以设置系统亮度,但是官方文档说整个库已经停止维护,下面这段代码在IDE中有横杠。本着功能至上的想法,笔者还是使用了这个库,并且调用了这个库的亮度获取和亮度设置。✔
// 导入这个库
import brightness from '@system.brightness'//获得当前屏幕亮度值
brightness.getValue({ success: (data: BrightnessResponse) => { console.log('success get brightness value:' + data.value); }, fail: (data: string, code: number) => { console.error('get brightness fail, code: ' + code + ', data: ' + JSON.stringify(data)); }
});// 设置亮度值
brightness.setValue({ value: 120, success: () => { console.log('handling set brightness success.'); }, fail: (data: string, code: number) => { console.error('handling set brightness value fail, code:' + code + ', data: ' + data); }
});
-
亮度获取函数测试效果:我们使用一个按钮分别通过点击事件调用这两个函数。红框是在进入到引入brightness库的页面后,就会自动打印,蓝框是笔者加的日志,按钮点击后打印,可以看到,这个函数可以正常获取屏幕亮度。按照官方的说法,屏幕亮度,取值范围0 ~ 255。✔
-
亮度设置函数测试效果:同样的测试方法,我们再来看看打印效果,我们可以看到,设置失败。在这个函数当中有三个参数,传入value屏幕亮度值时,出错(蓝色框日志),但是回调函数执行的是成功(红色框日志) ✖
-
调整参数值再试一次,这次设置不成功,但至少日志打印顺序正确了✖
-
尝试添加亮度调节权限,依然失败✖
**第4步实现方法二: 使用window库获取应用主窗体进行调节✔
- 在EntryAbility.ets中的onWindowStageCreate方法中将WindowStage设置一个AppStorage。这里相当于设置一个全局变量,使得窗体模型WindowStage可以在我们的目标页面获取
onWindowStageCreate(windowStage: window.WindowStage): void { // Main window is created, set main page for this ability hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate'); // 重点AppStorage.setOrCreate('windowStage',windowStage); windowStage.loadContent('pages/Index', (err) => { if (err.code) { hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? ''); return; } hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.'); });
}
- 在struct结构体中设置变量✔
// 这里可以看见我们使用全局变量获取到了我们的窗体模型WindowStage
windowStage: window.WindowStage = AppStorage.get('windowStage') as window.WindowStage;
// 获取主窗口的方式
mainWin: window.Window = this.windowStage.getMainWindowSync();
- 在aboutToAppear()继续初始化✔
// 在此函数中继续初始化
aboutToAppear() {this.windowStage = AppStorage.get('windowStage') as window.WindowStage; // 获取主窗口的方式 this.mainWin = this.windowStage.getMainWindowSync(); // 获取最上层窗口的方式 // window.getLastWindow(getContext(this));
}
- 在一个按钮中进行测试差,注意取值范围是01,不再是0255✔
// 在一个按钮中,可以放置如下函数Button('获取屏幕亮度') .width('40%') .height('50vp') .onClick(() => {// 2.1通过window设置亮度 try { this.mainWin.setWindowBrightness(0.5, (err) => { if (err.code) { console.error('Failed to set the brightness. Cause: ' + JSON.stringify(err)); return; } console.info('Succeeded in setting the brightness.'); }); } catch (exception) { console.error('Failed to set the brightness. Cause: ' + JSON.stringify(exception)); }}
-
实际日志输出内容标志成功✔
-
虽然设置成功,但是在模拟器中,为什么没有任何反应呢?聪明的笔者猜测鸿蒙模拟器应该不支持亮度调节,因此,笔者进行验证,发现果然是模拟器不支持亮度调节。✔
亮度拉到最低,没有任何反应:
亮度拉到最高,没有任何反应:
- 为了看到亮度调节的效果,笔者本着头铁的精神使用真机进行测试。为了前后效果明显,笔者把亮度调节到0.1,这里照片看出来差别不大,但现场看的话,还是有令人兴奋的效果。发✔
总结:
经过笔者不懈的试错,使用window库获取主窗体,即可完成亮度调节。