环境 

下载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'),           // 设置边框颜色为辅助色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%
    }
  }
}

效果

参考

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

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