一、案例介绍

本案例将展示如何使用Radio组件实现一个应用设置界面，包括系统设置、隐私设置、通知设置等功能，展示Radio组件在设置界面中的实际应用。

二、代码实现

1. 设置界面实现

@Entry
@Component
struct SettingsPage {
  // 设置数据
  @State settings: {
    theme: string,
    language: string,
    notification: string,
    privacy: string,
    dataSync: string
  } = {
    theme: 'system',
    language: 'system',
    notification: 'all',
    privacy: 'high',
    dataSync: 'wifi'
  }

  build() {
    Column({ space: 20 }) {
      // 设置页面标题
      Text('系统设置')
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
        .margin({ bottom: 20 })

      // 主题设置
      this.SettingSection('显示与主题', [
        { value: 'light', text: '浅色模式' },
        { value: 'dark', text: '深色模式' },
        { value: 'system', text: '跟随系统' }
      ], 'theme')

      // 语言设置
      this.SettingSection('语言', [
        { value: 'zh', text: '简体中文' },
        { value: 'en', text: '英语' },
        { value: 'system', text: '跟随系统' }
      ], 'language')

      // 通知设置
      this.SettingSection('通知设置', [
        { value: 'all', text: '接收所有通知' },
        { value: 'important', text: '仅接收重要通知' },
        { value: 'none', text: '关闭所有通知' }
      ], 'notification')

      // 隐私设置
      this.SettingSection('隐私设置', [
        { value: 'high', text: '高级保护' },
        { value: 'medium', text: '标准保护' },
        { value: 'low', text: '基础保护' }
      ], 'privacy')

      // 数据同步设置
      this.SettingSection('数据同步', [
        { value: 'always', text: '始终同步' },
        { value: 'wifi', text: '仅WIFI下同步' },
        { value: 'never', text: '从不同步' }
      ], 'dataSync')

      // 保存按钮
      Button('保存设置')
        .width('100%')
        .height(40)
        .margin({ top: 30 })
        .onClick(() => this.saveSettings())
    }
    .width('100%')
    .height('100%')
    .padding(20)
    .backgroundColor('#F5F5F5')
  }

  @Builder
  SettingSection(title: string, options: Array<{ value: string, text: string }>, key: string) {
    Column({ space: 15 }) {
      // 设置项标题
      Text(title)
        .fontSize(16)
        .fontWeight(FontWeight.Medium)

      // 选项列表
      Column({ space: 10 }) {
        ForEach(options, (option) => {
          this.SettingOption(option, key)
        })
      }
    }
    .width('100%')
    .padding(15)
    .borderRadius(10)
    .backgroundColor('#FFFFFF')
  }

  @Builder
  SettingOption(option: { value: string, text: string }, key: string) {
    Row({ space: 10 }) {
      Radio({ value: option.value, group: key })
        .checked(this.settings[key] === option.value)
        .onChange((checked: boolean) => {
          if (checked) {
            this.settings[key] = option.value
            this.onSettingChanged(key, option.value)
          }
        })
      Text(option.text)
        .fontSize(14)
    }
    .width('100%')
    .padding(10)
    .borderRadius(8)
    .backgroundColor(this.settings[key] === option.value ? '#E3F2FD' : 'transparent')
  }

  onSettingChanged(key: string, value: string) {
    // 处理设置变更
    switch (key) {
      case 'theme':
        this.updateTheme(value)
        break
      case 'notification':
        this.updateNotificationSettings(value)
        break
      case 'privacy':
        this.updatePrivacySettings(value)
        break
      case 'dataSync':
        this.updateSyncSettings(value)
        break
    }
  }

  updateTheme(value: string) {
    // 更新主题设置
    AlertDialog.show({
      message: `主题将切换为${this.getThemeName(value)}`,
      confirm: {
        value: '确定',
        action: () => {}
      }
    })
  }

  updateNotificationSettings(value: string) {
    // 更新通知设置
    AlertDialog.show({
      message: `通知设置已更改为${this.getNotificationName(value)}`,
      confirm: {
        value: '确定',
        action: () => {}
      }
    })
  }

  updatePrivacySettings(value: string) {
    // 更新隐私设置
    AlertDialog.show({
      message: `隐私保护级别已设置为${this.getPrivacyName(value)}`,
      confirm: {
        value: '确定',
        action: () => {}
      }
    })
  }

  updateSyncSettings(value: string) {
    // 更新同步设置
    AlertDialog.show({
      message: `数据同步设置已更改为${this.getSyncName(value)}`,
      confirm: {
        value: '确定',
        action: () => {}
      }
    })
  }

  getThemeName(value: string): string {
    switch (value) {
      case 'light':
        return '浅色模式'
      case 'dark':
        return '深色模式'
      case 'system':
        return '跟随系统'
      default:
        return ''
    }
  }

  getNotificationName(value: string): string {
    switch (value) {
      case 'all':
        return '接收所有通知'
      case 'important':
        return '仅接收重要通知'
      case 'none':
        return '关闭所有通知'
      default:
        return ''
    }
  }

  getPrivacyName(value: string): string {
    switch (value) {
      case 'high':
        return '高级保护'
      case 'medium':
        return '标准保护'
      case 'low':
        return '基础保护'
      default:
        return ''
    }
  }

  getSyncName(value: string): string {
    switch (value) {
      case 'always':
        return '始终同步'
      case 'wifi':
        return '仅WIFI下同步'
      case 'never':
        return '从不同步'
      default:
        return ''
    }
  }

  saveSettings() {
    // 保存设置
    AlertDialog.show({
      message: '设置已保存',
      confirm: {
        value: '确定',
        action: () => {}
      }
    })
  }
}

三、总结

本案例通过一个应用设置界面，展示了 Radio 组件在设置页面中的实际应用。通过合理的数据结构设计，实现了主题设置、语言设置、通知设置、隐私设置和数据同步设置等功能。每个设置项都通过 Radio 组件实现单选功能，用户可以方便地选择不同的选项。通过 onChange 事件，实时处理用户的设置变更，并通过弹窗提示用户设置已更改。最后，通过保存按钮将所有设置保存下来。这种设计不仅提升了设置界面的交互性，还增强了用户体验，开发者可以参考此案例，快速实现类似的设置界面功能。