HarmonyOS开发实战：小分享-TemplateSelectPage模板选择——分类Tab+Grid网格

前言欢迎加入开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net模板选择页让用户从丰富的模板库中选择喜欢的样式支持分类筛选和网格预览。小分享 App 的 TemplateSelectPage 使用Grid 组件实现三列网格布局通过Tab 分类切换筛选模板。本篇讲解 Grid 网格布局、Tab 下划线、State 选中态等核心实现。详细 API 可参考 HarmonyOS Grid 官方文档。一、TemplateSelectPage 完整代码1.1 页面完整实现import router from ohos.router; import { TemplateItem } from ../common/interfaces; Entry Component struct TemplateSelectPage { State selectedCategory: number 0; private categories: string[] [热门, 文艺, 简约, 古风, 节日]; private templates: ArrayTemplateItem [ { title: 水墨古风, style: 古风 }, { title: 简约现代, style: 简约 }, { title: 文艺清新, style: 文艺 }, { title: 节日喜庆, style: 节日 }, { title: 古典雅致, style: 古风 }, { title: 极简黑白, style: 简约 } ]; build() { Column() { this.HeaderBar() this.CategoryTabs() this.TemplateGrid() } .width(100%).height(100%).backgroundColor(#F5F5F5) } }1.2 Header 导航栏Row() { Text(‹).fontSize(24).fontColor(#1A1A1A).onClick(() { router.back() }) Text(选择模板).fontSize(18).fontWeight(FontWeight.Bold).fontColor(#1A1A1A).layoutWeight(1).textAlign(TextAlign.Center) Text().fontSize(20).fontColor(#999999).onClick(() { router.back() }) } .width(100%).padding({ left: 16, right: 16, top: 12, bottom: 12 }).backgroundColor(Color.White)二、分类 Tab 实现2.1 Tab 数据private categories: string[] [热门, 文艺, 简约, 古风, 节日];2.2 Tab 选中下划线.border({ width: { bottom: 2 }, color: { bottom: this.selectedCategory index ? #F5A623 : Color.Transparent } })2.3 Tab 选中态对比状态文字颜色下划线颜色字重选中#F5A623#F5A623Bold未选中#666666透明Normal三、Grid 网格布局3.1 基本结构Grid() { ForEach(this.templates, (item: TemplateItem, index: number) { GridItem() { this.TemplateCard(item, index) } }, (item: TemplateItem, index: number) ${item.title}_${index}) } .columnsTemplate(1fr 1fr 1fr) .rowsGap(0) .layoutWeight(1) .padding({ top: 8 })3.2 columnsTemplate 语法模板说明示例1fr 1fr 1fr三列等分通用1fr 2fr 1fr中列宽两侧窄特殊布局repeat(3, 1fr)三列等分通用100px 1fr 1fr第一列固定其余等分侧边栏四、模板卡片设计4.1 卡片结构Column() { Column() { Text().fontSize(40) } .width(100%).height(140) .backgroundColor(index % 2 0 ? #FFF8F0 : #F0F8FF) .borderRadius({ topLeft: 12, topRight: 12 }) Text(item.title).fontSize(13).fontColor(#333333) .width(100%).padding({ left: 8, top: 8, bottom: 8 }).textAlign(TextAlign.Center) } .width(100%).backgroundColor(Color.White).borderRadius(12) .shadow({ radius: 2, color: #08000000, offsetY: 1 }).margin(8)4.2 卡片样式参数元素属性值说明预览区高度140px模板预览缩略图预览区背景色#FFF8F0/#F0F8FF交替色预览区圆角topLeft/topRight 12仅顶部圆角标题字号13px模板名称标题颜色#333333深灰色卡片阴影radius 2, offsetY 1轻阴影五、State 状态管理5.1 选中分类State selectedCategory: number 0; .onClick(() { this.selectedCategory index })六、页面布局结构Column (主容器背景 #F5F5F5) ├─ Row (Header 导航栏白色背景) │ ├─ Text(‹) 返回 │ ├─ Text(选择模板) 标题 │ └─ Text() 关闭 ├─ Row (分类 Tab 栏白色背景) │ ├─ Text(热门) - 选中时 #F5A623, 下划线 │ ├─ Text(文艺) │ ├─ Text(简约) │ ├─ Text(古风) │ └─ Text(节日) └─ Grid (模板网格) - columnsTemplate(1fr 1fr 1fr) ├─ GridItem (模板卡片 1) - 交替背景色 │ ├─ Column (预览图) 140px 高度 │ └─ Text(标题) 13px ├─ GridItem (模板卡片 2) └─ GridItem (模板卡片 3) - 每行 3 个七、模板数据模型7.1 TemplateItem 接口export interface TemplateItem { title: string; // 模板名称 style: string; // 风格分类 }八、完整代码文件索引文件路径说明pages/TemplateSelectPage.ets模板选择页面common/interfaces.etsTemplateItem 接口定义九、本文涉及的所有 APIAPI/组件用途文档链接Grid网格布局GridGridItem网格项GridItemState状态管理State Guideborder()边框样式Bordershadow()阴影ShadowborderRadius()圆角BorderRadiusrouter.pushUrl()路由跳转RouterForEach循环渲染ForEach十、实现要点总结10.1 技术要点模板选择页的核心实现要点分类 Tab使用border条件渲染实现选中下划线Grid 网格columnsTemplate(1fr 1fr 1fr)三列等分模板卡片交替背景色、局部圆角、轻阴影State 管理selectedCategory控制分类选中态路由跳转点击卡片跳转到TemplateDetailPage10.2 实战建议分类 Tab 使用border的bottom方向实现下划线Grid 的columnsTemplate使用1fr等分列宽模板卡片使用margin(8)保持间距局部圆角使用borderRadius({topLeft, topRight})总结本文详细讲解了 TemplateSelectPage 模板选择页的完整实现。核心知识点包括分类 Tab 切换border 下划线实现选中态、Grid 网格布局columnsTemplate(1fr 1fr 1fr)三列等分、模板卡片设计交替背景色、局部圆角、轻阴影效果、State 状态管理selectedCategory控制分类选中态。这些技术构成了完整的模板选择页面。下一篇我们将深入 TemplateDetailPage 模板详情页的实现。TemplateDetailPage 模板详情页相关资源HarmonyOS Grid 官方文档Grid ReferenceHarmonyOS GridItem 组件GridItem ReferenceHarmonyOS border 属性Border AttributeHarmonyOS State 装饰器State GuideHarmonyOS Router 路由Router APIHarmonyOS ForEach 渲染ForEach ReferenceHarmonyOS 阴影属性Shadow Attribute开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.netSharePreviewPage 分享预览页TemplateDetailPage 模板详情页如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力