// 1 // 2 ArkUI 基本语法 // 方舟开发框架(简称:ArkUI),是一套 构建HarmonyOS应用 界面 的框架。 // 构建页面的最小单位就是 "组件"。 // 组件名(参数) { // 内容 // } // .属性1() // .属性2() // .属性N() import text from '@ohos.graphics.text' // @Entry // @Component // struct Index { // build() { // Column() { // Text('小说简介') // Row(){ // Text('生活') // Text('情感') // Text('热恋') // Text('都市') // } // } // } // } // 3 系统组件 // 组件 描述 // Text 显示文本 // Image 显示图片 // Column 列,内容垂直排列 // Row 行,内容水平排列 // Button 按钮 // 3.2 通用属性 // 属性 描述 // width 宽度 // height 高度 // backgroundColor 背景色 // @Entry // @Component // struct Index { // build() { // Column() { // Text('小说简介') // .width("100%") // .height(40) // Row(){ // Text('生活') // .width(50) // .height(30) // .backgroundColor(Color.Orange) // Text('情感') // .width(50) // .height(30) // .backgroundColor(Color.Yellow) // Text('热恋') // .width(50) // .height(30) // .backgroundColor(Color.Red) // Text('都市') // .width(50) // .height(30) // .backgroundColor(Color.Blue) // } // .width('100%') // } // } // } // 3.3 尺寸单位 // 尺寸单位 // 1. px :物理像素,也叫设备像素,设备实际拥有的像素点(出场设置、分辨率单位) // 问题:如果用 px 作为宽高单位,又想保证不同显示能力的设备,视觉效果一样大, // 就需要针对每个设备单独编码,设置尺寸,非常麻烦。 // 能不能有个单位,帮我们自动根据显示能力,来进行转换大小,保证多设备视觉效果一致呢? // 2. vp :virtual pixel 虚拟像素 【推荐使用】 // ● 会根据不同设备的显示能力,自动进行转换成对应 px 物理像素,保证不同设备视觉一致 // ● 当数值不带单位时,默认单位 vp // ● 基于目前预览器和常规手机的显示能力,vp 和 px 的对应关系,大约为 3 倍,1vp ≈ 3px (超清屏手机) // @Entry // @Component // struct Index { // build() { // Column() { // Text('vp单位') // .width(100) // .height(100) // .backgroundColor(Color.Pink) // // Text('px单位') // .width('100px') // .height('100px') // .backgroundColor(Color.Orange) // } // } // } // 4. 文本属性 // 使用:.属性(参数) // 属性 描述 /