【Harmony OS 4.0】基础组件

本文主要是介绍【Harmony OS 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 - 图片组件

// 引入项目本地 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)}
}

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 - 滚动条组件

1. 用于配合可滚动组件使用，如 List、Grid、Scroll。

10. Blank - 空白填充组件

1. 在容器主轴方向上，空白填充组件具有自动填充容器空余部分的能力。仅当父组件为Row、Column、Flex 时生效。

这篇关于【Harmony OS 4.0】基础组件的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---