移动app与网站建设的区别网络推广专员所需知识

目标：
当我的手指在设备左方进行上下移动的时候，可以进行屏幕亮度的调节，在调节的同时，有实时的调节进度条显示

步骤：

1. 界面逻辑：使用Stack() 组件，完成音量图标和进度条的组合显示，这里称做组合进度条✔
2. 显示逻辑：通过给容器组件添加手势监听事件gesture() ，借助监听事件回调函数onActionStart()控制显示，借助监听事件回调函数OnAcitonEnd()来控制隐藏， 为组合进度条添加实时显示的事件。✔
3. 更新进度条逻辑：通过监听事件回调函数OnAcitonUpdate()来实时控制进度条的值，在此回调函数中，可以获取手指触碰点在屏幕的x和y坐标，从而根据x的值确定是左边触碰还是右边触碰。✔
4. 更新亮度值逻辑：我们在第3步已经把进度值写入，此时只要把进度值传递到底层系统函数，即可完成亮度设置。✖

方法：
这里笔者使用了两个方法，一个是使用 @system.brightness库来直接设置系统的亮度，另一个是使用@ArkUI库中的window库来设置应用主窗体的亮度。方法一亮度获取成功，设置失败。方法二，获取和设置均成功。以下是详细步骤

第4步实现方法一： 使用库 @system.brightness✖

1. 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);  }  
});

2. 亮度获取函数测试效果：我们使用一个按钮分别通过点击事件调用这两个函数。红框是在进入到引入brightness库的页面后，就会自动打印，蓝框是笔者加的日志，按钮点击后打印，可以看到，这个函数可以正常获取屏幕亮度。按照官方的说法，屏幕亮度，取值范围0 ~ 255。✔

3. 亮度设置函数测试效果：同样的测试方法，我们再来看看打印效果，我们可以看到，设置失败。在这个函数当中有三个参数，传入value屏幕亮度值时，出错（蓝色框日志），但是回调函数执行的是成功（红色框日志） ✖

4. 调整参数值再试一次，这次设置不成功，但至少日志打印顺序正确了✖

5. 尝试添加亮度调节权限，依然失败✖
   

**第4步实现方法二： 使用window库获取应用主窗体进行调节✔

1. 在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.');  });  
}

1. 在struct结构体中设置变量✔

// 这里可以看见我们使用全局变量获取到了我们的窗体模型WindowStage
windowStage: window.WindowStage = AppStorage.get('windowStage') as window.WindowStage;  
// 获取主窗口的方式  
mainWin: window.Window = this.windowStage.getMainWindowSync();

2. 在aboutToAppear()继续初始化✔

// 在此函数中继续初始化
aboutToAppear() {this.windowStage = AppStorage.get('windowStage') as window.WindowStage;  // 获取主窗口的方式  this.mainWin = this.windowStage.getMainWindowSync();  // 获取最上层窗口的方式  // window.getLastWindow(getContext(this));
}

3. 在一个按钮中进行测试差，注意取值范围是0_{1，不再是0}255✔

// 在一个按钮中，可以放置如下函数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));  }}

4. 实际日志输出内容标志成功✔
   

5. 虽然设置成功，但是在模拟器中，为什么没有任何反应呢？聪明的笔者猜测鸿蒙模拟器应该不支持亮度调节，因此，笔者进行验证，发现果然是模拟器不支持亮度调节。✔

亮度拉到最低，没有任何反应：

亮度拉到最高，没有任何反应：

7. 为了看到亮度调节的效果，笔者本着头铁的精神使用真机进行测试。为了前后效果明显，笔者把亮度调节到0.1，这里照片看出来差别不大，但现场看的话，还是有令人兴奋的效果。发✔

总结：
经过笔者不懈的试错，使用window库获取主窗体，即可完成亮度调节。