目录

案例介绍

本篇文章将介绍如何使用FormLink组件实现设置页面的高级功能，包括隐私设置、账号安全、通知管理等功能的交互实现。通过本篇文章，你将学习到如何构建一个功能完整、交互友好的设置页面。

代码实现

import router from '@ohos.router';
import promptAction from '@ohos.promptAction';

@Entry
@Component
struct SettingsDemo {
  @State isNotificationEnabled: boolean = true;
  @State isLocationEnabled: boolean = false;
  @State isDarkMode: boolean = false;
  
  build() {
    Column() {
      // 账号与安全
      Column() {
        Text('账号与安全')
          .fontSize(16)
          .fontWeight(FontWeight.Medium)
          .margin({ top: 16, bottom: 8, left: 16 })
        
        Column() {
          // 修改密码
          FormLink() {
            Row() {
              Text('修改密码')
                .fontSize(16)
                .fontColor('#333333')
              
              Blank()
              
              Image($r('app.media.ic_arrow_right'))
                .width(20)
                .height(20)
                .fillColor('#999999')
            }
            .width('100%')
            .padding(16)
          }
          .onClick(() => {
            router.pushUrl({ url: 'pages/ChangePassword' });
          })
          
          Divider().color('#EEEEEE')
          
          // 账号注销
          FormLink() {
            Row() {
              Text('账号注销')
                .fontSize(16)
                .fontColor('#E53935')
              
              Blank()
              
              Image($r('app.media.ic_arrow_right'))
                .width(20)
                .height(20)
                .fillColor('#999999')
            }
            .width('100%')
            .padding(16)
          }
          .onClick(() => {
            this.showDeleteAccountDialog();
          })
        }
        .width('100%')
        .backgroundColor('#FFFFFF')
        .borderRadius(8)
        
        // 隐私设置
        Text('隐私设置')
          .fontSize(16)
          .fontWeight(FontWeight.Medium)
          .margin({ top: 24, bottom: 8, left: 16 })
        
        Column() {
          // 通知管理
          Row() {
            Text('通知管理')
              .fontSize(16)
              .fontColor('#333333')
            
            Blank()
            
            Toggle({ type: ToggleType.Switch, isOn: this.isNotificationEnabled })
              .onChange((isOn: boolean) => {
                this.isNotificationEnabled = isOn;
                promptAction.showToast({
                  message: isOn ? '已开启通知' : '已关闭通知',
                  duration: 2000
                });
              })
          }
          .width('100%')
          .padding(16)
          
          Divider().color('#EEEEEE')
          
          // 位置信息
          Row() {
            Text('位置信息')
              .fontSize(16)
              .fontColor('#333333')
            
            Blank()
            
            Toggle({ type: ToggleType.Switch, isOn: this.isLocationEnabled })
              .onChange((isOn: boolean) => {
                this.isLocationEnabled = isOn;
                promptAction.showToast({
                  message: isOn ? '已开启位置信息' : '已关闭位置信息',
                  duration: 2000
                });
              })
          }
          .width('100%')
          .padding(16)
          
          Divider().color('#EEEEEE')
          
          // 深色模式
          Row() {
            Text('深色模式')
              .fontSize(16)
              .fontColor('#333333')
            
            Blank()
            
            Toggle({ type: ToggleType.Switch, isOn: this.isDarkMode })
              .onChange((isOn: boolean) => {
                this.isDarkMode = isOn;
                promptAction.showToast({
                  message: isOn ? '已开启深色模式' : '已关闭深色模式',
                  duration: 2000
                });
              })
          }
          .width('100%')
          .padding(16)
        }
        .width('100%')
        .backgroundColor('#FFFFFF')
        .borderRadius(8)
        
        // 其他设置
        Text('其他设置')
          .fontSize(16)
          .fontWeight(FontWeight.Medium)
          .margin({ top: 24, bottom: 8, left: 16 })
        
        Column() {
          // 清除缓存
          FormLink() {
            Row() {
              Text('清除缓存')
                .fontSize(16)
                .fontColor('#333333')
              
              Blank()
              
              Text('1.2MB')
                .fontSize(14)
                .fontColor('#999999')
              
              Image($r('app.media.ic_arrow_right'))
                .width(20)
                .height(20)
                .fillColor('#999999')
                .margin({ left: 4 })
            }
            .width('100%')
            .padding(16)
          }
          .onClick(() => {
            this.showClearCacheDialog();
          })
          
          Divider().color('#EEEEEE')
          
          // 关于
          FormLink() {
            Row() {
              Text('关于')
                .fontSize(16)
                .fontColor('#333333')
              
              Blank()
              
              Text('版本 1.0.0')
                .fontSize(14)
                .fontColor('#999999')
              
              Image($r('app.media.ic_arrow_right'))
                .width(20)
                .height(20)
                .fillColor('#999999')
                .margin({ left: 4 })
            }
            .width('100%')
            .padding(16)
          }
          .onClick(() => {
            router.pushUrl({ url: 'pages/About' });
          })
        }
        .width('100%')
        .backgroundColor('#FFFFFF')
        .borderRadius(8)
      }
      .width('100%')
      .padding({ left: 16, right: 16, bottom: 16 })
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F5F5F5')
  }
  
  showDeleteAccountDialog() {
    AlertDialog.show({
      title: '账号注销',
      message: '注销账号后，所有数据将被清除且无法恢复，确定要继续吗？',
      primaryButton: {
        value: '取消',
        action: () => {
          console.info('取消注销账号');
        }
      },
      secondaryButton: {
        value: '确定注销',
        action: () => {
          console.info('确认注销账号');
          // 这里添加注销账号的具体逻辑
        }
      }
    });
  }
  
  showClearCacheDialog() {
    AlertDialog.show({
      title: '清除缓存',
      message: '确定要清除所有缓存数据吗？',
      primaryButton: {
        value: '取消',
        action: () => {
          console.info('取消清除缓存');
        }
      },
      secondaryButton: {
        value: '确定清除',
        action: () => {
          console.info('确认清除缓存');
          promptAction.showToast({
            message: '缓存已清除',
            duration: 2000
          });
        }
      }
    });
  }
}

代码详解

页面结构设计

1. 整体布局：

   • 使用Column作为根容器
   • 灰色背景突出内容区域
   • 合理的内边距和圆角

2. 分组展示：

   • 账号与安全
   • 隐私设置
   • 其他设置

功能模块实现

1. 账号安全：

   • 修改密码入口
   • 账号注销功能
   • 确认对话框交互

2. 隐私设置：

   • 通知管理开关
   • 位置信息控制
   • 深色模式切换

3. 其他功能：

   • 缓存管理
   • 版本信息
   • 跳转详情页

交互优化

1. 开关控件：

   • Toggle组件状态管理
   • 即时反馈提示
   • 状态持久化

2. 对话框交互：

   • 二次确认机制
   • 清晰的提示文案
   • 操作结果反馈

样式优化

1. 视觉层次：

   • 统一的字体大小
   • 合理的颜色搭配
   • 图标与文字对齐

2. 间距控制：

   • 统一的内边距
   • 分组间的间距
   • 分割线样式

总结

本篇文章展示了如何使用FormLink组件构建一个完整的设置页面：

1. 实现了常见的设置功能
2. 优化了用户交互体验
3. 统一了界面视觉风格
4. 完善了功能的反馈机制

通过这些功能的实现，为用户提供了一个功能完整、交互友好的设置界面。