DevEco Studio：檢視ArkUI預覽效果

为敢技术發表於2024-10-16
devUI

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
➤微信公眾號：山青詠芝（MaoistLearning）
➤部落格園地址：為敢技術（https://www.cnblogs.com/strengthen/ ）
➤GitHub地址：https://github.com/strengthen
➤原文地址：https://www.cnblogs.com/strengthen/p/18469594
➤如果連結不是為敢技術的部落格園地址，則可能是爬取作者的文章。
➤原文已修改更新！強烈建議點選原文地址閱讀！支援作者！支援原創！
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

ArkUI預覽支援頁面預覽與元件預覽，下圖中左側圖示DevEco Studio：檢視ArkUI預覽效果為頁面預覽，右側圖示DevEco Studio：檢視ArkUI預覽效果為元件預覽。

DevEco Studio：檢視ArkUI預覽效果

頁面預覽

ArkTS應用/服務支援頁面預覽。頁面預覽透過在工程的ets檔案頭部新增@Entry實現。

@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的使用參考如下示例： 
@Preview({
  title: 'ContentTable'
})
@Component
struct ContentTablePreview {
  build() {
    Flex() {
      ContentTable({ foodItem: getDefaultFoodData() })
    }
  }
}

以上示例的元件預覽效果如下圖所示：

DevEco Studio：檢視ArkUI預覽效果

元件預覽預設的預覽裝置為Phone，若您想檢視不同的裝置，或者不同的螢幕形狀，或者不同裝置語言等情況下的元件預覽效果，可以透過設定@Preview的引數，指定預覽裝置的相關屬性。若不設定@Preview的引數，預設的裝置屬性如下所示： 
@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  //裝置的螢幕形狀是否為圓形
})

請注意，如果被預覽的元件是依賴引數注入的元件，建議的預覽方式是：定義一個元件片段，在該片段中宣告將要預覽的元件，以及該元件依賴的入參，並在元件片段上標註@Preview註解，以表明將預覽該片段中的內容。例如，要預覽如下元件：

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

建議按如下方式預覽：

@Preview
@Component    //定義元件片段TitlePreview
struct TitlePreview {
  build() {
    Title({ context: 'MyTitle' })    //在該片段中宣告將要預覽的元件Title，以及該元件依賴的入參 {context: 'MyTitle'}
  }
}

相關文章