鸿蒙基础-常用组件与布局(ArkTS)

实现“登录”页面

本节主要介绍“登录”页面的实现,页面使用Column容器组件布局,由Image、Text、TextInput、Button、LoadingProgress等基础组件构成。

// LoginPage.ets
@Entry
@Component
struct LoginPage {
  ...
  build() {
    Column() {
      Image($r('app.media.logo'))
        ...
      Text($r('app.string.login_page'))
        ...
      Text($r('app.string.login_more'))
        ...
      TextInput({ placeholder: $r('app.string.account') })
        ...
      TextInput({ placeholder: $r('app.string.password') })
        ...
      Button($r('app.string.login'), { type: ButtonType.Capsule })
        ...
      if (this.isShowProgress) {
        LoadingProgress()
          ...
      }
      ...
    }
    ...
  }
}

获取用户输入

当用户登录前,需要获取用户输入的帐号和密码才能执行登录逻辑。给TextInput设置onChange事件,在onChange事件里面实时获取用户输入的文本信息。

// LoginPage.ets
TextInput({ placeholder: $r('app.string.account') })
  .maxLength(CommonConstants.INPUT_ACCOUNT_LENGTH)
  .type(InputType.Number)
  .inputStyle()
  .onChange((value: string) => {
    this.account = value;
  })

控制LoadingProgress显示和隐藏

给登录按钮绑定onClick事件,调用login方法模拟登录。定义变量isShowProgress结合条件渲染if用来控制LoadingProgress的显示和隐藏。当用户点击按钮时设置isShowProgress为true,即显示LoadingProgress;使用定时器setTimeout设置isShowProgress 2秒后为false,即隐藏LoadingProgress,然后执行跳转到首页的逻辑。

// LoginPage.ets
@Entry
@Component
struct LoginPage {
  ...    
  @State isShowProgress: boolean = false;
  private timeOutId: number = -1;
  ...
  login(): void {
    ...
    this.isShowProgress = true;
    if (this.timeOutId === -1) {
      this.timeOutId = setTimeout(() => {
        this.isShowProgress = false;
        this.timeOutId = -1;
        router.replaceUrl({ url: 'pages/MainPage' });
      }, CommonConstants.LOGIN_DELAY_TIME);
    }  
  }
  
  ...

  build() {
    Column() {
      ...
      Button($r('app.string.login'), { type: ButtonType.Capsule })
        ...
        .onClick(() => {
          this.login();
        })
      ...
      if (this.isShowProgress) {
        LoadingProgress()
          ...
      }
      ...
    }
    ...
  }
}

实现页面跳转

页面间的跳转可以使用router模块相关API来实现,使用前需要先导入该模块,然后使用router.replaceUrl()方法实现页面跳转。

// LoginPage.ets
import router from '@ohos.router';

login(): void {
  ...
  this.timeOutId = setTimeout(() => {
    this.isShowProgress = false;
    this.timeOutId = -1;
    router.replaceUrl({ url: 'pages/MainPage' });
  }, CommonConstants.LOGIN_DELAY_TIME);
}

实现“首页”和“我的”页面

定义资源数据

由于“首页”和“我的”页面中有多处图片和文字的组合,因此提取出ItemData类。在MainViewModel.ets文件中对页面使用的资源进行定义,在MainViewModel.ets文件中定义数据。

// ItemData.ets
export default class PageResource {
  title: Resource;
  img: Resource;
  others?: Resource;
  constructor(title: Resource, img: Resource, others?: Resource) {
    this.title = title;
    this.img = img;
    this.others = others;
  }
}

// MainViewModel.ets
import ItemData from './ItemData';
export class MainViewModel {
  ...
  getFirstGridData(): Array<ItemData> {
    let firstGridData: ItemData[] = [
      new ItemData($r('app.string.my_love'), $r('app.media.love')),
      new ItemData($r('app.string.history_record'), $r('app.media.record')),
      ...
    ];
    return firstGridData;
  }
  ...
}
export default new MainViewModel();

实现页面框架

从前面介绍章节的示意图可以看出,本示例由两个tab页组成,使用Tabs组件来实现,提取tabBar的公共样式,同时设置TabContent和Tabs的backgroundColor来实现底部tabBar栏背景色突出的效果。

// MainPage.ets
Tabs({
  barPosition: BarPosition.End,
  controller: this.tabsController
}) {
  TabContent() {
    ...
  }
  ...
  .backgroundColor($r('app.color.mainPage_backgroundColor')) // “首页”的页面背景色
  .tabBar(this.TabBuilder(CommonConstants.HOME_TITLE, CommonConstants.HOME_TAB_INDEX,
    $r('app.media.home_selected'), $r('app.media.home_normal')))
  ...
}
.width(CommonConstants.FULL_PARENT)
.backgroundColor(Color.White)  // 底部tabBar栏背景色
...
.onChange((index: number) => {
  this.currentIndex = index;
})
...

实现“首页”内容

从效果图可以看出“首页”由三部分内容组成分别是轮播图、24栅格图、44栅格图。首先使用Swiper组件实现轮播图,无需设置图片大小。

// Home.ets
Swiper(this.swiperController) {
  ForEach(mainViewModel.getSwiperImages(), (img: Resource) => {
    Image(img).borderRadius($r('app.float.home_swiper_borderRadius'))
  }, (img: Resource) => JSON.stringify(img.id))
}
.margin({ top: $r('app.float.home_swiper_margin') })
.autoPlay(true)

然后使用Grid组件实现2*4栅格图。

// Home.ets
Grid() {
  ForEach(mainViewModel.getFirstGridData(), (item: ItemData) => {
    GridItem() {
      Column() {
        Image(item.img)
          .width($r('app.float.home_homeCell_size'))
          .height($r('app.float.home_homeCell_size'))
        Text(item.title)
          .fontSize($r('app.float.little_text_size'))
          .margin({ top: $r('app.float.home_homeCell_margin') })
      }
    }
  }, (item: ItemData) => JSON.stringify(item))
}
.columnsTemplate('1fr 1fr 1fr 1fr')
.rowsTemplate('1fr 1fr')
...

使用Grid组件实现4*4栅格列表栏,其中单个栅格中有一张背景图片和两行字体不同的文本,因此在Column组件中放置两个Text组件,并设置背景图,注意Grid组件必须设置高度,否则可能出现页面空白。

// Home.ets
Grid() {
  ForEach(mainViewModel.getSecondGridData(), (secondItem: ItemData) => {
    GridItem() {
      Column() {
        Text(secondItem.title)
          ...
        Text(secondItem.others)
          ...
      }
      .alignItems(HorizontalAlign.Start)
    }
    ...
    .backgroundImage(secondItem.img)
    .backgroundImageSize(ImageSize.Cover) 
    ...
  }, (secondItem: ItemData) => JSON.stringify(secondItem))
}
...
.height($r('app.float.home_secondGrid_height'))
.columnsTemplate('1fr 1fr')
.rowsTemplate('1fr 1fr')
...

实现“我的”页面内容

使用List组件结合ForEach语句来实现页面列表内容,其中引用了settingCell子组件,列表间的灰色分割线可以使用Divider属性实现。

// Setting.ets
List() {
  ForEach(mainViewModel.getSettingListData(), (item: ItemData) => {
    ListItem() {
      this.settingCell(item)
    }
    .height($r('app.float.setting_list_height'))
  }, (item:ItemData) => JSON.stringify(item))
}
.backgroundColor(Color.White)
.divider({  
  ...
})
...

@Builder settingCell(item: ItemData) {
  Row() {
    Row({ space: CommonConstants.COMMON_SPACE }) {
      Image(item.img)
        ...
      Text(item.title)
        ...
    }
    if (item.others === null) {
      Image($r('app.media.right_grey'))
        ...
    } else {
      Toggle({ type: ToggleType.Switch, isOn: false })
    }
  }
  .justifyContent(FlexAlign.SpaceBetween)
  ...
}

HarmonyOS ArkUI提供了丰富多样的UI组件,您可以使用这些组件轻松地编写出更加丰富、漂亮的界面。更多鸿蒙的基础技术学习,可以前往主页联系拿文档。下面分享一份鸿蒙学习技能路线图:完整高清版找我保存

最后

通过一个简单的购物社交应用示例,学习如何使用常用的基础组件和容器组件。本示例主要包含:“登录”、“首页”、“我的”三个页面。下面是效果图:

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

信号优先级与安全性

问题 对于同一个进程&#xff0c;如果存在两个不同的未决实时信号&#xff0c;那么先处理谁&#xff1f; 信号优先级的概念 信号的本质是一种软中断 (中断有优先级&#xff0c;信号也有优先级) 对于同一个未决实时信号&#xff0c;按照发送先后次序递送给进程 对于不同的未…

K8S三台服务器一键部署总结

随着互联网、云计算技术的深入发展&#xff0c;为降低企业大规模云应用建设的难度和成本&#xff0c;支持云应用开发、运行与运维一体化的云应用平台软件应运而生。在数通家族中对企业集成套件的云平台开发、部署、管理、运维进行统一管理&#xff0c;实现数据集成和共享的平台…

使用Mecury人型机器人搭建VR遥操作控制平台!

概述 VR遥操作机械臂是一种将虚拟现实技术与机械臂控制相结合的系统&#xff0c;使用户可以通过虚拟现实设备操控和交互实际的机械臂。这种技术可以应用于多个领域&#xff0c;包括远程操作、培训、危险环境中的工作等。 双臂人形机器人是一种模拟人体上半身结构&#xff0c;包…

FXCM福汇官网:深入解析BOLL指标的喇叭口形态及含义

BOLL指标是一种通过布林线&#xff08;Bollinger Bands&#xff09;的上轨线、中轨线和下轨线的相互关系来判断市场趋势和波动性的技术分析工具。BOLL指标的喇叭口形态包括开口型、收口型和紧口型&#xff0c;它们各自具有独特的含义。 《FXCM福汇官网开户》 1. 开口型喇叭口…

探索 React Hooks 的世界:如何构建出色的组件(上)

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…

C/C++ BM2链表内指定区间反转

文章目录 前言题目1. 解决方案一1.1 思路阐述1.2 源码 2. 解决方案二2.1 思路阐述2.2 源码 总结 前言 这题是BM1的升级版&#xff0c;不过是把完整的链表翻转变成了指定区间。 题目 描述 将一个节点数为 size 链表 m 位置到 n 位置之间的区间反转&#xff0c;要求时间复杂度 …

【数据结构】LRU缓存的简单模拟实现(leetcode力扣146LRU缓存)

文章目录 一、定义二、LRU模拟实现二、代码实现 一、定义 LRU是Least Recently Used的缩写&#xff0c;意思是最近最少使用&#xff0c;它是一种Cache替换算法。 Cache的容量有限&#xff0c;因此当Cache的容量用完后&#xff0c;而又有新的内容需要添加进来时&#xff0c; 就…

在Android中使用Flow获取网络连接信息

在Android中使用Flow获取网络连接信息 如果你是一名Android开发者&#xff0c;你可能会对这个主题感到有趣。考虑到几乎每个应用程序都需要数据交换&#xff0c;例如刷新动态或上传/下载内容。而互联网连接对此至关重要。但是&#xff0c;当用户的设备离线时&#xff0c;数据如…

天啦撸 超级麻烦的MySQL索引和数据引擎,快拿小本本记好

1 MySQL的索引 1.1 索引 定义&#xff1a; 索引是一个排序的列表&#xff0c;包含索引字段的值和其对应的行记录的数据所在的物理地址 ●索引是一个排序的列表&#xff0c;在这个列表中存储着索引的值和包含这个值的数据所在行的物理地址&#xff08;类似于C语言的链表通过…

使用Maven Archetype插件制作项目脚手架(一)

Archetype是一个Maven项目模板工具包。通过Archetype我们可以快速搭建Maven项目。比如我们在ide里面创建项目时&#xff0c;可以选择很多maven内置的Archetype&#xff0c;我们最常用的可能是maven-archetype-quickstart 当然maven提供了能力&#xff0c;让我们自定义项目结构&…

Electron自定义通知Notification

Notification是什么&#xff1f; 对于渲染进程&#xff0c;Electron 允许开发者使用通知中API&#xff0c;来运行系统的原生通知进行显示。 如何实现系统Notification&#xff1f; const { Notification } require(electron);const isAllowed Notification.isSupported();…

最新ChatGPT商业运营网站程序源码,支持Midjourney绘画,GPT语音对话+DALL-E3文生图+文档对话总结

一、前言 SparkAi创作系统是基于ChatGPT进行开发的Ai智能问答系统和Midjourney绘画系统&#xff0c;支持OpenAI-GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美&#xff0c;可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如何搭建部署AI创作Ch…

【FPGA】分享一些FPGA高速信号处理相关的书籍

在做FPGA工程师的这些年&#xff0c;买过好多书&#xff0c;也看过好多书&#xff0c;分享一下。 后续会慢慢的补充书评。 【FPGA】分享一些FPGA入门学习的书籍【FPGA】分享一些FPGA协同MATLAB开发的书籍 【FPGA】分享一些FPGA视频图像处理相关的书籍 【FPGA】分享一些FPGA高速…

【【IIC模块Verilog实现---用IIC协议从FPGA端读取E2PROM】】

IIC模块Verilog实现–用IIC协议从FPGA端读取E2PROM 下面是 design 设计 I2C_dri.v module IIC_CONTROL #(parameter SLAVE_ADDR 7b1010000 , // E2PROM 从机地址parameter CLK_FREQ 26d50_000_000 , // 50MHz 的时钟频率parameter …

[内功修炼]函数栈帧的创建与销毁

文章目录 1:什么是函数栈帧2:理解函数栈帧能解决什么问题呢3:函数栈帧的创建与销毁的解析3.1:什么是栈3.2:认识相关寄存器与汇编指令相关寄存器相关汇编指令 3.3 解析函数栈帧的创建和销毁3.3.1 预备知识3.3.2 详细解析一:调用main函数,为main函数开辟函数栈帧First:push前push…

【Python3】\u字符与中文字串互转

小水。 encode和decode&#xff1a; str没有decode函数&#xff0c;但对应的有encode函数&#xff0c;该函数作用是转码为bytes对象bytes通过decode函数转换回对应的str对于一些偏激的(可以用过分来形容)的字符串&#xff0c;例如一二三\\u56db\\u4e94\\u516d&#xff0c;是有…

k8s 组件

k8s: kubernets:8个字母省略&#xff0c;就是k8s. 自动部署&#xff0c;自动扩展和管理容器化的应用程序的一个开源系统。 k8s是负责自动化运维管理多个容器化程序的集群&#xff0c;是一个功能强大的容器编排工具。 以分布式和集群化的方式进行容器管理。 1.20面试版本 …

RPC(6):RMI实现RPC

1RMI简介 RMI(Remote Method Invocation) 远程方法调用。 RMI是从JDK1.2推出的功能&#xff0c;它可以实现在一个Java应用中可以像调用本地方法一样调用另一个服务器中Java应用&#xff08;JVM&#xff09;中的内容。 RMI 是Java语言的远程调用&#xff0c;无法实现跨语言。…

小程序真机如何清除订阅数据

在做小程序订阅消息开发的过程中发现&#xff0c;真机上如果是选择了‘总是保持以上选择’&#xff0c;一旦用户授权后&#xff0c;后面就不会再弹出申请改订阅消息的授权弹窗&#xff0c;这对于开发过程中是很不方便的。 曾试过清除缓存&#xff0c;重进小程序也不能清除掉 解…

爬虫反爬之代码混淆,特殊编码,表情编码

不知道你是否见过这样的代码&#xff0c;完全看不懂。 大家好&#xff0c;这一集我们来看一下前端反爬的代码混淆&#xff0c;一般啊我们自己写的前端代码都是直接上传公开的&#xff0c;如果用的不是框架打包出来的代码&#xff0c;就是自己写的js&#xff0c;html文件没有经过…