ArkUI 登录小案例学习

组件了解

容器/布局相关组件

Column()：列布局，内部组件可水平排序
Row()：行布局，内部组件上下排序
Navigator() 导航组件
Scroll()滚动组件

控件相关组件

Text() ：文本组件
TextInput()：文本输入框组件
Button() ：按钮组件
Image() ：图片组件
Blank() ：空白填充组件

其它组件

prompt.showToast() 系统提示组件

资源引用了解

调用方式：通过$r(资源索引)

系统/非系统资源区别：

位置：索引第一个.号前
区别：

• sys开头表示系统
• app开头表示项目自定义资源

资源类型：

位置：索引第一个.号后第二个.点号前
区别：

• float表示尺寸资源
• media表示图片资源
• color表示颜色资源

组件样式复用

通过 @Extend 复用

@Extend(组件名) function 复用方法名() {
   
	// 属性配置
}

引用自定义组件

1.声明组件可被外部调用，通过 export default 声明

@Component
export default struct 自定义组件{
    
}

2.其它地方引用是通过 import 导入

import 自定义组件名称 from './自定义组件.ets'

修饰器了解

组件修饰器

@Entry ：表示显示哪个组件，一个文件有且只有一个入口
@Component：表明该结构体是组件

变量修饰器

@State：修饰变量，需初始化赋值
@Prop ：修饰变量，无需初始化赋值，需通过外部传值，一般用在自定义组件传参使用

案例代码

登录界面

// 导入使用 import
import prompt from '@system.prompt'; // 导入系统提示库
import sleep from 'sleep-promise' // 导入异步库
// 组件样式复用
@Extend(Text) function input () {
   
  .fontSize($r("sys.float.id_text_size_sub_title1"))
  .fontColor($r("sys.color.id_color_text_primary"))
  .width('100%')
  .padding(20)
}


@Entry
@Component
struct login {
   
// @State 声明变量为状态变量，需初始化给值
// @Watch('方法名') 给变量设置监听器

//  @State @Watch('onChange') agree: boolean = false
//  onChange() {
   
//    this.canLogin = this.user.length >= 3 && this.code.length >= 3
//  }
  @State agree: boolean = false
  @State canLogin: boolean = false
  @State user: string = 'lxj'
  @State code: string = '123'

// 校验名称和密码
  validate() {
   
    if (this.user.length >= 3 && this.code.length >= 3) {
   
      this.canLogin = true
    } else {
   
      this.canLogin = false
    }
  }

// 模拟远程登录
  async login()