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

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本地模拟器

点击启动按钮,气泡框提示

 

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

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

相关文章

鸿蒙OS元服务开发说明:【WebGL网页图形库开发接口】

一、场景介绍 WebGL主要帮助开发者在前端开发中完成图形图像的相关处理,比如绘制彩色图形等。目前该功能仅支持使用兼容JS的类Web开发范式开发。 二、接口说明 表1 WebGL主要接口列表 鸿蒙OS开发更多内容↓点击HarmonyOS与OpenHarmony技术鸿蒙技术文档开发知识更…

elment UI el-date-picker 月份组件选定后提交后台页面显示正常,提交后台字段变成时区格式

需求&#xff1a;要实现一个日期的月份选择<el-date-picker :typeformData.dateType :value-formatdateFormat v-modelformData.leaveFactoryDateplaceholder选择月份></el-date-picker>错误示例&#xff1a;将日期显示类型(type)dateType或将日期绑定值的格式(val…

Java SpringBoot中优雅地判断一个对象是否为空

在Java中&#xff0c;可以使用以下方法优雅地判断一个对象是否为空&#xff1a; 使用Objects.isNull()方法判断对象是否为空&#xff1a; import java.util.Objects;if (Objects.isNull(obj)) {// obj为空的处理逻辑 }使用Optional类优雅地处理可能为空的对象&#xff1a; impo…

为何网易游戏会选择引入OceanBase数据库

本文作者&#xff1a;田维繁&#xff0c;网易游戏关系型数据库小组负责人 作为中国游戏开发领域的佼佼者&#xff0c;网易游戏始终站在网络游戏自主研发的前沿。其产品及周边产品线丰富多样&#xff0c;因此&#xff0c;为满足各种业务场景的需求&#xff0c;需要多种不同的数据…

XRDP登录ubuntu桌面闪退问题

修改 /etc/xrdp/startwm.sh unset DBUS_SESSION_BUS_ADDRESS unset XDG_RUNTIME_DIR . $HOME/.profile

ensp华为AC+AP上线配置

AR1配置&#xff1a; <Huawei>system-view # 进入系统视图<Huawei>sysname R1 # 设备重命名[R1]dhcp enable # 开启DHCP功能[R1]interface GigabitEthernet0/0/0 # 进入接口 [R1-GigabitEthernet0/0/0]ip address 192.168.0.1 23 # 配置接口地址 [R1-GigabitE…

教育信创 | 云轴科技ZStack联合飞腾发布全场景教育信创白皮书

随着数字化时代的到来&#xff0c;教育行业正面临着前所未有的挑战与机遇。为了推动教育行业的数字化转型和信创人才培养&#xff0c;云轴科技ZStack联合飞腾于3月28日正式发布了《教育行业数字化自主创新飞腾生态解决方案白皮书》&#xff08;简称《教育白皮书》&#xff09;。…

Flutter应用混淆技术原理与实践

在移动应用开发中&#xff0c;保护应用代码安全至关重要。Flutter 提供了简单易用的混淆工具&#xff0c;帮助开发者在构建 release 版本应用时有效保护代码。本文将介绍如何在 Flutter 应用中使用混淆&#xff0c;并提供了相关的操作步骤和注意事项。 &#x1f4dd; 摘要 本…

Nginx三大常用功能“反向代理,负载均衡,动静分离”

注意&#xff1a;以下案例在Windows系统计算机作为宿主机&#xff0c;Linux CentOS 作为虚拟机的环境中实现 一&#xff0c;Nginx配置实例-反向代理 1.反向代理 案例一 实现效果&#xff1a;使用nginx反向代理&#xff0c;访问 www.123.com 直接跳转到127.0.0.1:8080 准备工…

HBase(超级无敌详细PROMAX讲解版)

简介 概述 图-1 HBase图标 HBase原本是由Yahoo!公司开发的后来贡献给了Apache的一套开源的、基于Hadoop的、分布式的、可扩展的非关系型数据库(Non-Relational Database)&#xff0c;因此HBase不支持SQL(非关系型数据库基本上都不支持SQL)&#xff0c;而是提供了一套单独的命…

RESTful规范总结

概念&#xff1a;RESTful&#xff08;Representational State Transfer 的缩写&#xff09;是一种广泛使用的API架构风格。 1.资源&#xff1a;在REST API的设计中&#xff0c;首先需要面向资源建模&#xff0c;其中每个节点是是一个简单资源或集合资源。 1.1一个集合包含相同…

Error: TF_DENORMALIZED_QUATERNION: Ignoring transform forchild_frame_id

问题 运行程序出现&#xff1a; Error: TF_DENORMALIZED_QUATERNION: Ignoring transform for child_frame_id “odom” from authority “unknown_publisher” because of an invalid quaternion in the transform (0.0 0.0 0.0 0.707) 主要是四元数没有归一化 Eigen::Quatern…

Redis常用命令补充和持久化

一、redis 多数据库常用命令 1.1 多数据库间切换 1.2 多数据库间移动数据 1.3 清除数据库内数据 二、redis高可用 2.1 redis 持久化 2.1.1 持久化的功能 2.1.2 持久化的两种方式 2.1.2.1 RDB 持久化 2.1.2.2 AOF 持久化 2.1.2.3 RDB和AOF的优缺点 三、小结 一、r…

JUC:double-checked locking(DCL) 懒汉单例模式

文章目录 double-checked locking(DCL) 问题解决方法 volatile作用 double-checked locking(DCL) 问题 第一个if用于后续进入的线程&#xff0c;不用再获取锁来判断是否已经创建了对象。第二个if&#xff0c;为的是第一个进入的线程创建对象&#xff0c;以及防止卡在第一个if之…

vscode shadertoy插件,非常方便的glsl着色器编写工具

很著名的shadertoy网站&#xff0c;集合了非常多大神利用数学写出美妙的shader效果。像shadertoy创始人之一的IQ大神它在这方面有很多的建树。他的利用光线步进和躁声可以创建很多不可思议的3D场景。 vscode有一件shadertoy的插件&#xff0c;安装后可以新建一个*.glsl文件&am…

JavaScript实现全选、反选功能(Vue全选、反选,js原生全选、反选)

简介&#xff1a; 在JavaScript中&#xff0c;实现全选和反选通常是通过操作DOM元素和事件监听来实现&#xff1b; 全选功能&#xff1a;当用户点击一个“全选”复选框时&#xff0c;页面中所有具有相同类名的复选框都将被选中&#xff1b; 反选功能&#xff1a;用户点击一个…

蓝桥杯刷题-四平方和

四平方和 代码&#xff1a; from copy import deepcopy n int(input()) maxn int(5e6) 10 dic dict() for a in range(maxn):if a * a > n:breakfor b in range(a,maxn):if a * a b * b > n:breakif dic.get(a*ab*b) is None:dic[a*ab*b] (a,b) ans [maxn for _ …

klipper源码分析之TMC步进电机驱动

步进电机驱动芯片常用的有tmc2208和tmc2209&#xff0c;这2种芯片都支持STEP/DIR模式和UART单线模式&#xff0c;STEP/DIR模式比较简单&#xff0c;软件无法动态修改寄存器&#xff0c;而UART模式可以修改。这2种模式printer.cfg配置也不一样&#xff0c;更多的参考请查看官方文…

Transformer - Positional Encoding 位置编码 代码实现

Transformer - Positional Encoding 位置编码 代码实现 flyfish import torch import torch.nn as nn import torch.nn.functional as F import os import mathclass PositionalEncoding(nn.Module):def __init__(self, d_model, dropout, max_len5000):super(PositionalEnco…

ArcGis研究区边界提取

ArcGis研究区边界提取 *0* 引言*1* 有的步骤0 引言 GRACE数据处理前要先确定研究范围,而大多情况下所选的研究区都是有特殊意义的,比如常年干旱、经济特区、降水丰富等,这些区域往往有精确的边界,那就要从大的区块中将研究范围抠出来,获取相应坐标,以量化区域重力变化。那…