HarmonyOS Next应用开发实战——设置页面功能实现（part2）

3. 自定义对话框构建

定义了openDialogBuilder函数，用于创建自定义对话框，包含“取消”和“开启”按钮。

let customDialogId: number = 0
@Builder function openDialogBuilder(itemData: item) {
  Column({ space: CommonConstants.MAIN_PADDING * 2}) {
    Text(`开启${itemData.title}`).textStyle()
    Flex() {
      Button('取消').onClick(() => {
        promptAction.closeCustomDialog(customDialogId)
      })
        .border({ width: 0.5, color: CommonConstants.MAIN_COLOR })
        .backgroundColor('#fff')
        .fontColor(Color.Black)
        .fontSize(CommonConstants.S_FONT_SIZE)
        .height(32)
        .flexGrow(1)
      Blank().width(CommonConstants.PUBLIC_SPACE)
      Button('开启').onClick(() => {
        promptAction.closeCustomDialog(customDialogId)
      })
        .border({ width: 0.5, color: '#fff' })
        .backgroundColor(CommonConstants.MAIN_COLOR)
        .fontColor('#fff')
        .fontSize(CommonConstants.S_FONT_SIZE)
        .height(32)
        .flexGrow(1)
    }
  }.columnStyle()
}

4. 设置页面组件定义

定义了SettingsPage组件，包含设置项列表和页面头部组件。

@Entry
@Component
export struct SettingsPage {
  listData: item[] = [
    { title: '修改登录密码', type: 'password' },
    { title: '通知设置',  type: 'notification' },
    { title: '检查版本',type:'version' },
    { title: '隐私政策', type: 'privacy' },
    { title: '清空本地缓存',  type: 'clearStorage' },
    { title: '切换版本',type:'check' },
    { title: '注销账号', type: 'logOff' },
    { title: '安全退出',  type: 'exit' }
  ]
  @StorageProp('avoidArea') topHeight: number = 0;
  @Consume('pageInfos') pageInfos: NavPathStack;

  @Builder settingListItem(itemData: item){
    Column(){
      Row(){
        Text(`${itemData.title}`)
          .fontSize(13)
          .fontWeight(450)
        Blank()
        if(itemData.type === 'version') {
          Text('v4.1.3').fontSize(12).fontColor('#ffa7a4a4').margin({right:5})
        }
        if(itemData.type === 'clearStorage') {
          Text('106.7M').fontSize(12).fontColor('#ffa7a4a4').margin({right:5})
        }
        Image($r('app.media.mi_ic_right_arrow'))
          .width(12)
          .height(12)
      }
      .padding(CommonConstants.MAIN_PADDING)
      .width(CommonConstants.COLUMN_WIDTH)
      .backgroundColor('#fff')
      Divider()
    }
    .width(CommonConstants.COLUMN_WIDTH)
    .padding({left:CommonConstants.MAIN_PADDING, right:CommonConstants.MAIN_PADDING})
  }

  build() {
    NavDestination(){
      Column(){
        PageHeaderComp({
          title: '设置',
          backAction:()=>{ this.pageInfos.pop(); }
        })
        List(){
          ForEach(this.listData, ( itemData: item )=>{
            ListItem(){
              this.settingListItem(itemData)
            }
          })
        }
      }
      .width(CommonConstants.COLUMN_WIDTH)
      .height(CommonConstants.COLUMN_HEIGHT)
      .backgroundColor('#ffefeeee')
      .padding({ top: this.topHeight })
    }
    .hideTitleBar(true)
  }
}

通过以上核心功能的实现，开发者可以在HarmonyOS Next应用中创建一个功能完善的设置页面。