鸿蒙基本UI控件(Text相关-含项目创建流程)

1.开发准备:(登录华为账号,下载开发工具:DevEco Studio)

开发-HarmonyOS NEXT鸿蒙应用开发平台-华为开发者联盟

2.创建项目,选择ArkUI项目:

3.找到文件: pages目录下的Index.ets

TypeScript 复制代码
@Entry
@Component
struct Index {
  @State message: string = '默认文案';
  @State input: string = '默认输入框内容';

  setText(value: string){ //将输入框的内容赋值到第一个TextView
    this.message = value;
    if (value =="") {
      this.message = '默认文案'
    }
  }

  build() {
    Row() { //水平居中
      Column() { //垂直居中
        Text(this.message)
          .fontSize($r('app.float.page_text_font_size'))
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
            this.message = 'Welcome';
          })
        Text('(点击恢复默认文案)')
          .fontSize('28fp')
          .fontWeight(FontWeight.Bold)
          .background($r('app.color.textBack'))
          .onClick(() => {
            this.message = '默认文案';
          })
          .id("Two")
        //多行输入框
        TextArea({
          text: this.input,
          placeholder: "请输入文本" })
          .fontSize(34)
          .onChange((value: string)  => {
            //将输入框的内容赋值到第一个TextView
            this.setText(value)
          })

      }
      .width('100%')
    }
    .height('100%')
  }
}

4、运行结果:

  • 输入框的内容会同步更新到第一个Text(包含初始的默认代码更新)
  • 点击粉色背景的Text会恢复第一个Text的文案为"默认文案"
相关推荐
黑臂麒麟1 天前
HarmonyOS鸿蒙实战应用7:随手账本——数据导出与分享
华为·app·arkts·鸿蒙
贾伟康1 天前
【天体运行模拟|11】HarmonyOS ArkTS 收藏与笔记实战:同步知识页和个人学习记录
harmonyos·arkts·preferences·多设备适配·arkdata
2501_919749031 天前
华为鸿蒙录音可视化APP—小羊声觉
华为·harmonyos·鸿蒙
大雷神1 天前
HarmonyOS AR Engine深度估计实战——把毫米距离画成实时热力图
华为·ar·harmonyos
GKxx1 天前
在 HarmonyOS 上给 QEMU 搭一个最小 aarch64 Linux guest(内核 + busybox initramfs)
linux·华为·qemu·harmonyos·鸿蒙·鸿蒙pc
黑臂麒麟1 天前
屏幕信息全解析:HarmonyOS的分辨率、刷新率、折叠状态一个API搞定
华为·arkts·鸿蒙
黑臂麒麟1 天前
HarmonyOS 网络连接诊断实战:检测网络状态、WiFi 切换、弱网监测一网打尽
网络·华为·arkts·鸿蒙
贾伟康1 天前
【天体运行模拟|08】HarmonyOS ArkTS 单位换算实战:处理天文尺度、科学计数与精度
harmonyos·arkts·arkui·数值精度·单位换算
lilian2331 天前
HarmonyOS 7 新特性(十三)|3DGS 模型加载、交互与性能回退
3d·交互·harmonyos
2501_919749031 天前
华为鸿蒙免费反诈APP—小羊反诈
华为·harmonyos·鸿蒙