,敢教日月换新天。为有牺牲多壮志

DevEco Studio:查看ArkUI预览效果

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
➤博客园地址:为敢技术(https://www.cnblogs.com/strengthen/ 
➤GitHub地址:https://github.com/strengthen
➤原文地址:https://www.cnblogs.com/strengthen/p/18469594
➤如果链接不是为敢技术的博客园地址,则可能是爬取作者的文章。
➤原文已修改更新!强烈建议点击原文地址阅读!支持作者!支持原创!
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

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() })
    }
  }
}
复制代码

以上示例的组件预览效果如下图所示:

组件预览默认的预览设备为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'}
  }
}

 

posted @   为敢技术  阅读(69)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 单线程的Redis速度为什么快?
· 展开说说关于C#中ORM框架的用法!
· Pantheons:用 TypeScript 打造主流大模型对话的一站式集成库
· SQL Server 2025 AI相关能力初探
· 为什么 退出登录 或 修改密码 无法使 token 失效
历史上的今天:
2018-10-16 [Swift]LeetCode482. 密钥格式化 | License Key Formatting
2018-10-16 [Swift]遍历集合类型(数组、集合和字典)
2018-10-16 [Swift]遍历字符串
2018-10-16 [Swift]LeetCode479. 最大回文数乘积 | Largest Palindrome Product
2018-10-16 [Swift]LeetCode475. 供暖器 | Heaters
点击右上角即可分享
微信分享提示
西雅图
06:14发布
西雅图
06:14发布
6°
东北风
4级
空气质量
相对湿度
83%
今天
4°/11°
周五
4°/11°
周六
2°/12°