鸿蒙基本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的文案为"默认文案"
相关推荐
前端不太难19 小时前
从 App 到 Agent:鸿蒙应用形态正在改变
华为·harmonyos
大雷神20 小时前
HarmonyOS APP<玩转React>开源教程六:数据模型设计与实现
react.js·harmonyos
myNameGL20 小时前
DevEco Studio链接虚拟机报错解决方法
harmonyos
大雷神21 小时前
HarmonyOS APP<玩转React>开源教程五:项目架构设计
harmonyos
深海呐1 天前
鸿蒙 Video组件的基本使用(HarmonyOS-VideoView)
华为·harmonyos·harmonyos video·harmonyos 视频播放·harmonyos 播放器·harmonyos 播放视频
是稻香啊1 天前
HarmonyOS6 ArkUI 无障碍悬停事件(onAccessibilityHover)全面解析与实战演示
华为·harmonyos·harmonyos6
前端不太难1 天前
从小项目到大型鸿蒙 App 的架构变化
架构·状态模式·harmonyos
aqi001 天前
【送书活动】《鸿蒙HarmonyOS 6:应用开发从零基础到App上线》迎新送书啦
android·华为·harmonyos·鸿蒙
Oyster382891 天前
告别“盲调”与“重编”!我写了一个鸿蒙 ArkUI 纯端侧的可视化调试神器,正式开源!
harmonyos·arkui
盐焗西兰花1 天前
鸿蒙学习实战之路-Share Kit系列(7/17)-自定义分享面板操作区
linux·学习·harmonyos