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

已于 2023-12-20 16:26:22 修改
阅读量618 收藏
点赞数
分类专栏： HarmonyOS入门 文章标签： 鸿蒙 typescript
于 2023-06-07 10:31:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44761778/article/details/131082208
版权

熟悉基本的布局简单使用Tabs、list、grid做一个类似微信登录的页面
在这里插入图片描述
图片素材链接

先准备登录页面和登录跳转页，主要router的使用
跳转页Tabs
在这里插入图片描述
Tabs的简单使用

@Entry
@Component
struct TabsExample {
  private controller: TabsController = new TabsController()

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Green)
        }
        .tabBar('green')

        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Blue)
        }
        .tabBar('blue')

        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Yellow)
        }
        .tabBar('yellow')

        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Pink)
        }
        .tabBar('pink')
      }
      .barWidth('100%') // 设置TabBar宽度
      .barHeight(60) // 设置TabBar高度
      .width('100%') // 设置Tabs组件宽度
      .height('100%') // 设置Tabs组件高度
      .backgroundColor(0xF5F5F5) // 设置Tabs组件背景颜色
    }
    .width('100%')
    .height('100%')
  }
}

效果图：
在这里插入图片描述
至于List和Grid见上篇
代码目录
在这里插入图片描述
各代码如下：
ContactPerson.ets

export default class ContactPerson{
  img?: Resource;
  title?: string;
  others?: string;

  constructor(img?: Resource,title?: string,others?: string) {
    this.img = img;
    this.title = title;
    this.others = others;
  }
}

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

home.ets

import App from '@system.app';
import TabMe from '../view/TabMe';
import router from '@ohos.router';
import TabDiscover from '../view/TabDiscover';
import TabBook from '../view/TabBook';
@Entry
@Component
struct Home {
  @State name: string = router.getParams()?.['name']
  @State password: string = router.getParams()?.['password']
  @State currentIndex: number = 0;
  private tabsController:TabsController = new TabsController();
  //单个tab布局
  @Builder
  TabBuilder(title: string,index: number,selectImg: Resource,normalImg: Resource){
    Column(){
      Image(this.currentIndex === index ? selectImg : normalImg)
        .width(30)
        .height(30)
      Text(title)
        .fontColor(this.currentIndex === index ? 0x00ff00 : 0x000000)
        .fontSize(20)
        .margin({
          top:10
        })
    }
    .width(70)
    .height(70)
    .justifyContent(FlexAlign.Center)
    .onClick((event : ClickEvent)=>{
        this.currentIndex = index;
        this.tabsController.changeIndex(this.currentIndex);
    })
  }

  //页签切换tabs
  build() {
    Tabs({
        barPosition: BarPosition.End,
        controller:this.tabsController
    }){
        TabContent(){
          Column(){
              Row(){
                Image($r('app.media.contact_person'))
                  .height(70)
                  .width(70)
                  .margin({
                    left:20
                  })
                Column(){
                  Text('晴天小霹雳')
                    .fontSize(25)
                    .height(40)
                  Text('我们互删吧')
                    .fontSize(20)
                    .fontColor(0xff0000)
                    .height(30)
                }.margin({
                  left:30
                })
              }.height(70)
              .width('100%')
          }.height('100%')

        }.tabBar(this.TabBuilder('微信',0,$r('app.media.tab_wechat_select_y'),$r('app.media.tab_wechat_select_n')))
        TabContent(){
          Column(){
            TabBook()
          }.height('100%')

        }.tabBar(this.TabBuilder('通讯录',1,$r('app.media.tab_book_select_y'),$r('app.media.tab_book_select_n')))
        TabContent(){
          TabDiscover()
        }.tabBar(this.TabBuilder('发现',2,$r('app.media.tab_discover_select_y'),$r('app.media.tab_discover_select_n')))
        TabContent(){
          Column(){
            Row(){
              Image($r('app.media.admin_img'))
                .height(100)
                .width(100)
                .margin({
                  left:20
                })
              Column(){
                Text(this.name)
                  .fontSize(20)
                  .height(65)
                Text('用户名:'+this.name)
                  .fontSize(15)
                  .height(35)
              }
            }.height(100)
              .width('100%')
              TabMe()
          }

        }.tabBar(this.TabBuilder('我',3,$r('app.media.tab_me_select_y'),$r('app.media.tab_me_select_n')))
    }
    .vertical(false)
    .barWidth('100%')
    .barHeight(70)
    .onChange((index: number)=>{
      this.currentIndex = index;
    })
  }
}

Login.ets

import Router from '@system.router'
import router from '@ohos.router'
@Entry
@Component
struct Login {
  @State name:string = '' //写成大写的会undefined
  @State password:string = ""
  build() {
    Column(){
      //图标居中
      Row(){
        Image($r('app.media.login_'))
          .height(80)
          .width(80)
      }.margin({
        top:120
      })
      .justifyContent(FlexAlign.Center)
      .width('100%')
      //文字居中
      Row(){
        Text('账号登录')
          .fontSize(30)
          .fontColor(0x000000)
      }
        // .alignItems(VerticalAlign.Center)
        .margin({
          top:40
        })
      .justifyContent(FlexAlign.Center)
      .width('100%')

      //账号输入框
      TextInput({
        placeholder:'账号:'
      }).placeholderColor(0x999999)
        .placeholderFont({
          size:25,
          weight:FontWeight.Medium,
          family: 'cursive',
          style:FontStyle.Italic //斜体
        })
        .margin({
          top:20
        })
        .onChange((name: string)=>{
          this.name = name;
        })
      //密码输入框
      TextInput({
        placeholder:'密码:'
      }).placeholderColor(0x999999)
        .placeholderFont({
          size:25,
          weight:FontWeight.Medium,
          family: 'cursive',
          style:FontStyle.Italic //斜体
        })
        .type(InputType.Password)
        .margin({
          top:20
        })
        .onChange((password: string)=>{
          this.password = password;
        })
      //文字
      Row(){
        Text('短信验证')
          .fontColor(0x0070ff)
          .fontSize(20)
        Text('忘记密码')
          .fontColor(0x0070ff)
          .fontSize(20)
      }.justifyContent(FlexAlign.SpaceAround)
      .width('100%')
      .margin({
        top:40
      })

      Button('登   录')
        .type(ButtonType.Capsule)//当开启按压态显示效果，开发者设置状态样式时，会基于状态样式设置完成后的背景色再进行颜色叠加。
        .stateEffect(true)
        .fontSize(20)
        .width('80%')
        .margin({
          top:50
        })
        .onClick(()=>{
          if(this.name === '123' && this.password ==='123'){
            router.pushUrl({
              url:'pages/home',
              params:{
                name : this.name,
                password : this.password
              }
            },router.RouterMode.Standard)

            console.log('登录成功'+this.name+this.password)
          }else {
            console.log('登录失败'+this.name+this.password)
          }
        })


    }
  }
}

TabBook.ets

import ContactPerson from '../common/bean/ContactPerson'
import ItemData from '../common/bean/ItemData'
import MainViewModel from '../viewmodel/MainViewModel'
@Component
export default struct TabBook{

  @Builder
  buildContactPerson(itemPerson: ContactPerson){
    Row(){
      Image(itemPerson.img)
        .height(50)
        .width(50)
        .margin({
          left:20
        })
      Text(itemPerson.title)
        .height(50)
        .width(150)
        .fontSize(18)
        .margin({
          left:30
        })
    }.height(50)
    .width('100%')
    .margin({
      left:10,
      top:10
    })
  }

  build(){
    Column(){
      //Grid
      Grid(){
        ForEach(MainViewModel.getTabBookGridData(),(item: ItemData)=>{
          GridItem(){
            Row(){
              Image(item.img)
                .height(50)
                .width(50)
                .objectFit(ImageFit.Fill)
                .margin({
                  left:10
                })
              Text(item.title)
                .height(50)
                .width(150)
                .fontSize(25)
                .margin({
                  left:30
                })
            }.width('100%')
            .justifyContent(FlexAlign.Start)
          }
        },item=>JSON.stringify(item))
      }
      .rowsTemplate('1fr 1fr')
      .columnsTemplate('1fr')
      .columnsGap(10)
      .height(110)
      .width('100%')
      .margin({
        top:20
      })
      //text
      Row(){
        Text('我的联系人')
          .fontSize(20)
          .fontColor(0x999999)
          .width('100%')
          .margin({
            left:20,
            top:50
          })
      }.justifyContent(FlexAlign.Start)

      //List
      Scroll(){
        Column(){
          List({space:12}){
            ForEach(MainViewModel.getTabBookListData(),(itemPerson: ContactPerson)=>{
              ListItem(){
                this.buildContactPerson(itemPerson);
              }
            },itemPerson=>JSON.stringify(itemPerson))
          }
        }
      }
      .height(450)
      .scrollable(ScrollDirection.Vertical)
      .margin({
        top:20
      })
      

    }
  }
}

TabMe.ets

import ItemData from '../common/bean/ItemData'
import MainViewModel from '../viewmodel/MainViewModel'
@Component
export  default struct TabMe {
  @Builder
  buildMe(item: ItemData){
      Row(){
        Image(item.img)
          .height(50)
          .width(50)
          .objectFit(ImageFit.Fill)
          .margin({
          left:20
        })
        Text(item.title)
          .height(50)
          .width(100)
          .fontSize(25)
          .margin({
            left:30
          })
        if(item.others === null){
          Image($r('app.media.me_more'))
            .height(30)
            .width(30)
            .margin({
              left:100
            })
        }
      }.width(50)
        .margin({
          top:20
        })
  }

  build(){
    Column(){
      List(){
        ForEach(MainViewModel.getTabMeListData(),(item: ItemData)=>{
          ListItem(){
            this.buildMe(item);
          }.height(50)
        },item=>JSON.stringify(item))

      }
    }.height('100%')
    .width('100%')
    .margin({
      top:50
    })

  }
}

TabDiscover.ets

import ItemData from '../common/bean/ItemData'
import MainViewModel from '../viewmodel/MainViewModel'
@Component
export default struct TabDiscover{
  @Builder
  buildDiscover(item: ItemData){
    Row(){
      Image(item.img)
        .height(50)
        .width(50)
        .objectFit(ImageFit.Fill)
        .margin({
          left:20
        })
      Text(item.title)
        .height(50)
        .width(100)
        .fontSize(25)
        .margin({
          left:30
        })
      if(item.others === null){
        Image($r('app.media.me_more'))
          .height(30)
          .width(30)
          .margin({
            left:100
          })
      }
    }.width(50)
    .margin({
      top:20
    })
  }
  build(){
    Column(){
      Row(){
        Text('发现')
          .fontSize(23)
          .fontStyle(FontStyle.Normal)
      }.justifyContent(FlexAlign.Center)
      List(){
        ForEach(MainViewModel.getTabDiscoverListData(),(item: ItemData)=>{
          ListItem(){
            this.buildDiscover(item);
          }.height(50)
        },item=>JSON.stringify(item))

      }
    }.height('100%')
    .width('100%')
    .margin({
      top:10
    })
  }
}

MainViewModel.ets

import ContactPerson from '../common/bean/ContactPerson';
import ItemData from '../common/bean/ItemData';
export  class MainViewModel{
  //数据数组列表
  getTabMeListData(): Array<ItemData>{
    let tabMeListData: ItemData[] = [
      new ItemData($r('app.media.me_server'),$r('app.string.me_server'),null),
      new ItemData($r('app.media.me_collect'),$r('app.string.me_collect'),null),
      new ItemData($r('app.media.me_circle'),$r('app.string.me_circle'),null),
      new ItemData($r('app.media.me_card'),$r('app.string.me_card'),null),
      new ItemData($r('app.media.me_emote'),$r('app.string.me_emote'),null),
      new ItemData($r('app.media.me_setting'),$r('app.string.me_setting'),null)
    ]
    return tabMeListData;
  }

  getTabDiscoverListData(): Array<ItemData>{
    let tabDiscoverListData: ItemData[] = [
      new ItemData($r('app.media.discover_circle'),$r('app.string.discover_circle'),null),
      new ItemData($r('app.media.discover_game'),$r('app.string.discover_game'),null),

    ]
    return tabDiscoverListData;
  }

  getTabBookGridData(): Array<ItemData>{
    let tabBookGridData: ItemData[] = [
      new ItemData($r('app.media.book_add'),$r('app.string.book_add'),null),
      new ItemData($r('app.media.book_group'),$r('app.string.book_group'),null)
    ]
    return tabBookGridData;
  }

  getTabBookListData(): Array<ContactPerson>{
    let tabBookListData: ContactPerson[] = [
      new ContactPerson($r('app.media.contact_person_1'),'联系人1',null),
      new ContactPerson($r('app.media.contact_person'),'联系人2',null),
      new ContactPerson($r('app.media.contact_person_2'),'联系人3',null),
      new ContactPerson($r('app.media.contact_person_1'),'联系人4',null),
      new ContactPerson($r('app.media.contact_person'),'联系人5',null),
      new ContactPerson($r('app.media.contact_person_2'),'联系人6',null),
      new ContactPerson($r('app.media.contact_person_1'),'联系人7',null),
      new ContactPerson($r('app.media.contact_person'),'联系人8',null),
      new ContactPerson($r('app.media.contact_person_2'),'联系人9',null),
      new ContactPerson($r('app.media.contact_person_1'),'联系人10',null),
      new ContactPerson($r('app.media.contact_person'),'联系人11',null),
      new ContactPerson($r('app.media.contact_person_2'),'联系人12',null)
    ]
    return tabBookListData;
  }
}
export default new MainViewModel();
飞花落雨中
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HarmonyOS从基础到实战-高性能华为在线答题元服务
一键难忘的博客
11-21 11万+
HarmonyOS从基础到实战-高性能华为在线答题元服务 在本文中，我们介绍了一个关于在线答题应用的项目，其中包括项目结构和开发计划。项目主要分为主应用的Ability（entryability）、卡片的Ability（Entnyformability）、从云数据库导出的数据类型（Models）以及页面代码文件夹（Pages）等模块。使用了两个重要的配置文件，分别是agconnect-services.json和schema.json，用于连接serverless服务和云端配置信息。
基于DevEco Studio平台的HarmonyOS-JS围棋棋盘
10-29
1、有基本的布局、画布等 2、有按钮跳转等功能 3、使用画图工具画了围棋棋盘以及几颗棋子（算是定式） 4、app的base_media图片换为了原神刻晴（可用windows自带的画图来调整尺寸大小），跳转界面也是刻晴
HarmonyOS--从简单页面跳转开始2
qq_44761778的博客
06-06 427
main/ets下新建common文件夹，common文件夹下新建bean文件夹，bean新建ArkTS文件//1.定义列表数据对象 export default class ItemData {img?: Resource;title?: Resource;others?: Resource;} }可使用List的ItemData.ets。
HarmonyOS--从简单页面跳转开始
qq_44761778的博客
06-02 167
hello world第一步简单的走第二步。
HarmonyOS-页面跳转Router实例演示
Hidanchaofan的博客
03-12 1269
本文将以APP的登录和修改昵称为例演示官网的几种页面跳转、返回以及这些流程携带参数，实例的形式记录学习HarmonyOS的页面跳转。
鸿蒙HarmonyOS实战-UIAbility页面跳转
shudaoshanQAQ的博客
01-11 1606
UIAbility组件是一种包含UI界面的应用组件，主要用于和用户交互。
【HarmonyOS】编写简单的登录页面并实现跳转
b1ngsha的博客
04-12 1152
首先简单实现一个登录页面，在xml文件下编写布局如下所示界面如图所示。
写给初学者的 HarmonyOS 教程 -- 页面路由（router）
Thinking in Android & Compose & HarmonyOS
11-27 1188
页面跳转是开发过程中的一个重要组成部分。在使用应用程序时，通常需要在不同的页面之间跳转，有时还需要将数据从一个页面传递到另一个页面（类似 Activity 跳转）。。HarmonyOS 提供了Router 模块，通过不同的url 地址，可以方便地进行页面路由，轻松地访问不同的页面。
鸿蒙HarmonyOS实战-Web组件（页面跳转和浏览记录）_鸿蒙跳转浏览器
最新发布
2401_84182020的博客
04-14 707
跨应用跳转是指从一个应用程序跳转到另一个应用程序。这种跳转通常通过链接或特定的 API 调用实现。例如，你可以在一个应用程序中点击一个链接，然后跳转到另一个应用程序中的指定页面。跨应用跳转可以提供更好的用户体验和无缝的应用集成。跨应用跳转是指从一个应用程序跳转到另一个应用程序。例如，你可以在一个应用程序中点击一个链接，然后跳转到另一个应用程序中的指定页面。跨应用跳转可以提供更好的用户体验和无缝的应用集成。Web页面跳转是指在一个网页上点击链接后，自动跳转到另外一个网页的过程。
本示例代码用于-HarmonyOS-ArkTS-UIAbility-【坚果派-红目香薰】文章的对应示例
01-24
本示例代码用于——HarmonyOS-ArkTS-UIAbility——【坚果派-红目香薰】文章的对应示例。 示例内容为页面跳转与传递参数以及返回上一层页面操作的代码。
HarmonyOS应用实践-UIAbility的使用
11-05
UIAbility的使用，包括跳转和返回
HarmonyOS应用开发-BiometricAuthentication体验分享.docx
06-13
说明：简介 • 此应用程序将展示HarmonyOS人脸识别和打开的相机功能。您可以通过此应 用程序了解生物特征识别中人脸识别的实现过程、FA的跳转、打开相机和切换前后置 摄像头的功能。 该示例代码已完成，您可以...
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
01-21
路由跳转代码如下： <li><nuxt to={name:>HOME page</nuxt></li> <li><nuxt to={name:>NEWS page</nuxt></li> <li><nuxt to={name:>PLAY page</nuxt></li> 注意说明： to 前面有冒号“ : ” to 后面跟的是路径...
vue-router跳转时打开新页面的两种方法
12-08
记录一下在vue项目中如何实现跳转到一个新页面（一个比较简单又比较基础的问题了），有两个方法： 1、标签实现新窗口打开 官方文档中说 v-link 指令被 <router> 组件指令替代，且 <router> 不支持 target=”_blank...
微信小程序--页面间的通信和页面跳转传参
03-29
最近在做微信小程序时，涉及到了把值从一个页面传递到另一个页面的问题，在网上查阅了一些资料，在这里总结一下常用的方法。 1、页面跳转时，在跳转的url中传递，比如：   wx.navigateTo({ url: '../InfoContent/...
Vue.js实战之利用vue-router实现跳转页面
11-30
使用 Vue.js 做项目的时候，一个页面是由多个组件构成的，所以在跳转页面的时候，并不适合用传统的 href，于是 vue-router 应运而生。 官方文档： https://router.vuejs.org/zh-cn/essentials/getting-started.html ...
vue-router判断页面未登录自动跳转到登录页的方法示例
10-17
主要介绍了vue-router判断页面未登录自动跳转到登录页的方法示例,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
ETL小白教学第一篇---页面跳转、传值
03-29
一、学习页面的跳转 二、学习事件（点击事件等） 0、创建页面 有不少小白是在目录里右键>新建>然后新建wxml、js、json等文件 (此图片来源于网络，如有侵权，请联系删除! ) 现在给小白们一个便捷的方法，在app.json中...
harmonyos页面跳转
06-07
在 HarmonyOS 中，页面跳转可以通过以下步骤来实现： 1. 创建要跳转的页面的 Ability 2. 在需要跳转的页面的 Ability 中调用 `present` 方法 3. 在 `present` 方法中，传入要跳转到的页面的 Ability 的 Intent 对象...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值