目录

案例介绍

本篇文章将介绍如何在登录注册表单中使用FormLink组件实现各种交互功能，包括页面导航、表单验证和按钮操作等，提升表单的交互体验。

代码实现

import router from '@ohos.router';

@Entry
@Component
struct LoginRegisterDemo {
  @State isLoginPage: boolean = true;
  @State username: string = '';
  @State password: string = '';
  @State errorMsg: string = '';

  build() {
    Column() {
      // 标题和错误信息显示部分省略...
      
      if (this.isLoginPage) {
        this.buildLoginForm()
      } else {
        this.buildRegisterForm()
      }
    }
  }

  @Builder
  buildLoginForm() {
    Column({ space: 16 }) {
      // 输入框部分省略...
      
      // 忘记密码链接
      Row() {
        FormLink() {
          Text('忘记密码？')
            .fontSize(14)
            .fontColor('#2196F3')
        }
        .onClick(() => {
          console.info('点击了忘记密码链接');
          router.pushUrl({ url: 'pages/ResetPassword' });
        })
      }
      .width('100%')
      .justifyContent(FlexAlign.End)
      .margin({ top: 8, bottom: 16 })
      
      // 登录按钮
      Button('登录')
        .width('100%')
        .height(50)
        .borderRadius(8)
        .backgroundColor('#2196F3')
        .fontColor('#FFFFFF')
        .fontSize(16)
        .fontWeight(FontWeight.Medium)
        .onClick(() => {
          // 表单验证
          if (this.username.length === 0) {
            this.errorMsg = '请输入用户名';
            return;
          }
          if (this.password.length === 0) {
            this.errorMsg = '请输入密码';
            return;
          }
          
          console.info(`登录: 用户名=${this.username}, 密码=${this.password}`);
          this.errorMsg = '';
        })
      
      // 注册链接
      Row() {
        Text('还没有账号？')
          .fontSize(14)
          .fontColor('#666666')
        
        FormLink() {
          Text('立即注册')
            .fontSize(14)
            .fontColor('#2196F3')
            .fontWeight(FontWeight.Medium)
        }
        .onClick(() => {
          console.info('点击了注册链接');
          this.isLoginPage = false;
          this.errorMsg = '';
        })
      }
      .justifyContent(FlexAlign.Center)
      .margin({ top: 40 })
    }
  }

  @Builder
  buildRegisterForm() {
    Column({ space: 16 }) {
      // 输入框部分省略...
      
      // 用户协议
      Row() {
        Checkbox()
          .select(this.agreeTerms)
          .onChange((value: boolean) => {
            this.agreeTerms = value;
            this.errorMsg = '';
          })
        
        Text('我已阅读并同意')
          .fontSize(14)
          .fontColor('#666666')
          .margin({ left: 8 })
        
        FormLink() {
          Text('《用户协议》')
            .fontSize(14)
            .fontColor('#2196F3')
        }
        .onClick(() => {
          console.info('点击了用户协议链接');
          this.showTermsDialog('用户协议');
        })
      }
      .width('100%')
      .alignItems(VerticalAlign.Center)
      .margin({ top: 8, bottom: 16 })
      
      // 返回登录链接
      Row() {
        Text('已有账号？')
          .fontSize(14)
          .fontColor('#666666')
        
        FormLink() {
          Text('返回登录')
            .fontSize(14)
            .fontColor('#2196F3')
            .fontWeight(FontWeight.Medium)
        }
        .onClick(() => {
          console.info('点击了返回登录链接');
          this.isLoginPage = true;
          this.errorMsg = '';
        })
      }
      .justifyContent(FlexAlign.Center)
      .margin({ top: 40 })
    }
  }

  // 显示协议对话框
  showTermsDialog(title: string) {
    AlertDialog.show({
      title: title,
      message: `这是${title}的内容，实际应用中应该显示完整的协议文本。`,
      confirm: {
        value: '我知道了',
        action: () => {
          console.info(`关闭${title}对话框`);
        }
      }
    });
  }
}

代码详解

登录页面交互功能

1. 忘记密码链接：

   • 使用FormLink组件创建链接
   • 点击时导航到密码重置页面
   • 右对齐显示在输入框下方

2. 登录按钮：

   • 实现表单验证逻辑
   • 检查用户名和密码是否填写
   • 显示相应的错误提示

3. 注册链接：

   • 组合静态文本和FormLink
   • 点击时切换到注册页面
   • 居中显示在底部

注册页面交互功能

1. 用户协议区域：

   • 包含复选框和协议链接
   • 使用FormLink创建协议链接
   • 点击链接显示协议对话框

2. 返回登录链接：

   • 类似注册链接的结构
   • 点击时切换回登录页面
   • 同样居中显示在底部

页面切换处理

在切换页面时：

• 修改isLoginPage状态
• 清空错误信息
• 重置表单状态

对话框实现

showTermsDialog方法：

• 使用AlertDialog显示协议内容
• 支持自定义标题
• 提供关闭按钮和回调

总结

本篇文章展示了如何使用FormLink组件实现登录注册表单的交互功能：

1. 实现了页面间的导航切换
2. 添加了表单验证和错误提示
3. 集成了协议查看功能
4. 优化了交互体验和视觉反馈

通过这些交互功能的实现，使表单操作更加流畅和友好。