HarmonyOS开发实战：小分享-ArkUI 基础组件详解——Text、Button、Image
前言Text、Button、Image是 ArkUI 最基础的三大组件几乎每个页面都离不开它们。小分享 App 大量使用了这些组件。本篇集中讲解它们的核心属性和常见用法。详细 API 可参考 HarmonyOS Text 官方文档。一、Text 组件1.1 基本用法Text(小分享).fontSize(20).fontWeight(FontWeight.Bold).fontColor(#1A1A1A)1.2 Text 常用属性属性作用示例fontSize字号20fontWeight字重FontWeight.BoldfontColor颜色#1A1A1AtextAlign对齐TextAlign.CentermaxLines最大行数1textOverflow溢出处理TextOverflow.EllipsislineHeight行高28letterSpacing字间距21.3 文字省略Text(item.title).maxLines(1).textOverflow({overflow:TextOverflow.Ellipsis})二、Button 组件2.1 基本用法Button(小分享).fontSize(16).fontColor(Color.White).backgroundColor(#F5A623).width(60%).height(48).borderRadius(24).onClick((){router.replaceUrl({url:pages/HomePage})})2.2 Button 常用属性属性作用示例width宽度90%/200height高度48backgroundColor背景色#F5A623borderRadius圆角24fontSize字号16fontColor文字颜色Color.WhiteonClick点击事件() {}2.3 透明按钮Button(退出登录).fontSize(16).fontColor(#F44336).backgroundColor(Color.Transparent).width(100%).height(48).borderRadius(12)三、Image 组件3.1 基本用法Image($r(app.media.app_icon)).width(64).height(64).borderRadius(32).objectFit(ImageFit.Cover)3.2 Image 常用属性属性作用示例width宽度64height高度64borderRadius圆角32objectFit填充模式ImageFit.Coversrc图片来源资源/网络/本地3.3 三种图片来源// 1. 资源文件Image($r(app.media.app_icon))// 2. 网络图片Image(https://example.com/image.png)// 3. 本地文件Image(/data/storage/el2/base/haps/entry/files/image.png)四、Text、Button、Image 对比组件用途核心属性Text文字展示fontSize, fontColor, textAlignButton点击操作backgroundColor, borderRadius, onClickImage图片展示objectFit, src五、本文核心知识点5.1 基础组件核心要点Text字数限制、溢出省略、行高Button圆角、背景色、点击事件Image三种图片来源、填充模式5.2 实战开发要点文字溢出用 maxLines textOverflow按钮圆角 高度/2 时为胶囊形图片资源用 $r 引用相关资源HarmonyOS Text 官方文档HarmonyOS Button 组件HarmonyOS Image 组件开源鸿蒙跨平台社区附录基础组件的完整实现细节1. Text 组件完整属性属性作用示例fontSize字号20fontWeight字重FontWeight.BoldfontColor颜色#1A1A1AtextAlign对齐TextAlign.CentermaxLines最大行数1textOverflow溢出处理TextOverflow.EllipsislineHeight行高28letterSpacing字间距22. Button 组件完整属性Button(小分享).fontSize(16).fontColor(Color.White).backgroundColor(#F5A623).width(60%).height(48).borderRadius(24).onClick((){router.replaceUrl({url:pages/HomePage})})3. Image 组件完整用法// 资源文件Image($r(app.media.app_icon)).width(64).height(64).borderRadius(32).objectFit(ImageFit.Cover)// 网络图片Image(https://example.com/image.png).width(100%).height(200).objectFit(ImageFit.Cover)// 本地文件Image(/data/storage/el2/base/haps/entry/files/image.png)4. 三种图片来源来源语法示例资源文件$r(app.media.xxx)应用内置图标网络图片URL 字符串在线图片本地文件文件路径沙箱文件5. 完整代码文件索引文件路径说明所有页面文件使用 Text/Button/Image6. 总结本文详细讲解了 ArkUI 三大基础组件 Text、Button、Image 的完整属性和用法。相关资源HarmonyOS Text 官方文档Text ReferenceHarmonyOS Button 组件Button ReferenceHarmonyOS Image 组件Image ReferenceHarmonyOS 图片加载Image LoadingHarmonyOS 资源管理Resource ManagementHarmonyOS 样式指南Styling GuideHarmonyOS 文字溢出Text Overflow开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.netArkUI 表单组件本文涉及的所有 API 索引API类别用途Column布局容器垂直排列子组件Row布局容器水平排列子组件Text基础组件显示文本ForEach渲染控制循环渲染列表State装饰器组件内状态管理Builder装饰器封装可复用 UI 片段router.pushUrl路由页面跳转router.back路由返回上一页总结本文详细讲解了小分享 App 中对应页面的完整实现。核心知识点涵盖布局容器、组件封装、状态管理、路由跳转等关键技术。通过本文的学习读者可以掌握 HarmonyOS ArkUI 声明式开发的核心技能并能够独立实现类似的页面功能。相关资源HarmonyOS 官方文档https://developer.huawei.com/consumer/cn/doc/ArkTS 语法指南ArkTS Introduction状态管理指南State ManagementArkUI 组件参考ArkUI Components路由 APIRouter API开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net6. Text 组件完整用法// 基本文字Text(小分享).fontSize(20).fontWeight(FontWeight.Bold).fontColor(#1A1A1A)// 多行文字省略Text(item.title).maxLines(1).textOverflow({overflow:TextOverflow.Ellipsis})// 行高设置Text(正文内容).fontSize(14).fontColor(#666666).lineHeight(28)// 对齐方式Text(居中标题).fontSize(18).textAlign(TextAlign.Center).width(100%)7. Button 组件完整用法// 主按钮 - 胶囊形Button(小分享).fontSize(16).fontColor(Color.White).backgroundColor(#F5A623).width(60%).height(48).borderRadius(24)// 透明按钮 - 红色文字Button(退出登录).fontSize(16).fontColor(#F44336).backgroundColor(Color.Transparent).width(100%).height(48).borderRadius(12)// 功能按钮 - 使用此模板Button(使用此模板).fontSize(16).fontColor(Color.White).backgroundColor(#F5A623).width(90%).height(48).borderRadius(24).margin({bottom:20})8. Image 组件完整用法// 资源图片Image($r(app.media.app_icon)).width(64).height(64).borderRadius(32).objectFit(ImageFit.Cover)// 网络图片Image(https://example.com/image.png).width(100%).height(200).objectFit(ImageFit.Cover)// 本地文件图片Image(/data/storage/el2/base/haps/entry/files/image.png)9. 三种图片来源对比来源语法示例适用场景资源文件$r(app.media.xxx)应用内置图标固定图标、启动图网络图片URL 字符串在线图片 URL用户头像、内容图本地文件文件路径沙箱文件路径用户拍摄的照片10. 小分享 App 中的使用组件使用场景示例Text标题、正文、标签所有页面的文字Button操作按钮、分享按钮导航栏、底部按钮Image图片展示头像、预览图、Banner11. 完整代码文件索引文件路径说明所有页面文件使用 Text/Button/Image12. 本文涉及的所有 APIAPI/组件用途文档链接Text文本组件TextButton按钮组件ButtonImage图片组件ImageImageFit图片填充模式ImageTextOverflow文字溢出处理TextTextAlign文字对齐TextFontWeight字重Text13. 实现要点总结基础组件核心要点Text支持 fontSize、fontWeight、fontColor、textAlign、maxLines、textOverflow、lineHeight 等属性Button支持 backgroundColor、borderRadius、fontSize、fontColor、onClick 等属性Image支持三种图片来源资源、网络、本地objectFit 控制填充模式14. 总结本文详细讲解了 ArkUI 三大基础组件 Text、Button、Image 的完整属性和用法。相关资源HarmonyOS Text 官方文档Text ReferenceHarmonyOS Button 组件Button ReferenceHarmonyOS Image 组件Image ReferenceHarmonyOS 图片加载Image LoadingHarmonyOS 资源管理Resource ManagementHarmonyOS 样式指南Styling GuideHarmonyOS 文字溢出Text Overflow开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.netArkUI 表单组件Builder 与 Component 对比ArkUI 表单组件Builder 与 Component 对比ArkUI 表单组件Builder 与 Component 对比ArkUI 表单组件Builder 与 Component 对比如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力
)
