鸿蒙基本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 小时前
Flutter for OpenHarmony:dart_console 打造炫酷命令行界面,绘制表格、控制光标与进度条(CLI 交互库) 深度解析与鸿蒙适配指南
flutter·交互·harmonyos·绘制
加农炮手Jinx1 小时前
Flutter for OpenHarmony 实战:疯狂头像 App(三)— 复合动画与交互反馈 — 让 UI 跃动起来
flutter·ui·交互·harmonyos·鸿蒙
王码码20351 小时前
lutter for OpenHarmony 实战之基础组件:第六十二篇 SystemChannels — 探秘 Flutter 与系统交互的捷径
flutter·microsoft·交互·harmonyos
Bowen_J6 小时前
HarmonyOS 主流跨平台开发框架对比: ArkUI、Flutter、React Native、KMP、UniApp
flutter·react native·harmonyos
lili-felicity8 小时前
基础入门 React Native 鸿蒙跨平台开发:react-native-easy-toast三方库适配
react native·react.js·harmonyos
星空22238 小时前
【HarmonyOS】day38:React Native实战项目+输入格式化掩码Hook
react native·华为·harmonyos
星空22238 小时前
【HarmonyOS】day37:React Native实战项目+关键词高亮搜索Hook
react native·华为·harmonyos
松叶似针20 小时前
Flutter三方库适配OpenHarmony【secure_application】— pubspec.yaml 多平台配置与依赖管理
flutter·harmonyos
lbb 小魔仙20 小时前
【HarmonyOS】RN_of_HarmonyOS实战项目_富文本编辑器
华为·harmonyos
听麟1 天前
HarmonyOS 6.0+ 跨端会议助手APP开发实战:多设备接续与智能纪要全流程落地
分布式·深度学习·华为·区块链·wpf·harmonyos