鸿蒙基本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的文案为"默认文案"
相关推荐
胡琦博客15 分钟前
HarmonyOS 智能工具箱(三):语音交互工具
交互·xcode·harmonyos
国服第二切图仔25 分钟前
HarmonyOS7新特性之沉浸光感:新一代材质渲染技术解析
harmonyos
●VON28 分钟前
鸿蒙 PC Markdown 编辑器链接补全与离线校验:中文路径、标题锚点与授权边界
华为·编辑器·harmonyos·鸿蒙
kiros_wang1 小时前
鸿蒙性能优化全维度实战(启动速度 + 内存治理 + 帧率稳定 + 包体积瘦身)
华为·性能优化·harmonyos
●VON1 小时前
鸿蒙 PC Markdown 编辑器快速打开:模糊排序、最近权重与纯键盘路径
华为·编辑器·计算机外设·harmonyos·鸿蒙
●VON1 小时前
鸿蒙 PC Markdown 编辑器命令面板:把桌面高频操作收束到一个入口
服务器·华为·编辑器·harmonyos·鸿蒙
爱写代码的森1 小时前
鸿蒙三方库 | harmony-utils之FileUtil文件拷贝与移动详解
华为·harmonyos·鸿蒙·huawei
xd1855785551 小时前
落枕缓解指南 —— 鸿蒙AI智能助手开发全流程解析
人工智能·华为·harmonyos·鸿蒙
世人万千丶9 小时前
鸿蒙Flutter Flex多子组件权重分配
学习·flutter·华为·harmonyos·鸿蒙
拥抱太阳061614 小时前
HarmonyOS 应用开发《掌上英语》第23篇-图标与颜色系统构建可主题化视觉体系
华为·harmonyos