HarmonyOS 鸿蒙Next中兔鲜儿登录界面的简单用户交互界面

HarmonyOS 鸿蒙Next中兔鲜儿登录界面的简单用户交互界面 简单的用户交互界面终于写好了！！！

代码示例

import promptAction from '@ohos.promptAction'
import display from '@ohos.display'
import { InputMethodExtensionAbility } from '@ohos.InputMethodExtensionAbility';
let Char = []; //大小写字母的存储
let index = 0;
let str = [];
const regex = /^[0-9A-Za-z_@]+|/
let T;
// 字母的生成
for(let i=97; i<=122;i++){
  Char[index++] = String.fromCharCode(i)
}
for(let i=65; i<=90;i++){
  Char[index++] = String.fromCharCode(i)
}

// 随机生成四个字母
function randomlyGeneratedWordEach(Char){
  for(let i=0;i<4;i++){
    str[i] = Char[Math.floor(Math.random()*index)]
  }
  return str.join('')
}

@Entry
@Component
struct Test {
  @State account: String = ''
  @State PassWord: String = ''
  @State accounttext: string = '手机号/邮箱'
  @State PassWordtext: string = '密码'
  @State Verify: string = randomlyGeneratedWordEach(Char)
  build(){
    Column(){
      Row(){
        Image($r('app.media.logo')).width('100%').height('120').backgroundImageSize(ImageSize.Auto)
      }.width('100%').height('30%')
      Column(){
        Row(){
          Text('欢迎~').fontSize(32).fontWeight(FontWeight.Medium).fontColor('#666').width('100%').textAlign(TextAlign.Center)
        }.width('100%').height('15%').borderRadius(10).shadow({radius: 20, color:'#f0f0f0', offsetX: 8, offsetY: 8})
        Flex({direction: FlexDirection.Column,justifyContent: FlexAlign.SpaceAround,alignItems: ItemAlign.Center}){
          TextInput({placeholder: this.accounttext}).type(InputType.Email).width('95%').height(60).borderRadius(10)
          TextInput({placeholder: this.PassWordtext}).type(InputType.Password).width('95%').height(60).borderRadius(10)
          // 验证码
          Row(){
            TextInput({placeholder: '验证码'}).type(InputType.Email).width('50%').height('100%')
              .onChange(value=>{
                T = value;
                return
              })
            Text(this.Verify).fontSize(24).width('50%').textAlign(TextAlign.Center).height('100%')
              .onClick(()=>{
                this.Verify = randomlyGeneratedWordEach(Char)
                return
              })
          }.width('95%').height(60).borderRadius(10)
          Button(){
            Text('登录').fontSize('25').fontWeight(FontWeight.Medium).width('100%').textAlign(TextAlign.Center).height('100%')
              .lineHeight(30)
          }.width('95%').height(60)
          .onClick(()=>{
            if(this.account === ''){
              promptAction.showToast({message: '请填写手机号或者邮箱'});
              return;
            }
            if (this.PassWord === '') {
              promptAction.showToast({message: '请填写密码'});
              return;
            }
            if (this.Verify === T) {
              promptAction.showToast({message: '请输入正确的验证码'});
            }
          })
          .backgroundColor('#ff5b8cdd')
        }.width('100%').height('85%')
      }.width('95%').height('50%')
      .borderRadius(30)
      .shadow({
        radius: 10,
        color: '#f0f0f0',
        offsetX: 8,
        offsetY: 16
      })
      .padding({top:10})
      Row(){
        Flex({direction: FlexDirection.Column,justifyContent: FlexAlign.SpaceAround,alignItems: ItemAlign.Center}){
          Row(){
            Divider().width('25%')
            Text('第三方登录')
              .fontSize(16)
              .margin(10)
            Divider().width('25%')
          }.width('100%').justifyContent(FlexAlign.Center)
          Row(){
            Image($r('app.media.weixin')).width(60).height(60)
            Image($r('app.media.QQ')).width(60).height(60)
            Image($r('app.media.zhifubao')).width(60).height(60)
          }.width('100%').justifyContent(FlexAlign.SpaceAround)
        }.width('100%').height('100%')

      }.width('100%').height('20%')
    }.width('100%').height('100%')
  }
}

第三方登录

第三方登录


更多关于HarmonyOS 鸿蒙Next中兔鲜儿登录界面的简单用户交互界面的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

赞

更多关于HarmonyOS 鸿蒙Next中兔鲜儿登录界面的简单用户交互界面的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


加油哦，

在HarmonyOS鸿蒙Next中，兔鲜儿登录界面的用户交互界面可以通过ArkUI框架实现。ArkUI是鸿蒙系统提供的一套声明式UI开发框架，支持TypeScript和JavaScript语言开发。登录界面通常包括用户名输入框、密码输入框、登录按钮等组件。

  1. 布局设计：使用Flex或Column布局来排列界面元素。Column可以垂直排列组件，适合登录界面的布局。

  2. 输入框组件：使用TextInput组件来实现用户名和密码的输入。可以通过placeholder属性设置提示文本，type属性设置为password来隐藏密码输入。

  3. 按钮组件：使用Button组件来实现登录按钮。可以通过onClick事件绑定登录逻辑。

  4. 状态管理：使用@State装饰器来管理输入框的值和按钮的状态。例如，当用户名和密码输入框都非空时，启用登录按钮。

  5. 样式设计：通过style属性来设置组件的样式，如字体大小、颜色、边距等。

  6. 交互逻辑：在登录按钮的onClick事件中，编写验证用户名和密码的逻辑，并根据验证结果进行页面跳转或提示错误信息。

以下是一个简单的代码示例：

import { Column, TextInput, Button, State } from '@ohos.arkui';

@Entry
@Component
struct LoginPage {
  @State username: string = '';
  @State password: string = '';

  build() {
    Column() {
      TextInput({ placeholder: '请输入用户名' })
        .onChange((value: string) => {
          this.username = value;
        });

      TextInput({ placeholder: '请输入密码', type: 'password' })
        .onChange((value: string) => {
          this.password = value;
        });

      Button('登录')
        .enabled(this.username !== '' && this.password !== '')
        .onClick(() => {
          // 登录逻辑
        });
    }
    .padding(20)
    .width('100%')
    .height('100%');
  }
}

这个示例展示了如何使用ArkUI框架实现一个简单的登录界面，包括输入框、按钮和基本的交互逻辑。

在HarmonyOS鸿蒙Next中，设计兔鲜儿登录界面的简单用户交互界面（UI）可遵循以下步骤：

  1. 布局设计：使用Stack或Column组件，垂直排列登录元素，包括Logo、用户名输入框、密码输入框和登录按钮。

  2. Logo显示：使用Image组件展示兔鲜儿Logo，放置在界面顶部。

  3. 输入框设计：使用TextField组件创建用户名和密码输入框，设置占位符提示用户输入，密码输入框需启用安全输入模式。

  4. 登录按钮：使用Button组件创建登录按钮，设置点击事件处理登录逻辑。

  5. 交互反馈：登录成功后，使用Toast或Dialog组件提示用户，失败时同样给予相应提示。

  6. 样式与美化：应用TextStyle和ButtonStyle等样式属性，提升界面美观度。

示例代码：

Column({ space: 20 }) {
  Image($r('app.media.logo')).width(100).height(100)
  TextField({ placeholder: '用户名' })
  TextField({ placeholder: '密码', inputType: InputType.Password })
  Button('登录', { onClick: () => { /* 登录逻辑 */ } })
}.padding(20)

此设计简洁直观，符合用户习惯，提升登录体验。

回到顶部