鸿蒙基本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的文案为"默认文案"
相关推荐
2501_919749033 小时前
华为鸿蒙免费日记本—小羊日记
华为·harmonyos·鸿蒙
m0_738185823 小时前
Flutter 鸿蒙化实战:rive 适配 OpenHarmony,Rive 动画
flutter·华为·harmonyos·鸿蒙
zd2005723 小时前
我给x86版本开源鸿蒙系统装上了 Homebrew,还塞了整个 Node 和 opencode 进去
华为·开源·harmonyos
song5013 小时前
React Native for OpenHarmony 实战:三方库 react-native-popup-menu 的鸿蒙化适配指南
css·深度学习·react native·react.js·transformer·harmonyos
打工仔折腾 AI3 小时前
鸿蒙版ToDesk远控实测:蓝牙键鼠、双模式鼠标与跨端剪贴板怎么用
后端·python·华为·性能优化·计算机外设·harmonyos·ai agent 实战
特立独行的猫a4 小时前
仓颉语言实现强大的Modbus调试工具Modbus Poll:cj-tauri项目介绍与实战
harmonyos·tauri·modbus·仓颉·modbus poll
m0_7381858215 小时前
Flutter 鸿蒙化实战:screen_protector 适配 OpenHarmony,防截屏/防泄露
flutter·华为·harmonyos·鸿蒙
CV工程师丁Sir16 小时前
# ArkWeb 手记 03|本地资源加载与 $rawfile 路径踩坑
harmonyos
OH_TPC1 天前
HarmonyOS APP开发---"菜谱汇"美食菜谱App,需要用到这个库
harmonyos