HarmonyOS--从简单页面跳转开始2

飞花落雨中

已于 2023-12-20 16:26:46 修改

阅读量427

点赞数

分类专栏： HarmonyOS入门文章标签：鸿蒙

于 2023-06-06 15:41:42 首次发布

本文链接：https://blog.csdn.net/qq_44761778/article/details/131051043

版权

HarmonyOS入门专栏收录该内容

6 篇文章 3 订阅

订阅专栏

此处对上个页面跳转适当增加内容，主要为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%')

  }
}

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构建列表：遍历数据源渲染列表项
 */

List组件的使用：

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

1.定义列表数据对象

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

![在这里插入图片描述](https://img-blog.csdnimg.cn/b61169c5d56d48b3a7f9f1e076ba6bd4.png

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;
  }
}

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();//?

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%')
    }

  }

}

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;
  }

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
    })
  }
}

飞花落雨中

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HarmonyOS--从简单页面跳转开始2

main/ets下新建common文件夹，common文件夹下新建bean文件夹，bean新建ArkTS文件//1.定义列表数据对象 export default class ItemData {img?: Resource;title?: Resource;others?: Resource;} }可使用List的ItemData.ets。
复制链接

扫一扫