前言

前面已经更新完布局、文本输入、按钮图片、状态管理、路由、Toggle、Tab 轮播相关博客，本文把剩余未讲解的基础示例整合为一篇，包含空白入门页面、基础首页、二级跳转页、单选表单组件、样式复用、用户卡片、课程综合页面，适合有少量鸿蒙 ArkTS 基础的新手，一次性吃透剩余高频基础写法。 本文所有代码均配套可直接运行的完整示例，知识点讲解严格对应代码实现，不出现和代码脱节的理论描述。

一、入门基础页面

1. FirstArkPage.ets

运行结果

全屏纵向排列基础文本，展示 ArkTS 最简易页面结构，无复杂样式，仅用于熟悉 @Component、@Entry 基础语法。

import sendableContextManager from '@ohos.app.ability.sendableContextManager';

@Entry
@Component
struct  Index{
  build() {
    Column(){

    }
    .width('100%')
    .height('100%')
    .backgroundColor(0xF5F5F5)

  }
}
核心要点
  1. @Entry：标记当前自定义组件为独立页面入口，可单独运行；
  2. @Component：标识当前结构体为自定义组件，所有页面、封装组件都必须添加；
  3. build()：组件唯一渲染入口，页面所有 UI 组件、布局容器都必须写在该函数内部；
  4. Column 纵向布局铺满全屏，设置统一背景色，是鸿蒙页面最通用外层容器；

2. Index.ets

运行结果

页面顶部展示标题，下方预留空白区域，作为项目默认首页模板，可自由拓展功能按钮。

@Entry
@Component
struct Index {
  build() {
    Column({space:40}){
      Text("首页")
        .fontSize(36)
        .fontWeight(FontWeight.Bold)
    }
    .width('100%')
    .height('100%')
    .padding(25)
    .justifyContent(FlexAlign.Start)
  }
}
  • Column 通过 space 参数快速设置内部组件垂直间距；
  • justifyContent(FlexAlign.Start) 控制容器内元素靠顶部对齐；
  • padding() 统一设置页面四周留白，避免内容紧贴屏幕边缘；
  • Text 组件通过 fontSize、fontWeight 快速实现标题加粗放大效果。

3. second.ets

运行结果

极简二级跳转页面，仅展示一段提示文字，用于页面路由跳转测试。

@Entry
@Component
struct second {
  build() {
    Column(){
      Text("这是第二个测试页面")
        .fontSize(28)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}
  • 外层 Column 设置 justifyContent(FlexAlign.Center)，实现内部文字垂直水平居中；
  • 页面结构极简，可搭配 router 跳转代码，实现首页→二级页的路由演示；

二、单选框组件 RadioDemo.ets

运行结果

页面垂直居中两组单选选项，每组单选框绑定不同文本，选中对应选项文字同步标记选中状态，适合性别、身份、分类选择表单场景。

@Entry
@Component
struct RadioDmeo {
  build() {
    RelativeContainer(){
      Text('填写个人信息')
        .id('title')
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
        .width('100%')

    Column({space:30}) {
      Stack() {
        Text('姓名')
          .fontSize(28)
          .width(100)
        TextInput({ placeholder: "" })
          .width(220)
          .height(50)
          .backgroundColor(0xf5f5f5)
          .fontSize(20)
          .borderRadius(10)
      }
      Row() {
        Text('性别：')
          .fontSize(28)
          .width(100)
        Radio({ value: 'boy', group: 'sex' })
          .height(30)
          .width(30)
          .checked(true)
        Text('男')
          .fontSize(16)
          .margin({ right: 50 })
        Radio({ value: 'gril', group: 'sex' })
          .height(30)
          .width(30)
        Text('女')
          .fontSize(16)
      }.width(320)
      Row() {
        Text('年龄')
          .fontSize(30)
          .width(100)
        TextInput({ placeholder: "" })
          .width(220)
          .height(50)
          .backgroundColor(0xf5f5f5)
          .fontSize(20)
          .borderRadius(10)
      }
      Row() {
        Text('学历')
          .fontSize(28)
          .width(100)
        Radio({ value: 'benke', group: 'school' })
          .height(30)
          .width(30)
          .checked(true)
        Text('本科')
          .fontSize(16)
          .margin({ right: 50 })
        Radio({ value: 'zhuanke', group: 'school' })
          .height(30)
          .width(30)
        Text('专科')
          .fontSize(16)
      }.width(320)
      Button('提交')
        .width(180)
        .height(50)
        .fontSize(26)
        .backgroundColor(Color.Blue)
        .fontColor(Color.White)
        .borderRadius(8)
      }
      .width('100%')
      .height('100%')

  }
}
}
核心要点

  1. group 分组：相同 group 名称为一组单选，不同组互不影响，可以同时选性别和学历。

  2. 本案例为静态展示表单，适合新手练习布局，暂时不用写复杂的状态监听。

  3. Row 实现左右文字+输入框排版，是表单页面最常用布局方式。

  4. RelativeContainer 作为外层大容器。

三、全局样式复用 StyleDemo1.ets

运行结果

页面多段文本复用同一套字体、边距样式，无需重复写属性，代码更简洁统一。

@Entry
@Component
struct StyleDemo1 {
  build() {
    Column({space:20}){
      Text("标题一")
        .textCommon()
      Text("标题二")
        .textCommon()
      Text("标题三")
        .textCommon()
    }
    .width('100%')
    .height('100%')
    .padding(25)
  }
}
核心要点

  1. @Styles 是鸿蒙基础样式封装方式，作用是统一样式、简化代码。

四、综合实战页面

1. UserCardDemo.ets 用户信息卡片

运行结果

居中展示完整用户卡片，横向排列头像、昵称、身份，底部双平分功能按钮，是个人中心、列表通用卡片模板。

@Entry
@Component
struct UserCardDemo{
  build() {
    Column({space:20}){
      Text("个人简历")
        .fontSize(30)
        .fontWeight(FontWeight.Bolder)

      Row({space:20}){
        Image($r('app.media.banner0'))
          .width('50%')

        Column(){
          Text('张三')
            .width('100%')
            .fontSize(30)
          Text('鸿蒙应用开发')
            .width('100%')
            .fontSize(18)
        }
        .width('40%')
      }
      .height(100)
    }
  }
}

  • Column + Row 组合布局，实现图文并排的卡片效果。

  • 掌握资源图片加载方式 $r('app.media.xxx')。

2. CourseOverviewPage.ets 课程首页综合页面

运行结果

页面从上至下展示页面标题、课程简介文本、多行功能按钮，整体居中，适配学生系统课程首页业务场景。

// Index.ets
@Entry
@Component
struct CourseOverviewPage {
  build() {
    // 页面整体：Column（垂直线性布局）
    Column({ space: 30 }) {
      // 1. 标题区域
      this.TitleSection()

      // 2. 用户信息区域（头像+姓名+学号）
      this.UserInfoSection()

      // 3. 课程信息标题
      Text('下面是本学期的课程信息:')
        .fontSize(28)
        .fontWeight(FontWeight.Bold)
        .fontColor('#333333')

      // 4. 课程按钮网格（2行3列）
      this.CourseGridSection()
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#FFFFE0') // 浅黄色背景
    .padding(20)
    .justifyContent(FlexAlign.Center)
  }

  // 标题区域
  @Builder
  TitleSection() {
    Column({ space: 10 }) {
      Text('计算机应用技术')
        .fontSize(36)
        .fontWeight(FontWeight.Bold)
        .fontColor('#222222')
      Text('2024-03班课程概况')
        .fontSize(36)
        .fontWeight(FontWeight.Bold)
        .fontColor('#222222')
    }
    .alignItems(HorizontalAlign.Center)
  }

  // 用户信息区域（头像+姓名学号）
  @Builder
  UserInfoSection() {
    Row({ space: 20 }) {
      // 头像+开发者角标（层叠布局）
      Stack({ alignContent: Alignment.Center }) {
        // 灰色头像背景
        Rect()
          .width(120)
          .height(120)
          .fill(Color.Gray)
          .corderRadius(20)

        // 红色开发者角标
        Text('开发者')
          .fontSize(24)
          .fontColor(Color.White)
          .backgroundColor(Color.Red)
          .padding({ left: 10, right: 10, top: 6, bottom: 6 })
          .borderRadius(8)
      }

      // 姓名+学号（垂直线性布局）
      Column({ space: 8 }) {
        Text('张三')
          .fontSize(32)
          .fontWeight(FontWeight.Medium)
          .fontColor('#333333')
        Text('2083052151')
          .fontSize(26)
          .fontColor('#666666')
      }
      .alignItems(HorizontalAlign.Start)
      .justifyContent(FlexAlign.Center)
    }
    .width('100%')
    .justifyContent(FlexAlign.Center)
  }

  // 课程按钮网格（2行3列）
  @Builder
  CourseGridSection() {
    Column({ space: 16 }) {
      // 第一行课程按钮
      Row({ space: 16 }) {
        this.CourseButton('鸿蒙开发')
        this.CourseButton('体育3')
        this.CourseButton('数据恢复')
      }
      .width('100%')
      .justifyContent(FlexAlign.Center)

      // 第二行课程按钮
      Row({ space: 16 }) {
        this.CourseButton('MySQL')
        this.CourseButton('操作系统安全')
        this.CourseButton('网络运维')
      }
      .width('100%')
      .justifyContent(FlexAlign.Center)
    }
  }

  // 课程按钮组件（通用样式）
  @Builder
  CourseButton(text: string) {
    Button(text)
      .width(120)
      .height(80)
      .fontSize(20)
      .fontColor(Color.White)
      .backgroundColor(Color.Gray)
      .borderRadius(20)
      .stateEffect(true) // 点击反馈效果
  }
}

新手避坑总结

  1. 页面必须写全 @Entry + @Component + build()，缺一无法正常渲染。

  2. 样式复用 @Styles 只能写UI样式，不能写逻辑代码。

  3. Radio 单选靠 group 分组区分不同选项，适合做简单表单。

  4. 复杂页面一定要用 @Builder 拆分，否则代码混乱、难以维护。

  5. 单词、属性拼写错误是新手最多的报错原因（如 corderRadius、gril）。

  6. 图片资源必须提前放入 media 文件夹，否则运行报错。

# harmonyos # 华为 # 鸿蒙系统
Logo
HarmonyOS开发者社区

讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐

cover

HarmonyOS 应用开发《掌上英语》第67篇: Release 构建——从混淆到 HAR 发布

avatar HarmonyOS开发者社区
cover

HarmonyOS 应用开发《掌上英语》第69篇:从备考模板到英语学习——代码复用与改造实战案例

avatar HarmonyOS开发者社区
cover

HarmonyOS 应用开发《掌上英语》第69篇:从备考模板到英语学习——代码复用与改造实战案例

avatar HarmonyOS开发者社区