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

news2024/11/26 20:28:48

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/615901.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

vue2 + antd 封装动态表单组件（三）

vue2 + antd 封装动态表单组件（三）

最近有小伙伴在问动态表单如何再次封装&#xff0c;比如配合模态框或者抽屉封装多一层&#xff0c;这样可以大大提高开发效率&#xff0c;结合之前的写的 vue2 antd 封装动态表单组件&#xff08;一&#xff09; vue2 antd 封装动态表单组件&#xff08;二&#xff09; 做了…
阅读更多...
【技术选型】时序数据库选型

【技术选型】时序数据库选型

文章目录 1、前言2、概述2.1 时序数据库的定义2.2 时序数据库的概念2.3 时序数据库的趋势 3、时序数据库对比3.1 influxdb3.2 Prometheus3.3 TDengine3.4 DolphinDB 4、选型结论 1、前言 时序数据治理是数据治理领域核心、打通IT与OT域数据链路&#xff0c;是工业物联网基石、…
阅读更多...
Macos中Automator自动操作实现文本加解密、Json格式化、字数统计等操作

Macos中Automator自动操作实现文本加解密、Json格式化、字数统计等操作

文章目录 一、说明打开Automator效果 二、文本加密三、文本解密四、Json格式化五、字数统计 一、说明 在 Automator 的工作流程中&#xff0c;动作是按照从上到下的顺序执行的&#xff0c;每一个动作的输出默认会成为下一个动作的输入。 打开Automator Command 空格 &#…
阅读更多...
万万没想到系列，世界上最知名的失败建筑设计合集！

万万没想到系列，世界上最知名的失败建筑设计合集！

​ 大家好&#xff0c;这里是建模助手。 我们生活在由建筑包围的世界里&#xff0c;生活的面貌造就了建筑的多样性。而矗立的建筑也无言的记录着时代&#xff0c;尤其是一些建筑大师们的作品&#xff0c;可谓是集艺术和美学于一体的一流名作。 但&#xff0c;这不是凡事都有例…
阅读更多...
虚拟内存原理介绍

虚拟内存原理介绍

文章目录 1. 虚拟内存介绍2. 虚拟寻址3. 虚拟地址空间3. 页表4. 地址翻译5. TLB加速地址翻译6. 多级页表7. 页面置换算法 1. 虚拟内存介绍 我们知道系统中的所有进程都是共享CPU和主存资源&#xff0c;但这样就会存在一个问题&#xff0c;这么多进程怎么知道主存上的一块内存是…
阅读更多...
使用Java语言开发高效易用的--雅书阁商城管理系统

使用Java语言开发高效易用的--雅书阁商城管理系统

使用Java语言开发雅书阁商城管理系统 如果你正在寻找一种简单而优雅的方式来管理图书&#xff0c;那么使用Java语言开发雅书阁商城管理系统就是一个好选择。下面我们来详细介绍这个系统的开发过程。 效果展示 1.首页 2.注册界面 3.登录成功商城首页 4.购物车 5.电子书…
阅读更多...
避开测试开发的常见陷阱：一份实战指南

避开测试开发的常见陷阱：一份实战指南

陷阱一&#xff1a;过度依赖自动化测试 过度依赖自动化测试可能导致对复杂的用户交互和体验不够重视。自动化测试的力量在于它的一致性和覆盖广泛的可能性&#xff0c;但人工测试也同样重要&#xff0c;尤其是对于用户体验和复杂的用户交互。 示例&#xff1a;在一个电商网站…
阅读更多...
ROS和ROS2使用

ROS和ROS2使用

ubuntu20.04下安装qt5.12 https://blog.csdn.net/lj19990824/article/details/121013721 Ubuntu 20.04在桌面左侧边栏添加QT creator快捷图标 https://blog.csdn.net/kavieen/article/details/118695038 Qt和ROS&#xff1a;https://github.com/chengyangkj?tabrepositories…
阅读更多...
操作系统原理 —— 内存覆盖与交换（十九）

操作系统原理 —— 内存覆盖与交换（十九）

什么情况下需要覆盖与交换 要弄清楚什么是覆盖与交换的概念&#xff0c;首先我们要知道在什么情况下才会使用到覆盖与交换。 在早期的计算机内存很小的时候&#xff0c;比如 IBM 推出的第一台 PC 机最大只支持 1 MB 大小的内存&#xff0c;因此会经常出现内存大小不够的情况&…
阅读更多...
c++函数重载与运算符重载基础

c++函数重载与运算符重载基础

什么是重载 重载&#xff0c;简单说&#xff0c;就是函数或者方法有相同的名称&#xff0c;但是参数列表不相同的情形&#xff0c;这样的同名不同参数的函数或者方法之间&#xff0c;互相称之为重载函数或者方法。 重载的作用&#xff1a;重载函数常用来实现功能类似而所处理的…
阅读更多...
【C语言】数组和字符串

【C语言】数组和字符串

目录 数组和字符串 概述 一维数组 一维数组的定义和使用 一维数组的初始化 数组名 二维数组 字符数组与字符串 字符数组与字符串区别 数组和字符串 概述 在程序设计中&#xff0c;为了方便处理数据把具有相同类型的若干变量按有序形式组织起来——称为数组。 数组就…
阅读更多...
紧接上文，基于轻量级yolov5s模型开发构建手写甲骨文检测识别系统

紧接上文，基于轻量级yolov5s模型开发构建手写甲骨文检测识别系统

在我之前的文章中&#xff0c;关于手写文字、手写数字、手写字母的检测识别相关的项目都有了不少的实践了&#xff0c;这里就不在赘述了&#xff0c;感兴趣的话可以自行移步阅读即可。 《基于轻量级目标检测模型实现手写汉字检测识别计数》 《python开发构建基于机器学习模型…
阅读更多...
【ICEM CFD】导入模型后，即使勾选point和curve也看不到几何模型上的点和线

【ICEM CFD】导入模型后，即使勾选point和curve也看不到几何模型上的点和线

一、问题背景 导入模型后&#xff0c;即使勾选point和curve也看不到几何模型上的点和线。 二、解决办法 原来导入模型后&#xff0c;往往第一步最需要操作的是&#xff01;&#xff01;&#xff01; 构建拓扑&#xff01;&#xff01;&#xff01; Build Diagnostic Topolo…
阅读更多...
完美解决safari、微信浏览器下拉回弹效果、包含微信小程序 webview 套H5页面下拉效果。

完美解决safari、微信浏览器下拉回弹效果、包含微信小程序 webview 套H5页面下拉效果。

如题&#xff0c;解决微信小程序、公众号 下拉回弹橡皮筋效果&#xff0c; 屏蔽掉 “此网页由XXXXX提供”; // 禁止页面上下整体滑动 document.body.style.overflow "hidden"
阅读更多...
基于Jmeter+ant+Jenkins+钉钉机器人群通知的接口自动化测试

基于Jmeter+ant+Jenkins+钉钉机器人群通知的接口自动化测试

前言 搭建jmeterantjenkins环境有些前提条件&#xff0c;那就是要先配置好java环境&#xff0c;本地java环境至少是JDK8及以上版本&#xff0c;最好是JAVA11或者JAVA17等较高的java环境&#xff0c;像jenkins这种持续构建工具基本都在向上兼容JAVA的环境&#xff0c;以前的JAV…
阅读更多...
为什么网络安全人口很稀缺，招聘人数却很少？

为什么网络安全人口很稀缺，招聘人数却很少？

2020年我国网络空间安全人才数量缺口超过了140万&#xff0c;就业人数却只有10多万&#xff0c;缺口高达了93%。这里就有人会问了&#xff1a; 1、网络安全行业为什么这么缺人&#xff1f; 2、明明人才那么稀缺&#xff0c;为什么招聘时招安全的人员却没有那么多呢&#xff1…
阅读更多...
常见数据库(MSSQL,Mysql,PostgreSQL,Oracle)安装注意事项

常见数据库(MSSQL,Mysql,PostgreSQL,Oracle)安装注意事项

常见数据库安装注意事项 &#xff08;原标题: DataWindowHTTP数据库安装&#xff09; 转载请保留版权消息勿删除&#xff1a;&#xff08;谢绝转载到任何文档网站&#xff01;&#xff09; blog.csdn.net/chengg0769 http://www.powerbuilder.ltd http://www.haojiaocheng.…
阅读更多...
设计模式（行为型模式）之：Observer（观察者模式）

设计模式（行为型模式）之：Observer（观察者模式）

文章目录 动机使用场景代码实现类图结构模式分析&#xff1a; 动机 在软件构建过程中&#xff0c;我们需要为某些对象建立一种“通知依赖关系” - 一个对象&#xff08;目标对象&#xff09;的状态改变&#xff0c;所有的依赖对象&#xff08;观察者对象&#xff09;都将得到通…
阅读更多...
绝不能错过！8款AI文案神器，让你轻松写出优质文案

绝不能错过！8款AI文案神器，让你轻松写出优质文案

无论你是否准备好&#xff0c;它们都已经来了。如果你知道如何使用它们&#xff0c;AI文案工具可以成为你的新朋友。 现在AI文案工具无处不在&#xff0c;眼花缭乱&#xff0c;从内容生成器到电子商务聊天机器人。原因很简单&#xff1a;AI可以节省大量时间和金钱。这是我们都喜…
阅读更多...
markdown 编辑器使用

markdown 编辑器使用

在博客开头加上 [TOC](这是你的目录标题)就可以根据博客内容自动生成如下所示的目录&#xff1a; 这是你的目录标题 Markdown 编辑器功能快捷键合理的创建标题&#xff0c;有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表无序…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023