实验课程

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测试技术-测量电压实验

【关闭】