代码跳转(类似C#的F12)

        Ctrl+鼠标单击

跨语言跳转   Ctrl+Alt+B

格式化代码 Ctrl + Alt + L

我保持默认配置,自定义风格如下,快捷键

有些代码不需要格式化,可以在代码用//@formatter:off”和 //@formatter:on包裹起来,这样这段代码格式化就不生效了

注释 Ctrl + /

结构树(类似wpf的可视化树,类似web的DOM)

查找引用(查找代码使用的) Alt+F7

函数注释生成(类似C#的三斜杠)

输入“/**”+回车键
C++文件同时支持使用“//!”+回车键快速生成注释

父/子类快速跳转

可以点击这个图标

查看接口/类的层次结构 Ctrl+H

代码提示,建议开关

实时预览

页面预览通过在工程的ets文件头部添加@Entry实现。

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}

ArkTS应用/元服务支持组件预览。组件预览支持实时预览,不支持动态图和动态预览。组件预览通过在组件前添加注解@Preview实现,在单个源文件中,最多可以使用10个@Preview装饰自定义组件。

@Preview({
  title: 'ContentTable'
})
@Component
struct ContentTablePreview {
  build() {
    Flex() {
      ContentTable({ foodItem: getDefaultFoodData() })
    }
  }
}

其他参数

@Preview({
  title: 'Component1',  //预览组件的名称
  deviceType: 'phone',  //指定当前组件预览渲染的设备类型,默认为Phone
  width: 1080,  //预览设备的宽度,单位:px
  height: 2340,  //预览设备的长度,单位:px
  colorMode: 'light',  //显示的亮暗模式,当前支持取值为light
  dpi: 480,  //预览设备的屏幕DPI值
  locale: 'zh_CN',  //预览设备的语言,如zh_CN、en_US等
  orientation: 'portrait',  //预览设备的横竖屏状态,取值为portrait或landscape
  roundScreen: false  //设备的屏幕形状是否为圆形
})

如果预览的组件有参数

@Component
struct Title {
  @Prop context: string; 
  build() {
    Text(this.context)
  }
}

建议如下预览

@Preview
@Component    //定义组件片段TitlePreview
struct TitlePreview {
  build() {
    Title({ context: 'MyTitle' })    //在该片段中声明将要预览的组件Title,以及该组件依赖的入参 {context: 'MyTitle'}
  }
}

多端设备预览最多同时支持4个设备的预览。

双向预览(单击UI预览元素,定位到代码)

如果组件有做数据绑定,则其属性不支持在属性面板修改。
如果界面有使用动画效果或者带动画效果组件,则其属性不支持在属性面板修改。
多设备预览时,不支持双向预览。

使用Hamock模拟数据预览

@MockSetup修饰的方法仅在预览场景会自动触发,并先于组件的aboutToAppear执行。

import { MockKit, when, MockSetup } from '@ohos/hamock';

@Entry
@Component
struct Index {
 ...
 @MockSetup
 randomName() {
  let mocker: MockKit = new MockKit();
  let mockfunc: Object = mocker.mockFunc(this, this.method1);
  // mock 指定的方法在指定入参的返回值
  when(mockfunc)('test').afterReturn(1);
 }
 ...
 // 业务场景调用方法
 const result = this.method1('test'); // in previewer, result = 1
}

更多参考:<HarmonyOS第一课>DevEco Studio的使用-华为开发者学堂

支持预览器的控件名单,我列出来是为了方便学

基础组件

AlphabetIndexer

Blank

Button

Checkbox

CheckboxGroup

DataPanel

DatePicker

Divider

Gauge

Image

ImageAnimator

ImageSpan

LoadingProgress

Marquee

Menu

MenuItem

MenuItemGroup

Navigation

NavRouter

NavDestination

PatternLock

Progress

QRCode

Radio

Rating

ScrollBar

Search

Select

Slider

Span

Stepper

StepperItem

Text

TextArea

TextClock

TextInput

TextPicker

TextTimer

Toggle

容器

Badge

Column

ColumnSplit

Counter

Flex

FlowItem

GridCol

GridRow

List

ListItem

ListItemGroup

Navigator

Panel

Refresh

RelativeContainer

Row

RowSplit

Scroll

SideBarContainer

Stack

Swiper

Tabs

TabContent

WaterFlow

绘制组件

Circle

Ellipse

Line

Polyline

Path

Rect

Shape

画布

Canvas

CanvasGradient

CanvasPattern

CanvasRenderingContext2D

ImageBitmap

ImageData

Matrix2D

OffscreenCanvasRenderingContext2D

Path2D

更多参考:<HarmonyOS第一课>DevEco Studio的使用-华为开发者学堂

模拟器可能不知道的操作:

模拟双指操作

Windows系统按下Control键(macOS上的Command)会弹出一个捏
合手势多点触控界面。单击鼠标左键模拟按住双指,并释放鼠标左键
模拟松开双指。鼠标充当第一个手指,穿过锚点是第二个手指。拖动
光标以移动第一个点。

拖动文件到模拟器屏幕,上传文件

拖动HAP包安装应用

Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐