import { HikNavBar } from '@ohos/uicomponents'
import { DeviceInfoDBModel, deviceInfoeDB } from '@ohos/datastore';
import { router } from '@kit.ArkUI';
@Builder
export function MainPageBuilder() {
Configure()
}
@Entry
@Component
export struct Configure {
@Provide jumpIndex: number = 0
@State swiperIndex: number = 1;
@Provide('deviceInfoDatas') deviceInfoDatas: DeviceInfoDBModel[] = [];
@StorageLink('mainNavStack') mainNavStack: NavPathStack = new NavPathStack()
@State showAddDevice: boolean = true
@StorageLink('isAutoConnect') isAutoConnect: boolean = false
@StorageProp('Top') Top: number = 0
@StorageProp('Bottom') Bottom: number = 0
@State resolution: string = '1440P@25fps'
@State isWideDynamic: boolean = true
@State isCapture: boolean = true
@State isRecordingSound: boolean = true
@State isEmergencyRecording: boolean = true
@State speedWatermark: boolean = true
@State volumeLevel: number = 2
@State bootSound: boolean = true
@State sensitivityLevel: string = '中'
@State collisionAlarm: boolean = true
@State unit: string = '公制'
@State language: string = '中文'
aboutToAppear(): void {
}
private jumpToResolutionSetting(): void {
router.pushUrl({
url: 'pages/ResolutionSettingPage',
params: { currentSelection: this.resolution }
});
}
build() {
NavDestination() {
HikNavBar({
leftImage: $r('app.media.return'),
title: '设置',
})
//
Column() {
Scroll() {
Column() {
Row(){
// 录像设置区域
SettingSection({ title: '录像设置' })
// 分辨率与帧率
SettingItem({
title: '分辨率与帧率',
type: 'arrow', // 箭头类型
textValue: this.resolution,
onClick: this.jumpToResolutionSetting.bind(this)
})
// 宽动态
SettingItem({
title: '宽动态',
type: 'toggle', // 开关类型
toggleValue: this.isWideDynamic,
onChange: (value) => {
this.isWideDynamic = value as boolean
// 更新设备设置
}
})
// 抓拍关联录像
SettingItem({
title: '抓拍关联录像',
type: 'toggle', // 开关类型
description: '抓拍时自动生成一段关联视频',
toggleValue: this.isCapture,
onChange: (value) => {
this.isCapture = value as boolean
// 更新设备设置
}
})
// 录音设置
SettingItem({
title: '录像时录音',
type: 'toggle', // 开关类型
toggleValue: this.isRecordingSound,
onChange: (value) => {
this.isRecordingSound = value as boolean
// 更新设备设置
}
})
// 紧急录像
SettingItem({
title: '紧急录像',
type: 'toggle', // 开关类型
toggleValue: this.isEmergencyRecording,
description: '当车辆发生急刹车、急转弯及碰撞，将自动录制一份紧急视频',
onChange: (value) => {
this.isEmergencyRecording = value as boolean
// 更新设备设置
}
})
// 车速水印
SettingItem({
title: '车速水印',
type: 'toggle', // 开关类型
toggleValue: this.speedWatermark,
description: '数据来源于GPS，设备需内置或扩展GPS模块',
onChange: (value) => {
this.speedWatermark = value as boolean
// 更新设备设置
}
})
// 声音与显示区域
SettingSection({ title: '声音与显示' })
// 音量设置
SettingItem({
title: '音量',
type: 'slider',
sliderValue: this.volumeLevel,
min: 0,
max: 15,
step: 1,
onChange: (value) => {
this.volumeLevel = value as number
// 更新设备音量
}
})
// 开机音乐
SettingItem({
title: '开机音乐',
type: 'toggle', // 开关类型
toggleValue: this.bootSound,
onChange: (value) => {
this.bootSound = value as boolean
// 更新设备音量
}
})
// 停车监控区域
SettingSection({ title: '停车监控' })
// 震动监测
SettingItem({
title: '震动监测灵敏度',
showArrow: true,
type: 'arrow', // 箭头类型
textValue: this.sensitivityLevel
})
// 慧眼互联区域
SettingSection({ title: '慧眼互联' })
// 碰撞报警
SettingItem({
title: '停车监控碰撞报警',
type: 'toggle', // 开关类型
toggleValue: this.collisionAlarm,
onChange: (value) => {
this.collisionAlarm = value as boolean
// 更新设备
}
})
// 电子围栏
SettingItem({
title: '电子围栏',
showArrow: true,
type: 'arrow', // 箭头类型
})
// 慧眼互联区域
SettingSection({ title: '慧眼智能' })
// ADAS
SettingItem({
title: 'ADAS',
showArrow: true,
type: 'arrow', // 箭头类型
})
// 语音控制
SettingItem({
title: '语音控制',
showArrow: true,
type: 'arrow', // 箭头类型
})
// 网络参数
SettingSection({ title: '网络参数' })
// Wi-Fi配置
SettingItem({
title: 'Wi-Fi配置',
showArrow: true,
type: 'arrow', // 箭头类型
})
// GPS
SettingItem({
title: 'GPS',
showArrow: true,
type: 'arrow', // 箭头类型
})
// 移动数据
SettingItem({
title: '移动数据',
showArrow: true,
type: 'arrow', // 箭头类型
})
// 系统管理
SettingSection({ title: '系统管理' })
// 关于设备
SettingItem({
title: '关于设备',
showArrow: true,
type: 'arrow', // 箭头类型
})
// 存储管理
SettingItem({
title: '存储管理',
showArrow: true,
type: 'arrow', // 箭头类型
})
// 单位制式
SettingItem({
title: '单位制式',
showArrow: true,
type: 'arrow', // 箭头类型
textValue: this.unit
})
// 语言
SettingItem({
title: '语言',
showArrow: true,
type: 'arrow', // 箭头类型
textValue: this.language
})
SettingItem({
title: '恢复设备缺省设置',
showArrow: true,
type: 'arrow', // 箭头类型
})
SettingItem({
title: '重启设备',
showArrow: true,
type: 'arrow', // 箭头类型
})
}
.
onClick(() => {
if (this.
onClick) {
this.
onClick();
}
})
}
}
.scrollable(ScrollDirection.Vertical)
.layoutWeight(1)
}
.width('100%')
.backgroundColor('#FFFFFF')
}
.padding({
top: this.Top,
bottom: this.Bottom + 60
})
}
}
// 设置项组件
@Component
struct SettingItem {
@Prop title: string // 左侧标题
private showArrow: boolean = false // 是否显示箭头
private hasToggle: boolean = false // 是否有开关
@Prop hasTitle: boolean = false
@Prop rightTitle: string = ''
private hasSlider: boolean = false // 是否有滑块
@Prop type: 'text' | 'toggle' | 'slider' | 'arrow' | 'none' = 'none' // 右侧内容类型
@Prop textValue?: string // 文本值
@Prop toggleValue?: boolean // 开关状态
@Prop sliderValue?: number // 滑块值
@Prop description: string = '' // 描述文本
private divider: boolean = true // 是否显示分隔线
@Prop min: number = 0 // 滑块最小值
@Prop max: number = 10 // 滑块最大值
@Prop step: number = 1 // 滑块步长
onChange?: (value: string | boolean | number) => void
@State isPressed: boolean = false;
// 回调函数处理
private
onClickCallback: () => void = () => {}
private
onChangeCallback: (value: string | boolean | number) => void = () => {}
// 设置点击回调
setClickCallback(callback: () => void): SettingItem {
this.
onClickCallback = callback
return this
}
// 设置变更回调
setChangeCallback(callback: (value: string | boolean | number) => void): SettingItem {
this.
onChangeCallback = callback
return this
}
build() {
Column() {
// 主内容行
Row() {
// 左侧标题 (严格遵循设计规范)
Text(this.title)
.fontSize(14)
.lineHeight(20)
.textAlign(TextAlign.Start)
.layoutWeight(1)
.fontColor('#000000')
if (this.hasTitle) {
Text(this.rightTitle)
.fontSize(14)
.lineHeight(20)
.textAlign(TextAlign.Start)
.fontColor('#000000')
}
if (this.type === 'text') {
if (this.textValue !== undefined) {
Text(this.textValue)
.fontSize(14)
.fontColor('#666666')
}
} else if (this.type === 'toggle') {
if (this.toggleValue !== undefined) {
Toggle({ type: ToggleType.Switch, isOn: this.toggleValue })
.
onChange(value => {
if (this.
onChange) {
this.
onChange(value)
}
})
}
} else if (this.type === 'slider') {
if (this.sliderValue !== undefined) {
Row() {
Slider({
value: this.sliderValue,
min: this.min,
max: this.max,
step: this.step
})
.
onChange(value => {
if (this.
onChange) {
this.
onChange(value)
}
})
.layoutWeight(1)
Text(this.sliderValue.toString())
.width(24)
.margin({ left: 8 })
.textAlign(TextAlign.End)
}
.width('60%')
}
} else if (this.type === 'arrow') {
Row() {
// 如果有文本值则显示文本
if (this.textValue !== undefined) {
Text(this.textValue)
.fontSize(14)
.fontColor('#666666')
.margin({ right: 8 })
}
// 始终显示箭头图标
Image($r('app.media.public_icon_right_arrow'))
.width(16)
.height(16)
}
.padding({ right: 8 })
}
}
.height(56)
.padding({ left: 16, right: 16 })
// 描述文字
if (this.description !== '') {
Text(this.description)
.fontSize(12)
.textAlign(TextAlign.Start)
.width('100%')
.fontColor('#999999')
.padding({ left: 16, bottom: 8 })
}
// 分隔线
if (this.divider) {
Divider()
.strokeWidth(0.5)
.color('#EEEEEE')
.margin({ left: 16 })
}
}
.width('100%')
}
}
// 分组标题组件
@Component
struct SettingSection {
@Prop title: string = '' // 分组标题
@Prop note?: string = '' // 分组说明
build() {
Column() {
Row() {
Text(this.title)
.fontSize(12)
.textAlign(TextAlign.Start)
.layoutWeight(1)
.padding({ top: 8, bottom: 8 })
if (this.note && this.note !== '') {
Text(this.note)
.fontSize(12)
.fontColor('#e1c4c2c2')
.padding({ top: 10, bottom: 8 })
}
}
.backgroundColor('#c4f6f5f5')
.padding({ left: 16, right: 16 })
.width('100%')
// 分隔线
Divider()
.strokeWidth(0.5)
.color('#EEEEEE')
.margin({ left: 16 })
}
.width('100%')
}
}
有报错：Argument of type '{ title: string; type: "arrow"; textValue: string;
onClick: any; }' is not assignable to parameter of type '{ title?: string; showArrow?: boolean; hasToggle?: boolean; hasTitle?: boolean; rightTitle?: string; hasSlider?: boolean; type?: "arrow" | "text" | "toggle" | "slider" | "none"; textValue?: string; ... 10 more ...;
onChangeCallback?: (value: string | ... 1 more ... | boolean) => void; }'. Object literal may only specify known properties, and '
onClick' does not exist in type '{ title?: string; showArrow?: boolean; hasToggle?: boolean; hasTitle?: boolean; rightTitle?: string; hasSlider?: boolean; type?: "arrow" | "text" | "toggle" | "slider" | "none"; textValue?: string; ... 10 more ...;
onChangeCallback?: (value: string | ... 1 more ... | boolean) => void; }'. <ArkTSCheck> 这里： .
onClick(() => {
if (this.
onClick) {
this.
onClick();
}
}) ResolutionSettingPage组件：import { router } from "@kit.ArkUI";
import { HikNavBar } from "@ohos/uicomponents";
@Entry
@Component
export struct ResolutionSettingPage {
@State currentSelection: string = ''
private resolutions: string[] = [
"2160P@30FPS", "2160P@25FPS", "1440P@30FPS",
"1440P@25FPS", "1080P@60FPS", "1080P@30FPS", "1080P@25FPS"
]
aboutToAppear() {
const params = router.getParams();
this.currentSelection = params?.currentSelection || this.resolutions[0];
}
build() {
Column() {
// 导航栏
HikNavBar({
leftImage: $r('app.media.return'),
title: '分辨率与帧率',
leftImageClick: () => router.back()
})
// 分辨率选项列表
List() {
ForEach(this.resolutions, (item: string) => {
ListItem() {
Row() {
Text(item)
.fontSize(16)
.layoutWeight(1)
}
.height(56)
.padding({ left:16, right:16 })
.
onClick(() => {
this.currentSelection = item;
AppStorage.setOrCreate('resolution', item);
router.back();
})
}
}, (item: string) => item)
}
.width('100%')
.layoutWeight(1)
}
}
}这里有把把报错
本文探讨了在网页开发中onclick和onchange事件可能产生的冲突问题，并提出了onchange触发onpropertychange作为解决方案。
扫一扫
9544
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
