页面预览

模板详情页预览信息标签图

前言

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net

模板详情页 展示模板的完整预览、使用量、标签和描述信息，底部提供「使用此模板」按钮。小分享 App 的 TemplateDetailPage 使用 @Builder 封装标签胶囊、局部圆角、底部固定按钮 等技巧。本篇详细讲解模板详情页的完整实现。详细 API 可参考 HarmonyOS Button 官方文档。

一、TemplateDetailPage 完整代码

1.1 页面完整实现

import router from '@ohos.router';

@Entry
@Component
struct TemplateDetailPage {
  build() {
    Column() {
      this.HeaderBar()
      Scroll() {
        Column({ space: 20 }) {
          this.TemplatePreview()
          this.TemplateInfo()
          this.TemplateDescription()
        }
        .padding({ bottom: 100 })
      }
      .layoutWeight(1)
      this.UseTemplateButton()
    }
    .width('100%').height('100%').backgroundColor('#F5F5F5')
  }
}

1.2 Header 导航栏

Row() {
  Text('‹').fontSize(24).fontColor('#1A1A1A').onClick(() => { router.back() })
  Blank()
}
.width('100%').padding({ left: 16, right: 16, top: 12, bottom: 12 }).backgroundColor(Color.White)

二、局部圆角

2.1 预览区局部圆角

.borderRadius({ topLeft: 12, topRight: 12 })

三、标签胶囊

3.1 @Builder 封装

@Builder Tag(text: string) {
  Text(text).fontSize(12).fontColor('#F5A623')
    .padding({ left: 12, right: 12, top: 4, bottom: 4 })
    .backgroundColor('#FFF3E0').borderRadius(12)
}

3.2 标签调用

Row({ space: 8 }) {
  this.Tag('古风')
  this.Tag('水墨')
  this.Tag('文艺')
}

四、底部固定按钮

4.1 按钮样式

Button('使用此模板')
  .fontSize(16).fontColor(Color.White).backgroundColor('#F5A623')
  .width('90%').height(48).borderRadius(24)
  .margin({ bottom: 20 })
  .onClick(() => { router.back() })

五、页面布局结构

Column (主容器，背景 #F5F5F5)
├─ Row (Header 导航栏，白色背景)
│   ├─ Text('‹') 返回
│   └─ Blank()
├─ Scroll (可滚动内容区) - layoutWeight(1)
│   └─ Column (space: 20, padding bottom: 100)
│       ├─ Column (模板预览区)
│       │   └─ Column (预览图) 100%×300px #FFF8F0
│       ├─ Column (模板信息区)
│       │   ├─ Text('水墨古风') 20px Bold
│       │   ├─ Text('使用量 1.2w') 13px
│       │   └─ Row (标签)
│       │       ├─ Tag('古风')
│       │       ├─ Tag('水墨')
│       │       └─ Tag('文艺')
│       └─ Column (模板介绍区)
│           ├─ Text('模板介绍') 16px Bold
│           └─ Text(描述) 14px 灰色
└─ Button('使用此模板') - 固定在底部

六、模板信息区

6.1 信息布局

Column({ space: 12 }) {
  Text('水墨古风').fontSize(20).fontWeight(FontWeight.Bold).fontColor('#1A1A1A')
  Row({ space: 16 }) {
    Text('使用量 1.2w').fontSize(13).fontColor('#999999')
  }
  Row({ space: 8 }) {
    this.Tag('古风')
    this.Tag('水墨')
    this.Tag('文艺')
  }
}
.width('100%').padding({ left: 16, right: 16, bottom: 20 })

七、模板介绍区

Column({ space: 8 }) {
  Text('模板介绍').fontSize(16).fontWeight(FontWeight.Bold).fontColor('#1A1A1A')
  Text('这是一款水墨古风风格的排版模板...').fontSize(14).fontColor('#666666').lineHeight(24)
}
.width('100%').padding({ left: 16, right: 16 })

八、完整代码文件索引

文件路径 说明
pages/TemplateDetailPage.ets 模板详情页面

九、本文涉及的所有 API

API/组件 用途 文档链接
@Builder UI 复用 Builder Guide
Button 按钮组件 Button
borderRadius() 圆角 BorderRadius
Scroll 可滚动容器 Scroll
router.back() 返回 Router
Blank() 空白填充 Blank

总结

本文详细讲解了 TemplateDetailPage 模板详情页的实现。核心知识点包括：局部圆角（borderRadius({topLeft, topRight}) 实现顶部圆角）、@Builder 标签胶囊（Tag(text) 封装橙色标签）、底部固定按钮（Button 在 Scroll 之外固定）。这些技术构成了完整的模板详情页面。下一篇我们将深入 FavoritesPage 收藏页的实现。

相关资源

  • FavoritesPage 收藏页

11. 本文总结

本文详细讲解了 TemplateDetailPage 模板详情页的完整实现。核心知识点包括：局部圆角（borderRadius({topLeft, topRight}) 实现顶部圆角）、@Builder 标签胶囊（Tag(text) 封装橙色文字标签）、底部固定按钮（Button 在 Scroll 外部固定，90% 宽度 + 圆角 24）。这些技术构成了完整的模板详情页面。下一篇我们将深入 FavoritesPage 收藏页的实现。

相关资源

附录：模板详情页的完整实现细节

1. 完整的页面布局结构

Column (主容器，背景 #F5F5F5)
├─ Row (Header 导航栏，白色背景)
│   ├─ Text('‹') 返回
│   └─ Blank()
├─ Scroll (可滚动内容区) - layoutWeight(1)
│   └─ Column (space: 20, padding bottom: 100)
│       ├─ Column (模板预览区)
│       │   └─ Column (预览图) 100%×300px #FFF8F0
│       │       .borderRadius({ topLeft: 12, topRight: 12 })
│       ├─ Column (模板信息区)
│       │   ├─ Text('水墨古风') 20px Bold
│       │   ├─ Text('使用量 1.2w') 13px
│       │   └─ Row (标签)
│       │       ├─ Tag('古风')
│       │       ├─ Tag('水墨')
│       │       └─ Tag('文艺')
│       └─ Column (模板介绍区)
│           ├─ Text('模板介绍') 16px Bold
│           └─ Text(描述) 14px 灰色 lineHeight 24
└─ Button('使用此模板') - 固定在底部
    .width('90%').height(48).borderRadius(24)

2. 标签胶囊的完整实现

@Builder Tag(text: string) {
  Text(text)
    .fontSize(12)
    .fontColor('#F5A623')
    .padding({ left: 12, right: 12, top: 4, bottom: 4 })
    .backgroundColor('#FFF3E0')
    .borderRadius(12)
}

3. 底部固定按钮的完整实现

Button('使用此模板')
  .fontSize(16)
  .fontColor(Color.White)
  .backgroundColor('#F5A623')
  .width('90%')
  .height(48)
  .borderRadius(24)
  .margin({ bottom: 20 })
  .onClick(() => {
    router.back()  // 返回上一页
  })

4. 模板信息区的完整实现

Column({ space: 12 }) {
  Text('水墨古风')
    .fontSize(20)
    .fontWeight(FontWeight.Bold)
    .fontColor('#1A1A1A')

  Row({ space: 16 }) {
    Text('使用量 1.2w')
      .fontSize(13)
      .fontColor('#999999')
  }

  Row({ space: 8 }) {
    this.Tag('古风')
    this.Tag('水墨')
    this.Tag('文艺')
  }
}
.width('100%')
.padding({ left: 16, right: 16, bottom: 20 })

5. 模板介绍区的完整实现

Column({ space: 8 }) {
  Text('模板介绍')
    .fontSize(16)
    .fontWeight(FontWeight.Bold)
    .fontColor('#1A1A1A')

  Text('这是一款水墨古风风格的排版模板，适合用于诗词、散文、读书笔记等内容的分享。')
    .fontSize(14)
    .fontColor('#666666')
    .lineHeight(24)
}
.width('100%')
.padding({ left: 16, right: 16 })

6. 局部圆角的完整实现

.borderRadius({
  topLeft: 12,
  topRight: 12,
  bottomLeft: 0,
  bottomRight: 0
})

7. 完整代码文件索引

文件路径 说明
pages/TemplateDetailPage.ets 模板详情页面

8. 本文涉及的所有 API

API/组件 用途 文档链接
@Builder UI 复用 Builder Guide
Button 按钮组件 Button
borderRadius() 圆角 BorderRadius
Scroll 可滚动容器 Scroll
router.back() 返回 Router
Blank() 空白填充 Blank

9. 实现要点总结

模板详情页的核心实现要点：

  1. 局部圆角：borderRadius({topLeft, topRight}) 仅顶部圆角
  2. 标签胶囊：@Builder 封装 Tag(text)，橙色文字 + 浅橙背景
  3. 底部按钮：在 Scroll 外部固定，90% 宽度 + 圆角 24
  4. 模板信息：名称、使用量、标签三行布局
  5. 模板介绍：标题 + 描述文字

下一步优化方向：

  • 集成真实模板数据（从接口获取）
  • 添加模板预览大图
  • 支持模板预览轮播

12. 总结

本文详细讲解了 TemplateDetailPage 模板详情页的完整实现。核心知识点包括：局部圆角（borderRadius({topLeft, topRight}) 实现顶部圆角）、@Builder 标签胶囊（Tag(text) 封装橙色文字标签）、底部固定按钮（Button 在 Scroll 外部固定，90% 宽度 + 圆角 24）。这些技术构成了完整的模板详情页面。

相关资源

  • FavoritesPage 收藏页

  • FavoritesPage 收藏页

  • TemplateSelectPage 模板选择页

  • FavoritesPage 收藏页

如果这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注🔔，你的支持是我持续创作的动力！

# 后端
Logo
开源鸿蒙跨平台开发者社区

开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。

更多推荐

cover

Windows下载、安装react-native-v0.86.0（附安装包React.Native.DevTools-windows-x86_64.tar.gz）

avatar 开源鸿蒙跨平台开发者社区
cover

【OpenHarmony/HarmonyOS】短信验证码云函数设计：参数校验、限流、安全与客户端边界

avatar 开源鸿蒙跨平台开发者社区
cover

macOS下载、安装react-native-v0.86.0（附安装包React.Native.DevTools-macos-aarch64.tar.gz）

avatar 开源鸿蒙跨平台开发者社区