企业官网建设流程全解析

哈尔滨开发网站,销售平台排名,flash网站建设技术,世界十大著名室内设计师视频演示地址#xff1a; https://www.bilibili.com/video/BV1jomdBBE4H/ 系列文章第2篇 | 作者#xff1a;红目香薰 | 更新时间#xff1a;2025年 #x1f4d6; 前言 在上一篇文章中#xff0c;我们介绍了控件库的品牌标识系统#xff0c;这是所有控件的基础设施。从…视频演示地址https://www.bilibili.com/video/BV1jomdBBE4H/系列文章第2篇| 作者红目香薰 | 更新时间2025年 前言在上一篇文章中我们介绍了控件库的品牌标识系统这是所有控件的基础设施。从本文开始我们将逐一介绍控件库中的实际控件。本文要介绍的是PrimaryButton主要按钮这是控件库中的第1个基础控件也是最常用的按钮组件。PrimaryButton 支持图标、加载状态、多种尺寸并且自动包含品牌标识。 什么是 PrimaryButtonPrimaryButton 是一个功能完整的主要按钮组件具有以下特点多种尺寸支持 small、medium、large 三种尺寸图标支持可以在按钮左侧或右侧添加图标加载状态支持显示加载动画常用于异步操作状态管理支持正常、禁用、加载等多种状态品牌标识自动在左下角显示品牌标识主题配置所有样式都可通过 ComponentTheme 配置适用场景✅ 主要操作按钮如提交、“确认”、“保存”✅ 需要图标提示的操作按钮✅ 需要显示加载状态的异步操作按钮✅ 需要统一视觉风格的主要按钮 快速开始引入组件import{PrimaryButton}from../components/base基础使用最简单的使用方式Entry Component struct MyPage{build(){Column({space:20}){// 基础按钮PrimaryButton({text:点击我})}.width(100%).height(100%).padding(20).justifyContent(FlexAlign.Center)}} 完整功能详解1. 基础按钮最简单的按钮只需要设置文字PrimaryButton({text:提交})2. 带图标的按钮可以在按钮左侧或右侧添加图标// 左侧图标PrimaryButton({text:保存,icon:$r(app.media.icon_save),iconPosition:left})// 右侧图标PrimaryButton({text:下一步,icon:$r(app.media.icon_arrow_right),iconPosition:right})3. 不同尺寸支持三种尺寸small、medium、largeColumn({space:20}){// 小按钮PrimaryButton({text:小按钮,buttonSize:small})// 中等按钮默认PrimaryButton({text:中等按钮,buttonSize:medium})// 大按钮PrimaryButton({text:大按钮,buttonSize:large})}尺寸对比尺寸高度字体大小图标大小内边距small32vp12vp16vp12vpmedium40vp14vp20vp16vplarge48vp16vp24vp24vp4. 加载状态在异步操作时显示加载动画Entry Component struct MyPage{State loading:booleanfalsebuild(){Column({space:20}){PrimaryButton({text:提交数据,loading:this.loading,onClickCallback:(){this.loadingtrue// 模拟异步操作setTimeout((){this.loadingfalse},2000)}})}.width(100%).height(100%).padding(20).justifyContent(FlexAlign.Center)}}加载状态特点自动显示加载动画LoadingProgress自动禁用按钮点击加载时隐藏图标显示加载动画5. 禁用状态禁用按钮常用于表单验证或权限控制Entry Component struct MyPage{State formValid:booleanfalsebuild(){Column({space:20}){PrimaryButton({text:提交,disabled:!this.formValid})}.width(100%).height(100%).padding(20).justifyContent(FlexAlign.Center)}}禁用状态特点按钮变为灰色使用PRIMARY_COLOR_DISABLED透明度降低到 0.5无法点击6. 点击事件处理使用onClickCallback处理点击事件Entry Component struct MyPage{handleClick(){console.info(按钮被点击了)// 执行你的业务逻辑}build(){Column({space:20}){PrimaryButton({text:点击我,onClickCallback:(){this.handleClick()}})}.width(100%).height(100%).padding(20).justifyContent(FlexAlign.Center)}}7. 自定义宽度和高度可以自定义按钮的宽度和高度// 固定宽度PrimaryButton({text:固定宽度按钮,buttonWidth:200})// 百分比宽度PrimaryButton({text:全宽按钮,buttonWidth:100%})// 自定义高度PrimaryButton({text:自定义高度,buttonHeight:50})8. 隐藏品牌标识如果需要隐藏品牌标识不推荐PrimaryButton({text:无标识按钮,showBrand:false})⚙️ 主题配置PrimaryButton 的所有样式都通过ComponentTheme配置所有配置都在代码中不依赖JSON文件。修改按钮颜色import{ComponentTheme}from../theme/ComponentTheme// 修改主色调ComponentTheme.PRIMARY_COLOR#007AFF// 正常状态ComponentTheme.PRIMARY_COLOR_HOVER#0051D5// 悬停状态ComponentTheme.PRIMARY_COLOR_ACTIVE#0040A8// 按下状态ComponentTheme.PRIMARY_COLOR_DISABLED#CCCCCC// 禁用状态修改圆角ComponentTheme.BORDER_RADIUS8// 默认圆角批量配置ComponentTheme.setTheme({primaryColor:#007AFF,borderRadius:8}) API 参考PrimaryButton 属性属性名类型默认值说明textstring按钮按钮文字iconResourceStr?undefined按钮图标可选iconPositionleft | rightleft图标位置buttonSizesmall | medium | largemedium按钮尺寸重命名避免冲突loadingbooleanfalse是否加载中disabledbooleanfalse是否禁用showBrandbooleantrue是否显示品牌标识buttonWidthstring | number?undefined按钮宽度可选buttonHeightstring | number?undefined按钮高度可选onClickCallback() void?undefined点击事件回调尺寸样式对照表尺寸高度字体图标内边距左右内边距上下small32vp12vp16vp12vp6vpmedium40vp14vp20vp16vp8vplarge48vp16vp24vp24vp12vp 最佳实践1. 合理使用尺寸根据使用场景选择合适的尺寸// ✅ 推荐主要操作使用 medium 或 largePrimaryButton({text:提交,buttonSize:medium})// ✅ 推荐次要操作或空间受限时使用 smallPrimaryButton({text:取消,buttonSize:small})// ✅ 推荐重要操作使用 largePrimaryButton({text:立即购买,buttonSize:large})2. 加载状态的使用在异步操作时及时显示加载状态State loading:booleanfalseasynchandleSubmit(){this.loadingtruetry{awaitsubmitData()// 成功处理}catch(error){// 错误处理}finally{this.loadingfalse}}PrimaryButton({text:提交,loading:this.loading,onClickCallback:()this.handleSubmit()})3. 图标的使用使用图标增强按钮的可识别性// ✅ 推荐使用语义明确的图标PrimaryButton({text:保存,icon:$r(app.media.icon_save),iconPosition:left})// ✅ 推荐操作类按钮使用右侧图标PrimaryButton({text:下一步,icon:$r(app.media.icon_arrow_right),iconPosition:right})4. 禁用状态的使用在表单验证或权限控制时使用禁用状态State formValid:booleanfalseState hasPermission:booleantruePrimaryButton({text:提交,disabled:!this.formValid||!this.hasPermission})5. 保持品牌标识除非特殊需求建议保持品牌标识显示// ✅ 推荐保持品牌标识PrimaryButton({text:提交})// ⚠️ 仅在特殊场景下隐藏PrimaryButton({text:提交,showBrand:false}) 常见问题Q1: 如何自定义按钮颜色通过ComponentTheme修改ComponentTheme.PRIMARY_COLOR#FF6B35// 自定义主色Q2: 加载状态时如何阻止重复点击加载状态会自动禁用按钮无需额外处理PrimaryButton({text:提交,loading:this.loading,// loading 为 true 时自动禁用onClickCallback:(){this.loadingtrue// 执行异步操作}})Q3: 如何实现按钮的悬停效果按钮会自动使用ComponentTheme.PRIMARY_COLOR_HOVER作为悬停颜色你只需要配置ComponentTheme.PRIMARY_COLOR_HOVER#0051D5Q4: 图标资源如何准备图标资源需要放在resources/base/media/目录下然后在代码中引用// 使用资源引用icon:$r(app.media.icon_save)// 或使用路径icon:common/icons/save.pngQ5: 按钮文字可以动态更新吗可以使用State管理文字State buttonText:string提交PrimaryButton({text:this.buttonText})// 动态更新this.buttonText提交中... 完整示例代码示例1基础按钮组import{PrimaryButton}from../components/baseEntry Component struct ButtonExample1{build(){Column({space:20}){// 基础按钮PrimaryButton({text:提交})// 带图标按钮PrimaryButton({text:保存,icon:$r(app.media.icon_save),iconPosition:left})// 不同尺寸Row({space:20}){PrimaryButton({text:小,buttonSize:small})PrimaryButton({text:中,buttonSize:medium})PrimaryButton({text:大,buttonSize:large})}}.width(100%).height(100%).padding(20).justifyContent(FlexAlign.Center)}}示例2加载状态import{PrimaryButton}from../components/baseEntry Component struct ButtonExample2{State loading:booleanfalseasynchandleSubmit(){this.loadingtrue// 模拟异步操作awaitnewPromise(resolvesetTimeout(resolve,2000))this.loadingfalseconsole.info(提交成功)}build(){Column({space:20}){PrimaryButton({text:提交数据,loading:this.loading,onClickCallback:(){this.handleSubmit()}})Text(this.loading?提交中...:点击提交).fontSize(14).fontColor(#666666)}.width(100%).height(100%).padding(20).justifyContent(FlexAlign.Center)}}示例3表单提交import{PrimaryButton}from../components/baseEntry Component struct ButtonExample3{State username:stringState password:stringState loading:booleanfalsegetformValid():boolean{returnthis.username.length0this.password.length0}asynchandleLogin(){if(!this.formValid)returnthis.loadingtruetry{// 执行登录逻辑awaitlogin(this.username,this.password)console.info(登录成功)}catch(error){console.error(登录失败,error)}finally{this.loadingfalse}}build(){Column({space:20}){TextInput({placeholder:用户名}).onChange((value:string){this.usernamevalue})TextInput({placeholder:密码,type:InputType.Password}).onChange((value:string){this.passwordvalue})PrimaryButton({text:登录,loading:this.loading,disabled:!this.formValid,buttonWidth:100%,onClickCallback:(){this.handleLogin()}})}.width(100%).height(100%).padding(20)}}示例4图标按钮组合import{PrimaryButton}from../components/baseEntry Component struct ButtonExample4{build(){Column({space:20}){// 左侧图标PrimaryButton({text:保存,icon:$r(app.media.icon_save),iconPosition:left,buttonWidth:150})// 右侧图标PrimaryButton({text:下一步,icon:$r(app.media.icon_arrow_right),iconPosition:right,buttonWidth:150})// 仅图标通过空文字实现PrimaryButton({text:,icon:$r(app.media.icon_add),buttonWidth:48,buttonHeight:48})}.width(100%).height(100%).padding(20).justifyContent(FlexAlign.Center)}}示例5全宽按钮import{PrimaryButton}from../components/baseEntry Component struct ButtonExample5{build(){Column({space:15}){PrimaryButton({text:全宽按钮,buttonWidth:100%,buttonSize:large})PrimaryButton({text:中等宽度,buttonWidth:60%,buttonSize:medium})PrimaryButton({text:小宽度,buttonWidth:120,buttonSize:small})}.width(100%).height(100%).padding(20).justifyContent(FlexAlign.Center)}} 总结PrimaryButton 是控件库中的第一个基础控件具有以下核心特性功能完整支持图标、加载、禁用等多种状态尺寸灵活三种尺寸满足不同场景需求易于使用简单的 API开箱即用主题配置所有样式都可通过代码配置品牌标识自动包含品牌标识保持视觉统一关键要点✅ 使用buttonSize属性选择合适尺寸✅ 使用loading属性处理异步操作✅ 使用disabled属性控制按钮状态✅ 使用icon和iconPosition添加图标✅ 通过ComponentTheme自定义样式下一篇预告《鸿蒙PC UI控件库 - SecondaryButton 次要按钮详解》本文是鸿蒙PC UI控件库系列文章的第2篇后续将陆续发布更多控件的详细教程。