实验课程

THIS NAME

实验课程

当前位置: 首页 >> 实验课程 >> 正文

Harmony程序设计-TypeScript与HarmonyOS UI开发

发布日期:2024-03-04    作者:任雪     来源:     点击:

TypeScript与HarmonyOS UI开发

一、 实验目的

1.掌握 TypeScript HarmonyOS 应用开发中的基本用法。

2.熟悉 ArkUI 框架的基本组件和布局。

3.实现一个简单的 HarmonyOS 应用界面。

二、实验设备与器件

PC机、DevEco Studio工具

三、实验内容

1. 创建 HarmonyOS 项目

打开 DevEco Studio,选择创建一个新项目。

选择 "Empty Ability" 模板,并确保语言选择为 "TypeScript"

完成项目创建后,进入项目目录。

2.布局子元素在排列方向上的间距

在布局容器内,可以通过space属性设置排列方向上子元素的间距,使各子元素在排列方向上有等间距效果。

undefined

Column({ space: 20 }) {

 Text('space: 20').fontSize(15).fontColor(Color.Gray).width('90%')

 Row().width('90%').height(50).backgroundColor(0xF5DEB3)

 Row().width('90%').height(50).backgroundColor(0xD2B48C)

 Row().width('90%').height(50).backgroundColor(0xF5DEB3)

}.width('100%')

undefined

Row({ space: 35 }) {

 Text('space: 35').fontSize(15).fontColor(Color.Gray)

 Row().width('10%').height(150).backgroundColor(0xF5DEB3)

 Row().width('10%').height(150).backgroundColor(0xD2B48C)

 Row().width('10%').height(150).backgroundColor(0xF5DEB3)

}.width('90%')

undefined

Column({}) {

 Column() {

 }.width('80%').height(50).backgroundColor(0xF5DEB3)

 Column() {

 }.width('80%').height(50).backgroundColor(0xD2B48C)

 Column() {

 }.width('80%').height(50).backgroundColor(0xF5DEB3)

}.width('100%').alignItems(HorizontalAlign.Start).backgroundColor('rgb(242,242,242)')

undefined

Row({}) {

 Column() {

 }.width('20%').height(30).backgroundColor(0xF5DEB3)

 Column() {

 }.width('20%').height(30).backgroundColor(0xD2B48C)

 Column() {

 }.width('20%').height(30).backgroundColor(0xF5DEB3)

}.width('100%').height(200).alignItems(VerticalAlign.Top).backgroundColor('rgb(242,242,242)')

undefined

justifyContent(FlexAlign.Start):元素在垂直方向首端对齐,第一个元素与行首对齐,同时后续的元素与前一个对齐。

Column({}) {

 Column() {

 }.width('80%').height(50).backgroundColor(0xF5DEB3)

 Column() {

 }.width('80%').height(50).backgroundColor(0xD2B48C)

 Column() {

 }.width('80%').height(50).backgroundColor(0xF5DEB3)

}.width('100%').height(300).backgroundColor('rgb(242,242,242)').justifyContent(FlexAlign.Start)

上一条:Harmony程序设计-基础UI组件与布局 下一条:LabVIEW测试技术-测量电压实验

关闭