赞
踩
- 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'), // 设置边框颜色为辅助色11
- radius: $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 }) {
- // 默认不写单位就是是vp
- Column() {
- Text("width(220)")
- .width(220) // 设置宽度为220vp
- .height(40) // 设置高度为40vp
- .backgroundColor("#00BFC9") // 设置背景颜色为#00BFC9
- .fontSize("12vp") // 设置字体大小为12vp
- }.margin(5) // 设置外边距为5vp
-
- // 宽度指定成px
- Column() {
- Text("width('220px')")
- .width('220px') // 设置宽度为220px
- .height(40) // 设置高度为40vp
- .backgroundColor("#007900") // 设置背景颜色为#007900
- .textAlign(TextAlign.Center) // 设置文本对齐方式为居中
- .fontColor(Color.White) // 设置字体颜色为白色
- }.margin(5) // 设置外边距为5vp
-
- // 宽度指定成vp
- Column() {
- Text("width('220vp')")
- .width('220vp') // 设置宽度为220vp
- .height(40) // 设置高度为40vp
- .backgroundColor("#FF9800") // 设置背景颜色为#FF9800
- .textAlign(TextAlign.Center) // 设置文本对齐方式为居中
- .fontColor(Color.White) // 设置字体颜色为白色
- .fontSize('12vp') // 设置字体大小为12vp
- }.margin(5) // 设置外边距为5vp
-
- // 宽度指定成vplpx
- Column() {
- 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')设置成fp
- Column() {
- 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%
- }
- }
- }
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。