HarmonyOS--从简单页面跳转开始2_harmoney @entry context

此处对上个页面跳转适当增加内容，主要为List组件和grid组件的使用，适当熟悉最基本的容器Row和Column的使用
Login.ets

// @ts-nocheck
import router from '@ohos.router';
@Entry
@Component
struct TextDemo {
  @State name:string =''
  @State password:string = ''
  build(){
    Column(){
      Row(){

      }.height('100')
      //图标
      Row(){
        Image($r('app.media.img'))
          .width(100)
          .height(100)
      }.height('100')
      Row(){
        Text('登录界面')
          .fontSize(25)
          .fontColor(0x000000)
      }.height(50)
      Row(){
        Text('登录账号以使用更多权限')
          .fontSize(20)
          .fontColor(0x999999)
      }.height(50)
      //账号
      Row(){
        TextInput({placeholder:'账号'})
          .placeholderColor(0x999999)
          .placeholderFont({
            size: 20,
            weight: FontWeight.Medium,
            family: 'cursive',
            style: FontStyle.Italic
          })
          .onChange((name : string)=>{
            this.name = name
            console.log('password:'+this.name)
          })
      }.height(50)
      //密码
      Row(){
        TextInput({placeholder:'密码'})
          .placeholderColor(0x999999)
          .placeholderFont({
            size: 20,
            weight: FontWeight.Medium,
            family: 'cursive',
            style: FontStyle.Italic
          })
          .type(InputType.Password)
          .onChange((password : string)=>{
            this.password = password
            console.log('password:'+this.password)
          })
      }.height(50)
      //短信验证 忘记密码
      Row(){
        Text('短信验证登录')
          .fontColor(0x0070ff)
        Text('忘记密码')
          .fontColor(0x0070ff)
      }
      .justifyContent(FlexAlign.SpaceAround)
      .height(50)
      .width('100%')
      //登录按钮
      Row(){
        Button('登录',{
          type:ButtonType.Capsule,
          stateEffect:true
        })
          .width('80%')
          .height(50)
          .fontSize(18)
          .onClick((event : ClickEvent)=>{
            if(this.name === '123456' && this.password === '123456'){
              router.pushUrl({
                url:'pages/LoginSuccess',
                params:{
                  name : this.name,
                  password : this.password
                }
              },
              router.RouterMode.Standard)
              console.log('登录成功'+this.name+this.password)
            }else {
              console.log('登录失败'+this.name+this.password)
            }
          })
      }.height(100)
      Row(){
        LoadingProgress()
          .width(100)
          .height(100)
      }.height(100)
      Row({space: 40}){
        Button('方式1',{
          type:ButtonType.Circle,
          stateEffect:true
        }).width(60)
          .height(60)
        Button('方式2',{
          type:ButtonType.Circle,
          stateEffect:true
        }).width(60)
          .height(60)

        Button('方式3',{
          type:ButtonType.Circle,
          stateEffect:true
        }).width(60)
          .height(60)

      }



    }.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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125

LoginSuccess.ets

import router from '@ohos.router';
import { DEFAULT } from '@ohos/hypium';
@Entry
@Component
struct LoginSuccess {
  @State message: string = 'Hello World'
  @State name: string = router.getParams()?.['name']
  @State password: string = router.getParams()?.['password']

  build() {
    Column(){
        Row(){
          Text('登录成功')
            .fontSize(15)
            .fontColor(0x000000)
        }.height(20)
      Row(){
        Text('用户名:'+this.name)
          .fontSize(15)
          .fontColor(0x000000)
      }.height(20)
      Row(){
        Text('密码:'+this.password)
          .fontSize(15)
          .fontColor(0x000000)
      }.height(20)
      Button('返回')
        .height('50')
        .width('100')
        .fontSize(20)
        .onClick((event: ClickEvent)=>{
            router.back({
              url:'pages/Login'
            })
        })
    }.width('100%')
  }

}
//使用List组件构建列表
/*
  * 1.定义列表数据对象：用于封装列表项数据
  * 2.创建列表数据数组：为列表创建数据源
  * 3.创建列表Item内容：构建列表项组件
  * 4.使用ForEach构建列表：遍历数据源渲染列表项
 */


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

List组件的使用：

• 1.定义列表数据对象：用于封装列表项数据
• 2.创建列表数据数组：为列表创建数据源
• 3.创建列表Item内容：构建列表项组件
• 4.使用ForEach构建列表：遍历数据源渲染列表项

1.定义列表数据对象

main/ets下新建common文件夹，common文件夹下新建bean文件夹，bean新建ArkTS文件

ItemData.ets

//1.定义列表数据对象
export default class ItemData{
  img?: Resource;
  title?: Resource;
  others?: Resource;

  constructor(img?: Resource,title?: Resource,others?: Resource) {
    this.img = img;
    this.title = title;
    this.others = others;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12

2.创建列表数据数组

ets新建viewmodel文件夹，新建MainViewModel.ets

//2.创建列表数据数组
import ItemData from '../common/bean/ItemDta';
export class MainViewModel{
  getSettingListData():Array<ItemData>{
    //定义数组
    let settingListData: ItemData[]=[
      new ItemData($r('app.media.menu'),$r('app.string.setting_list_menu'),null),
      new ItemData($r('app.media.data'),$r('app.string.setting_list_data'),null),
      new ItemData($r('app.media.about'),$r('app.string.setting_list_about'),null)
    ];
    return settingListData;
  }
}
export default new MainViewModel();//?
1
2
3
4
5
6
7
8
9
10
11
12
13
14

3.创建列表Item内容

4.使用ForEach构建列表

ets/view/setting.ets

import ItemData from '../common/bean/ItemData';
import MainViewModel from '../viewmodel/MainViewModel'
@Component
export default struct Setting{
  @Builder
  //单个List的渲染
  settingCell(item: ItemData){
    Row(){
      Row({space:12}){
        Image(item.img)
          .height($r('app.float.setting_img_height'))//自定义尺寸
          .width($r('app.float.setting_img_width'))
        Text(item.title)
          .fontSize(16)
      }
      if(item.others === null){
        Image($r('app.media.more'))
          .height(25)
          .width(25)
      }else {
        Toggle({type: ToggleType.Switch,
          isOn: false
        })
      }
    }
    .justifyContent(FlexAlign.SpaceBetween)
    .height(100)
    .width('100%')
  }
  //整个list的渲染

  build(){
    Scroll(){
      Column({space: 12}){
        List(){
          ForEach(MainViewModel.getSettingListData(),(item: ItemData)=>{
            ListItem(){
              this.settingCell(item)
            }.height(100)
          },item=>JSON.stringify(item))
        }
      }.height('50%')
    }

  }

}
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

grid组件的使用

1.定义列表数据对象

可使用List的ItemData.ets

2.创建列表数据数组

在MainViewModel中写方法

 getSettingGridData(): Array<ItemData>{
    let settingGridData: ItemData[] =[
      new ItemData($r('app.media.love'),$r('app.string.setting_grid_love')),
      new ItemData($r('app.media.history'),$r('app.string.setting_grid_history')),
      new ItemData($r('app.media.message'),$r('app.string.setting_grid_message')),
      new ItemData($r('app.media.shop'),$r('app.string.setting_grid_message')),
      new ItemData($r('app.media.target'),$r('app.string.setting_grid_target')),
      new ItemData($r('app.media.circle'),$r('app.string.setting_grid_circle')),
      new ItemData($r('app.media.collect'),$r('app.string.setting_grid_collect')),
      new ItemData($r('app.media.recycle'),$r('app.string.setting_grid_recycle')),
    ]
    return settingGridData;
  }
1
2
3
4
5
6
7
8
9
10
11
12
13

3\4 创建Item和使用ForEach

新建MyGrid.ets

@Component
export default struct MyGrid{
  build(){
    Grid(){
      ForEach(MainViewModel.getSettingGridData(),(item: ItemData)=>{
          //单个grid
        GridItem(){
          Column(){
            Image(item.img)
              .height(40)
              .width(40)
            Text(item.title)
          }.height(70)
            .width(70)
            .backgroundColor(0x999999)
        }
      },item=>JSON.stringify(item))
    }
    .rowsTemplate('1fr 1fr') //2行
    .columnsTemplate('1fr 1fr 1fr 1fr')// 4列
    .rowsGap(12)
    .columnsGap(5)
    .height(150)
    .width('100%')
    .margin({
      top:10,
      bottom:10
    })
  }
}
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