前言

前面已经更新完布局、文本输入、按钮图片、状态管理、路由、Toggle、Tab 轮播相关博客，本文把剩下所有未讲解的示例整合到一篇，包含入门基础页面、单选组件、样式复用、综合卡片页面，适合有少量鸿蒙基础的新手一次性吃透剩余高频知识点。

一、入门基础页面

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 函数是页面渲染入口，所有组件写在内部。

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)
  }
}

3. second.ets

运行结果

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

@Entry
@Component
struct second {
  build() {
    Column(){
      Text("这是第二个测试页面")
        .fontSize(28)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

二、单选框组件 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. RadioGroup包裹多个 Radio 实现互斥单选；
  2. group 分组，不同分组互不干扰；
  3. onChange 监听切换，搭配 @State 记录选中值。

三、全局样式复用 StyleDemo1.ets

运行结果

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

@Entry
@Component
struct StyleDemo1 {
  build() {
    Column({space:20}){
      Text("标题一")
        .textCommon()
      Text("标题二")
        .textCommon()
      Text("标题三")
        .textCommon()
    }
    .width('100%')
    .height('100%')
    .padding(25)
  }
}
核心要点
  1. @Styles抽取重复样式封装函数；
  2. 页面任意组件可直接调用封装好的样式，统一页面视觉。

四、综合实战页面

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)
    }
  }
}

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. @Styles 封装样式仅支持通用组件属性，无法写业务逻辑；
  2. Radio 必须放在 RadioGroup 内，否则无法实现单选互斥；
  3. layoutWeight 均分宽度时，父容器必须设置固定 / 百分比宽度；
  4. 入门页面仅做基础语法练习，实际项目业务页面建议拆分组件。

练习顺序建议

  1. FirstArkPage → Index → second：熟悉页面基础结构；
  2. StyleDemo1：学会样式复用简化代码；
  3. RadioDemo：掌握表单单选交互；
  4. UserCardDemo、CourseOverviewPage：综合布局实战，对接真实业务。
# harmonyos # 华为 # 鸿蒙系统
Logo
人工智能6S服务平台

作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。

更多推荐

cover

鸿蒙开发：RelativeContainer相对布局组件实战——实现5个文本组件对齐

avatar 人工智能6S服务平台
cover

HarmonyOS7 主线程扛不住了怎么办？TaskPool 和 Worker 并行实战

avatar 人工智能6S服务平台
cover

2026年AI行业就业方向全解析：岗位暴涨12倍，这6大方向

avatar 人工智能6S服务平台