建站行业都扁平化设计,网站开发 工作量,电商修图技巧,洛阳建设部官方网站组件
组件化是一种将复杂的前端应用程序分解成小的、独立的部分的方法。这些部分被称为组件#xff0c;它们可以重复使用#xff0c;可以与其他组件组合使用以创建更复杂的组件#xff0c;并且它们有自己的生命周期和状态。
组件化的目的是提高开发效率和代码重用率#…组件
组件化是一种将复杂的前端应用程序分解成小的、独立的部分的方法。这些部分被称为组件它们可以重复使用可以与其他组件组合使用以创建更复杂的组件并且它们有自己的生命周期和状态。
组件化的目的是提高开发效率和代码重用率使开发人员更专注于组件自身的实现而不是整个应用程序。这样可以提高代码的可维护性和可扩展性并且减少了程序出错的机会。
组件是界面搭建与显示的最小单位 #mermaid-svg-Sbrel6zPTPew22Ps {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-Sbrel6zPTPew22Ps .error-icon{fill:#552222;}#mermaid-svg-Sbrel6zPTPew22Ps .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-Sbrel6zPTPew22Ps .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-Sbrel6zPTPew22Ps .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-Sbrel6zPTPew22Ps .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-Sbrel6zPTPew22Ps .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-Sbrel6zPTPew22Ps .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-Sbrel6zPTPew22Ps .marker{fill:#333333;stroke:#333333;}#mermaid-svg-Sbrel6zPTPew22Ps .marker.cross{stroke:#333333;}#mermaid-svg-Sbrel6zPTPew22Ps svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-Sbrel6zPTPew22Ps .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-Sbrel6zPTPew22Ps .cluster-label text{fill:#333;}#mermaid-svg-Sbrel6zPTPew22Ps .cluster-label span{color:#333;}#mermaid-svg-Sbrel6zPTPew22Ps .label text,#mermaid-svg-Sbrel6zPTPew22Ps span{fill:#333;color:#333;}#mermaid-svg-Sbrel6zPTPew22Ps .node rect,#mermaid-svg-Sbrel6zPTPew22Ps .node circle,#mermaid-svg-Sbrel6zPTPew22Ps .node ellipse,#mermaid-svg-Sbrel6zPTPew22Ps .node polygon,#mermaid-svg-Sbrel6zPTPew22Ps .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-Sbrel6zPTPew22Ps .node .label{text-align:center;}#mermaid-svg-Sbrel6zPTPew22Ps .node.clickable{cursor:pointer;}#mermaid-svg-Sbrel6zPTPew22Ps .arrowheadPath{fill:#333333;}#mermaid-svg-Sbrel6zPTPew22Ps .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-Sbrel6zPTPew22Ps .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-Sbrel6zPTPew22Ps .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-Sbrel6zPTPew22Ps .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-Sbrel6zPTPew22Ps .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-Sbrel6zPTPew22Ps .cluster text{fill:#333;}#mermaid-svg-Sbrel6zPTPew22Ps .cluster span{color:#333;}#mermaid-svg-Sbrel6zPTPew22Ps div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-Sbrel6zPTPew22Ps :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 根据功能分类 基础组件 容器组件 媒体组件 绘制组件 画布组件 Text Image TextInput Button LoadingProgress .... Image 组件
Image 用来渲染展示图片的组件支持加载本地和网络图片
语法
Image(src: string|PixelMap|Resourece)string 访问网络图片、本地图片 访问网络图片时需要在module.json5文件中添加网络访问权限 ‘module’:{ reqPermissinos:[ {name:ohos.permission.INTERNET} ] } PixelMap PixelMap 为图像像素类用于读取或写入图像数据以及获取图像信息。Resource 类型 使用时需要先将图片放在resource 的 media或 rawfile目录下
属性
width()| height()支持number、string和resource
Text组件
用于在界面上展示一段文本信息可以包含子组件
语法
Text(content?:string|resouce)属性
文本样式 可使用fontColor、fontSize、fontStyle、fontWeight、fontFamily文本样式
名称参数类型描述fontColorResouceColor设置文本颜色fontSizeLength /Resource设置文本尺寸Length为number类型时使用fp单位。fontStyleFontStyle设置文本的字体样式。默认值FontStyle.Normal。fontWeightnumber / FontWeigh /string设置文本的字体粗细number类型取值[100, 900]取值间隔为100默认为400取值越大字体越粗。string类型仅支持number类型取值的字符串形式例如“400”以及“bold”、“bolder”、“lighter”、“regular”、“medium”分别对应FontWeight中相应的枚举值。默认值FontWeight.Normal。fontFamilystring /Resource设置文本的字体列表。使用多个字体使用“”进行分割优先级按顺序生效。例如“Arialsans-serif”。 Text(HarmonyOS).fontColor(Color.Blue).fontSize(20).fontStyle(FontStyle.Italic).fontWeight(FontWeight.Bold).fontFamily(Arial)文本对其方式 可以使用textAlign属性设置文本的对齐方式
名称描述Start水平对齐首部。Center水平居中对齐。End水平对齐尾部。
Text(HarmonyOS).width(200).textAlign(TextAlign.Start)设置文本超长显示 当文本内容较多超出了Text组件范围的时候您可以使用textOverflow设置文本截取方式需配合maxLines使用单独设置不生效maxLines用于设置文本显示最大行数
Text(This is the text content of Text Component This is the text content of Text Component).fontSize(16).maxLines(1).textOverflow({overflow:TextOverflow.Ellipsis})设置文本装饰线 使用decoration设置文本装饰线样式及其颜色
decoration({ type: TextDecorationType.Underline, color: Color.Black })TextDecorationType类型描述None不使用文本装饰线Overline文字上划线修饰。LineThrough穿过文本的修饰线。Underline文字下划线修饰。
TextInput
用来输入但行文本并支持响应输入事件
属性
设置提示文本 当我们平时使用输入框的时候往往会有一些提示文字
TextInput({ placeholder: 请输入帐号 })设置最大输入字符数
maxLength()设置文本框输入类型 可以使用type属性来设置输入框类型
TextInput({ placeholder: 请输入密码 }).type(InputType.Password)InputType类型描述Normal基本输入模式。支持输入数字、字母、下划线、空格、特殊字符。Password密码输入模式。Emaile-mail地址输入模式Number纯数字输入模式。PhoneNumber9电话号码输入模式。
设置光标位置 可以使用TextInputController动态设置光位置 controller: TextInputController new TextInputController()this.controller.caretPosition(2)获取输入文本 可以给TextInput 设置onChange 获取文本信息 State text: string TextInput({ placeholder: 请输入账号 }).caretColor(Color.Blue).onChange((value: string) {this.text value})Button
主要用来响应点击事件可以包含子组件。
属性
设置按钮样式 type用于定义按钮样式示例代码中ButtonType.Capsule表示胶囊形按钮stateEffect用于设置按钮按下时是否开启切换效果当状态置为false时点击效果关闭默认值为true。
ButtonType类型描述Capsule胶囊型按钮圆角默认为高度的一半Circle圆形按钮。Normal普通按钮默认不带圆角
设置按钮点击事件 可以给Button绑定onClick事件每当用户点击Button的时候就会回调执行onClick方法
Button(登录, { type: ButtonType.Capsule, stateEffect: true })....onClick(() {// 处理点击事件逻辑})包含子组件 Button组件可以包含子组件让您可以开发出更丰富多样的Button
