37.HarmonyOS鸿蒙系统 App(ArkUI) 创建第一个应用程序hello world

news2024/10/6 20:31:14

HarmonyOS App(ArkUI) 创建第一个应用程序helloworld

线性布局

1.鸿蒙应用程序开发app_hap开发环境搭建

3.DevEco Studio安装鸿蒙手机app本地模拟器

打开DevEco Studio,点击文件-》新建

双击打开index.ets

复制如下代码：

import FaultLogger from '@ohos.faultLogger'
import promt2 from '@ohos.prompt'
import promt_action from '@ohos.promptAction'
@Entry
@Component
struct Index {
  @State message: string = '调试'
  @State message2: string = '测试'
  @State message3: string = '设置'
  @State handlePopup2:boolean = false
 //线性布局示范
  build() {
    Column({space:5}) { //竖向排列组件
    Text('线性布局').fontColor(Color.White).fontSize(50)

    Row({ space: 5 }) { // 横向排列组件--排了三个竖向线性布局,组件竖向排列
      Column() { //
        Text(this.message).backgroundColor(Color.Yellow).fontSize(50)
        Text('TEXT文本').backgroundColor(Color.Green)
        Text('111abcd')
        Text('111abcd')
        Text('111abcd')
        Text('111abcd')
        Text('111abcd')
        Text('111abcd')
        Text('111abcd')
        Text('111abcd')
        Text('111abcd')
        Text('111abcd')
        Text('底部').fontSize(50).backgroundColor(Color.Green)
      }.backgroundColor(Color.Blue)

      Column() {
        Text('顶部').fontSize(50).backgroundColor(Color.Yellow)
        Text('111abcd')
        Text(this.message2).fontSize(50).backgroundColor(Color.Green)
        Text('111abcd')
        Text('111abcd')
        Text('111abcd')
        Text('111abcd')
        Text('111abcd')
        Text('111abcd')
        Text('111abcd')
        Text('111abcd')
        Text('111abcd')
        Text('111abcd')
      }.backgroundColor(Color.Blue)

      Column() {
        Text('Test').fontSize(50).backgroundColor(Color.Yellow)
        Text('TEXT文本').backgroundColor(Color.Green)
        Text('111abcd')
        Text('111abcd')
        Text('111abcd')
        Text('111abcd')
        Text(this.message3).backgroundColor(Color.Green).fontSize(50)
        Text('111abcd')
        Text('111abcd')
        Text('111abcd')
        Text('111abcd')
        Text('111abcd')
        Text('111abcd')
      }.backgroundColor(Color.Blue)

    //}.width('99.9%').height('90.9%').backgroundColor(0xF5DEB3)
    }.width('99.9%').height('50.9%').backgroundColor(0xF5DEB3)
      Button('启动按钮',{type:ButtonType.Capsule,stateEffect:false})
        .fontColor(Color.White)
        .backgroundColor(Color.Green)
        .fontSize(38)
        .width('99.9%')
        .height(50)
        .stateStyles({
          pressed:{.backgroundColor(Color.Yellow)}, //按钮按下，改变颜色
          normal:{.backgroundColor(Color.Green)} //正常按钮背景颜色
        })
        .onClick(()=>{
           this.handlePopup2 = !this.handlePopup2
        }).bindPopup(this.handlePopup2,{ //气泡提示效果
        message:'点击了启动按钮',
        onStateChange:(e)=>{
          if(e.isVisible)
          {
            this.handlePopup2 = false
          }
        }

      })

      Button('Toast效果按钮')
        .fontSize(38)
        .width('99.9%')
        .onClick(()=>{
        promt_action.showToast({ //import promt_action from '@ohos.promptAction' 导入模块
          message:'显示toast效果',
          duration:1000, //显示时间1秒
          bottom:100 //距离底部的距离


        })
      })
      Text('点击按钮显示效果')
        .fontColor(Color.White)
        .fontSize(38)
  }.backgroundColor(Color.Blue)
  }
}

确认模拟器已经启动

3.DevEco Studio安装鸿蒙手机app本地模拟器