HarmonyOS 开发

环境 

下载IDE

代码 

import { hilog } from '@kit.PerformanceAnalysisKit';
import testNapi from 'libentry.so';
import { router } from '@kit.ArkUI';
import { common, Want } from '@kit.AbilityKit';@Entry
@Component
struct Index {@State message: string = 'Hello HarmonyOS!';private context = getContext(this) as common.UIAbilityContext;// Ability间跳转async explicitStartAbility() {const want : Want = {deviceId: "",bundleName: "com.example.board",moduleName: "entry",abilityName: "secondAbitily"};let context = getContext(this) as common.UIAbilityContext;await context.startAbility(want);}build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold).fontColor($r('app.color.text_color'))//访问字体颜色.backgroundImage($r('app.media.background'), ImageRepeat.XY) //设置背景图片,ImageRepeat.XY则是图片太小时候，选择某个坐标位置的颜色填充.onClick(() => {hilog.info(0x0000, 'testTag', 'Test NAPI 2 + 3 = %{public}d', testNapi.add(2, 3));}).margin({ top: 20 })Button('Click me').onClick(() => {this.message = 'Hello, World!';}).margin({ top: 10 })Button('Next Page').onClick(() => {router.pushUrl({url: "pages/flex",params: {name: "args"}},router.RouterMode.Single) // 同ability// this.explicitStartAbility();  // 不同ability})// 使用系统资源Image($r('sys.media.ohos_app_icon')).border({color: $r('sys.color.ohos_id_color_palette_aux11'),           // 设置边框颜色为辅助色11radius: $r('sys.float.ohos_id_corner_radius_button'),         // 设置边框圆角半径为按钮圆角半径width: 2                                                      // 设置边框宽度为2}).margin({top: $r('sys.float.ohos_id_elements_margin_horizontal_m'),    // 设置上边距为水平中等间距bottom: $r('sys.float.ohos_id_elements_margin_horizontal_l')  // 设置下边距为水平大间距}).height(200)                                                    // 设置高度为200.width(300)}.width('100%')}.height('100%').justifyContent(FlexAlign.Center).alignItems(VerticalAlign.Center).padding(10)}
}

import { hilog } from '@kit.PerformanceAnalysisKit';
import testNapi from 'libentry.so';
import { router } from '@kit.ArkUI';@Entry
@Component
struct Example {@State name : string = (router.getParams() as Record<string, string>)['name'];build() {Column() {Button('Prev Page').onClick(() => {router.back() // 同ability跳转// router.pushUrl({url: "pages/Index"})})/**Flex({ wrap: FlexWrap.Wrap })是一个Flex布局的设置，*其中wrap: FlexWrap.Wrap表示设置Flex容器的子元素在主轴方向上超出容器时是否换行。*在这里，FlexWrap.Wrap表示子元素会自动换行，以适应容器的尺寸。* 这样设置可以确保在容器尺寸不足以容纳所有子元素时，子元素会自动换行，而不会超出容器范围。*/Flex({ wrap: FlexWrap.Wrap }) {// 默认不写单位就是是vpColumn() {Text("width(220)").width(220)  // 设置宽度为220vp.height(40)  // 设置高度为40vp.backgroundColor("#00BFC9")  // 设置背景颜色为#00BFC9.fontSize("12vp")  // 设置字体大小为12vp}.margin(5)  // 设置外边距为5vp// 宽度指定成pxColumn() {Text("width('220px')").width('220px')  // 设置宽度为220px.height(40)  // 设置高度为40vp.backgroundColor("#007900")  // 设置背景颜色为#007900.textAlign(TextAlign.Center)  // 设置文本对齐方式为居中.fontColor(Color.White)  // 设置字体颜色为白色}.margin(5)  // 设置外边距为5vp// 宽度指定成vpColumn() {Text("width('220vp')").width('220vp')  // 设置宽度为220vp.height(40)  // 设置高度为40vp.backgroundColor("#FF9800")  // 设置背景颜色为#FF9800.textAlign(TextAlign.Center)  // 设置文本对齐方式为居中.fontColor(Color.White)  // 设置字体颜色为白色.fontSize('12vp')  // 设置字体大小为12vp}.margin(5)  // 设置外边距为5vp// 宽度指定成vplpxColumn() {Text("width('220lpx') designWidth:720").width("220lpx")  // 设置宽度为220lpx.height(40)  // 设置高度为40vp.backgroundColor("#634794")  // 设置背景颜色为#634794.textAlign(TextAlign.Center)  // 设置文本对齐方式为居中.fontColor(Color.White)  // 设置字体颜色为白色.fontSize('12vp')  // 设置字体大小为12vp}.margin(5)  // 设置外边距为5vp// 将vp单位的数值转换为以px为单位的数值Column() {Text("width(vp2px(220) + 'px')").width(vp2px(220) + 'px')  // 将220vp转换为px单位的数值，然后设置宽度.height(40)  // 设置高度为40vp.backgroundColor('#3F56EA')  // 设置背景颜色为#3F56EA.textAlign(TextAlign.Center)  // 设置文本对齐方式为居中.fontColor(Color.White)  // 设置字体颜色为白色.fontSize('12vp')  // 设置字体大小为12vp}.margin(5)  // 设置外边距为5vp// fontSize('12fp')设置成fpColumn() {Text("fontSize('12fp')").width(220)  // 设置宽度为220vp.height(40)  // 设置高度为40vp.backgroundColor('#A14A5C')  // 设置背景颜色为#A14A5C.textAlign(TextAlign.Center)  // 设置文本对齐方式为居中.fontColor(Color.White)  // 设置字体颜色为白色.fontSize('12fp')  // 设置字体大小为12fp}.margin(5)  // 设置外边距为5vp// 将px单位的数值转换为以vp为单位的数值。Column() {Text("width(px2vp(220))").width(px2vp(220))  // 将220px转换为vp单位的数值，然后设置宽度.height(40)  // 设置高度为40vp.backgroundColor('#E40078')  // 设置背景颜色为#E40078.textAlign(TextAlign.Center)  // 设置文本对齐方式为居中.fontColor(Color.White)  // 设置字体颜色为白色.fontSize('12fp')  // 设置字体大小为12fp}.margin(5)  // 设置外边距为5vp}.width('100%')  // 设置宽度为100%}}
}

效果

参考

快速入门 - 华为开发者联盟

---

创作不易，小小的支持一下吧！