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的文案为"默认文案"
