目录

声明

1、开启其他应用

2、延时切换页面

3、设置页面切换效果

4、设置背景图片和背景铺满屏幕

5、设置隐藏状态和导航条

6、设置组件大小和对齐方式

7、设置按钮类型改变按钮边框圆角半径

8、常用布局方式

9、布局技巧

---

声明

本笔记基于OpenHarmony 4.1 SDK11，对于其他版本不一定适用 ，另外DevEco Studio版本为5.0.3 其他版本可能无法识别openharmony 4.1设备，比如5.0.5

1、开启其他应用

依赖的引用

import Want from '@ohos.app.ability.Want';

.onClick((event) => {
          let want: Want = {
            "deviceId": "",
            "bundleName": "com.ohos.settings",
            "abilityName": "com.ohos.settings.MainAbility"
          };
          this.context.startAbility(want).then(() => {
            console.info('startAbility success');
          }).catch((error: BusinessError) => {
            console.info('startAbility failed');
          })

2、延时切换页面

添加新的页面需要在src/main/resources/base/profile/main_pages.json 中添加新增的页面路径

{
  "src": [
    "pages/Index",
    "pages/Second",
    "pages/Third"
  ]
}

然后在pages目录下创建新的ets文件

依赖的引用

import { router } from '@kit.ArkUI';

放在build() {}后面

timerid = setTimeout(() => {
  router.pushUrl({url:'pages/Iden'});
}, 3000); // 延时3秒后跳转到下一个页面

3、设置页面切换效果

放在build() {}后面

  pageTransition() {
    PageTransitionEnter({ duration: 500, curve: Curve.Linear }).slide(SlideEffect.Bottom)
    PageTransitionExit({ duration: 500, curve: Curve.Ease }).slide(SlideEffect.END)
  }

4、设置背景图片和背景铺满屏幕

先在media中添加图片

.backgroundImage($r('app.media.idenbackground'))
    .backgroundImageSize(ImageSize.FILL)

5、设置隐藏状态和导航条

1）当我们应用的Alility继承的是UIAbility时，可以onWindowStageCreate(windowStage: window.WindowStage)方法中实现如下操作：

 windowStage.getMainWindowSync().setWindowSystemBarEnable([/*'status', */'navigation'])

2）当我们应用的Alility继承的是ServiceExtensionAbility时，可以在Window.createWindow中获取到window对象，然后调用如下操作：

window.setWindowSystemBarEnable([/*'status', */'navigation'])
status:状态栏  navigation：导航栏，注释 ‘status’，状态栏不显示，注释 ‘navigation’，导航栏不显示 ，都注释，就是都不显示

6、设置组件大小和对齐方式

        .width(743)
        .height(800)
        .align(Alignment.Center)

7、设置按钮类型改变按钮边框圆角半径

Button(this.txt_button, {type: ButtonType.Normal})
            .id('xxxx')
            .fontSize(30)
            .borderRadius(12)

8、常用布局方式

1、纵向布局方式:Column

2、横向布局方式:Row

3、叠加布局方式:Stack

9、布局技巧

1）使用 .layoutWeight(1) 属性使子组件填满父组件剩余空间或设置子组件权重

2）使用 .justifyContent(FlexAlign.SpaceEvenly) 使子组件在父组件中均衡分布

3）使用  .margin(18) 使组件与周边组件分开一定距离

4）使用 Blank() 空组件，使子组件在父组件的主轴方向隔开一定距离