DevEcoStudio版本：DevEco Studio NEXT Developer Beta1

SDK版本：5.0.3.403

API版本：12
1.
2.
3.
4.
5.

Windows：
操作系统：Windows 10/11 64 位
内存：16GB及以上
硬盘：100GB 及以上
分辨率：1280*800 像素及以上

macOS
操作系统：macOS(X86) 11/12/13/14 macOS(ARM) 12/13/14
内存：8GB及以上
硬盘：100GB 及以上
分辨率：1280*800 像素及以上
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

Windows：
操作系统：Windows 10/11 64 位
内存：推荐使用16GB及以上，最小8GB
硬盘：100GB 及以上
分辨率：1600*900 像素及以上

macOS
操作系统：macOS(X86) /12/13/14 macOS(ARM) 12/13/14
内存：推荐使用16GB及以上，最小8GB
硬盘：100GB 及以上
分辨率：1600*900 像素及以上
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

hi: string = 'hello'; 
1.

count_1 : number = 24
count_2 : number = 3.14; 
count_3 : number = 1e10;
1.
2.
3.

let isDone: boolean = false;
let Done: boolean = true;
1.
2.

name_1 :string = '双引号，单引号都可以'
name_2 :string = 'Hello, world!\n'; 
name_3 :string= 'this is a string'; 
name_4 :string = `The result is ${a}`;
1.
2.
3.
4.

names: string[] = ['Alice', 'Bob', 'Carol'];
1.

  person : [string,number,boolean] = ['新年快乐',2024,true]
1.

Column() {  // Column容器组件，用于垂直排列子元素  
  //Colum容器组件  
  Column({space:20}){  // 带有间距的Column容器  
    Text($r('app.string.wenben1'))  // 显示资源文件中的字符串  
      .fontSize(50)  // 设置字体大小  
      //ff0000  
      .fontColor(Color.Red)  // 设置字体颜色，十六进制、直接、调用  
      //400正常的，800最高  
      .fontWeight(800) // 设置字体粗细  
    Text("文本2").fontSize(20)  // 简单的文本显示  
    Text("文本3").fontSize(20)  
    Text("文本4").fontSize(20)  
  }  
  .height("50%")  
  .justifyContent(FlexAlign.Center)  // 设置子元素在主轴的居中对齐  
  //Row容器组件  
  Row(){  // Row容器组件，用于水平排列子元素  
    Text("文本1").fontSize(20)  
    Text("文本2").fontSize(20)  
    Text("文本3").fontSize(20)  
    Text("文本4").fontSize(20)  
  }.justifyContent(FlexAlign.Center)  // 设置子元素在主轴的居中对齐
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.

Text('我是一段文本')
1.

Text($r('app.string.module_desc'))
  .baselineOffset(0)
  .fontSize(30)
  .border({ width: 1 })
  .padding(10)
  .width(300)
1.
2.
3.
4.
5.
6.

Text("文本1")  // 显示资源文件中的字符串  
  .fontSize(50)  // 设置字体大小  
  //ff0000  
  .fontColor(Color.Red)  // 设置字体颜色，十六进制、直接、调用  
  //400正常的，800最高  
  .fontWeight(800) // 设置字体粗细  
Text("文本2").fontSize(20)  // 简单的文本显示
1.
2.
3.
4.
5.
6.
7.

Image($r('app.media.icon'))  // 显示图片资源  
  .width(80)  // 设置图片宽度  
  .height(80)  // 设置图片高度  
  .borderRadius(90)  // 设置图片边框圆角
1.
2.
3.
4.

Column({space:20}) {  // 一个Column容器
  TextInput({ text: '15937895215' }).fontSize(20) // 输入框，初始文本  
    .width("80%") // 设置宽度  
    .height(50)  // 设置高度  
  TextInput({ placeholder: '密码' }).fontSize(20) // 带占位符的输入框（提示文本）  
    .type(InputType.Password) // 设置输入类型为密码  
    .width("80%")  
    .height(50)  
    .backgroundColor(Color.Red) // 设置背景颜色  
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

Button("登录") // 按钮  
  .width("20%") // 设置宽度  
  .fontSize(20) // 设置字体大小  
  .type(ButtonType.Circle) // 设置按钮类型为圆形
1.
2.
3.
4.

Button(){  
  Text("登录") // 按钮  
    .fontSize(20) // 设置字体大小  
}.type(ButtonType.Normal) // 设置按钮类型为正常类型  
.width("20%").height(40)  
.borderRadius(10) //设置按钮圆角  
.backgroundColor("#ff0000") //设置按钮背景元素
1.
2.
3.
4.
5.
6.
7.

Button('Disable', { type: ButtonType.Capsule, stateEffect: false }) 
  .backgroundColor(0x317aff) 
  .width(90)
  .height(40)
1.
2.
3.
4.

Button('Circle', { type: ButtonType.Circle, stateEffect: false }) 
  .backgroundColor(0x317aff) 
  .width(90) 
  .height(90)
1.
2.
3.
4.

Button('Ok', { type: ButtonType.Normal, stateEffect: true }) 
  .borderRadius(8) 
  .backgroundColor(0x317aff) 
  .width(90)
  .height(40)
1.
2.
3.
4.
5.

import { router } from '@kit.ArkUI'  
  
@Entry  
@Component  //@Entry 和 @Component 是ArkUI中的装饰器，用于定义组件的入口和组件本身。@Entry 表示这个组件是应用的入口组件，@Component 表示这是一个组件  
struct Login { //定义了一个名为Login的组件结构体  
  
  build() {  //是组件的构建方法，用于定义组件的UI结构  
    Column({space:50}) {  //开始一个垂直布局（Column），space:50 表示子元素之间的间隔为50vp  
     //任务列表App  
      Text("任务列表APP").fontSize(40).fontWeight(FontWeight.Bold)  //显示文本“任务列表APP”，字体大小为40vp，字体加粗。  
      //手机号密码输入框  
      Column({space:20}) {  //开始另一个垂直布局，用于放置手机号和密码输入框等控件，子元素间隔为20vp  
        TextInput({ placeholder: '手机号' })//创建一个文本输入框，提示文本为“手机号”，并设置了一系列样式属性，如字体大小、宽度、高度、类型、边框半径等。  
          .fontSize(20)  
          .width("80%")  
          .height(40)  
          .type(InputType.Normal)  
          .borderRadius(15)  
         // .backgroundColor(Color.Pink)  
        TextInput({ placeholder: '密码' }) //类似上一个输入框，但用于输入密码，并设置了密码类型  
          .fontSize(20)  
          .width("80%")  
          .height(40)  
          .type(InputType.Normal)  
          .borderRadius(15)  
          .type(InputType.Password)  
          // .backgroundColor(Color.Pink)  
        //我已阅读并同意协议  
        Row({ space: 5 }) { //子元素间隔为5vp  
          Checkbox().width(22)  //添加一个复选框，并设置宽度为22vp  
          //协议颜色不一样  
          Row() {  //开始另一个水平布局，用于放置“我已阅读并同意”及其后的文本  
            Text("我已阅读并同意").fontSize(14)  
            Text("服务协议").fontSize(14).fontColor(Color.Blue)//在Row内使用Text控件拼接出“我已阅读并同意”以及两个不同颜色的文本（服务协议和QQ保护指引），并通过fontColor设置特定文本的颜色。  
            Text("与").fontSize(14)  
            Text("QQ保护指引").fontSize(14).fontColor(Color.Blue)  
          }  
        }  
        //按钮  
        Button() { //开始定义一个按钮  
          Text("登录")  
            .fontSize(20)  
            .fontColor(Color.White)  
            .fontWeight(FontWeight.Bold)  
            .onClick(()=>{  
  
            })  
        }.width(100) //结束按钮的文本设置，并设置按钮的宽度和高度  
        .height(40)  
      }  
    }    .backgroundImage($r('app.media.background1')) //设置整个Column的背景图片，图片资源通过$r函数引用  
    .backgroundImageSize({width:'100%',height:"100%"}) //设置图片的大小，宽高为100%,占满整页  
    .justifyContent(FlexAlign.Center) //设置Flex容器（Column）的主轴对齐方式为居中  
    .height('100%')//设置Column的高度和宽度为父容器的100%，即全屏显示  
    .width('100%')  
  }  
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.