【HarmonyOS 4.0】基础组件
1. Text - 文本组件
Text('hello word').textAlign(TextAlign.Center).fontSize(14).fontColor('#B088FF').textOverflow({ overflow: TextOverflow.Ellipsis })// 设置文本溢出方式为省略号.maxLines(1)// 设置最大行数为1.border({ width: 1 }).lineHeight(15)// 设置行高为20.padding(10)
2. TextInput - 单行文本输入框组件
// TextInput组件的自定义样式扩展
@Extend(TextInput)
function inputStyle() {.placeholderColor($r('app.color.placeholder_color')).height($r('app.float.login_input_height')).fontSize($r('app.float.text_input_size')).backgroundColor($r('app.color.text_input_background')).width(CommonConstants.FULL_PARENT).padding({left: CommonConstants.INPUT_PADDING_LEFT}).margin({ top: $r('app.float.input_margin_top') })
}TextInput({ text: this.account, placeholder: $r('app.string.account') }).inputStyle().type(InputType.Number).maxLength(CommonConstants.INPUT_ACCOUNT_LENGTH).onChange((value: string) => {this.account = value})
3. Button - 按钮组件
4. Image - 图片组件
4.1 Image 组件参数
- Image 组件的参数类型为 string | Resource | media.PixelMap ，支持png、jpg、bmp、svg、gif 类型的图片格式。
4.1.1 string 类型的参数用于通过路径的方式引用图片，包括本地图片和网络图片。
- 引用本地图片，需要将图片置于 ets 目录下，并且需要为 Image 组件提供图片相对于 ets 目录的路径。
Image('pages/components/image/images/icon.png')
- 引用网络图片，真机中运行的鸿蒙应用，访问网络图片需要配置网络访问权限，不过在预览器和模拟器中测试时不受限制。
Image('https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d')
4.1.2 Resource 类型的参数用于引入 resources 目录下的图片。
- resources 目录用于统一存放应用所需的各种资源，包括图片，音频，视频，文本等。
- resources 目录下，用于存放资源的子目录（element、media、profile）和 rawfile。
- element、media、profile 可存在多种版本，用于适配不同的环境。例如语言环境（zh_CN、en_US）、系统主题（dark、light）、设备类型（phone、tablet）等。我们可以为上述每种环境各自准备一套资源文件，每种环境对应 resources 下的一个目录。
3.1 media 存放媒体资源，包括图片，音频，视频等文件。
media 目录下不能创建子目录。
$r() 的返回值即为 Resource 类型Image($r('app.media.icon_default'))3.2 element 存放用于描述页面元素的尺寸，颜色，样式等的各种类型的值，每种类型的值都定义在一个相应的 JSON 文件中。
3.3 profile 存放自定义配置文件。
4. rawfile 用于存储任意格式的原始文件，需要注意的是 rawfile 不会根据设备所处的环境去匹配不同的资源。
文件的路径为相对于 rawfile 的路径。
rawfile 目录支持创建子目录。
$rawfile() 的返回值即为 Resource 类型Image($rawfile('icon_default.png'))
4.1.3 media.PixelMap
- PixelMap 指的是图片的像素位图，其通常是一个二维数组，数组中的每个元素对应着图片中的一个像素，包含了该像素的颜色等信息。
- 像素位图主要用于图片编辑的场景。
4.1.4 代码示例如下：
// 引入项目本地 resources/base/media/ic_default.jpeg 路径下的图片
Image($r('app.media.ic_default'))// @Builder 自定义构建函数时，用 :Resource 表示资源引用类型
@Builder function CreateIcon (icon: Resource): void {Column() {Image(icon).width(28).height(28).objectFit(ImageFit.Contain).margin(10)}
}
4.2 常用属性
4.2.1 width、height
- 可接收的参数类型均为 string｜number｜Resource。
// string
.width('100%') 或 .width('150px') 或 .width('150vp')
// number 默认以 vp 作为单位
.width(150)
// Resource
.width($r('app.float.login_width'))
5. Divider - 分隔器组件
6. LoadingProgress - 加载动效组件
LoadingProgress().color($r('app.color.loading_color')).width($r('app.float.login_progress_size')).height($r('app.float.login_progress_size')).margin({top: $r('app.float.login_progress_margin_top')})
7. Progress - 进度条组件
8. Toggle - 切换按钮组件
- 该组件提供勾选框样式、状态按钮样式及开关样式。
Toggle({type: ToggleType.Switch, isOn: false
})
9. ScrollBar - 滚动条组件
- 用于配合可滚动组件使用，如 List、Grid、Scroll。
10. Blank - 空白填充组件
- 在容器主轴方向上，空白填充组件具有自动填充容器空余部分的能力。仅当父组件为Row、Column、Flex 时生效。