温州微网站制作公司电话音乐网站模板下载

示例概述

Harmony Next开发通过bindSheet绑定半模态窗口

知识点

1. 半模态窗口
2. 父子组件传值

组件

LoginComponent

@Component
struct LoginComponent {// @Prop 父子单项绑定值@Prop message:string = ''// @Link 父子双向绑定值@Link userName:string@Link password:string@Link isShow: booleanbuild() {Column({ space: 10 }){Row(){Text(this.message).fontSize('25')}.margin({top: 50})Row(){TextInput({placeholder:'请输入用户名'}).onChange((value)=>{this.userName = value})}.width('90%')Row(){TextInput({ placeholder: '请输入密码' }).onChange((value)=>{this.password = value})}.width('90%')Row(){Button('登陆').onClick(()=>{this.isShow = false})}}.height('100%').width('100%')}
}

ModelTest

@Entry
@Component
struct ModelTest {@State message: string = '用户登录'@State isShow: boolean = false@State userName: string = ''@State password: string = ''@BuilderLoginComponentBuilder() {Column() {LoginComponent({message: this.message,userName: this.userName,password: this.password,isShow: this.isShow})}}build() {Column({ space: 10 }) {Row() {Text('用户名')Text(this.userName)}Row() {Text('密码')Text(this.password)}Button('打开半模态窗口').onClick(() => {this.isShow = true})Button('更新数据').onClick(() => {this.message = '用户登录更新'})}.height('100%').width('100%').bindSheet(this.isShow, this.LoginComponentBuilder, {height: 300,enableOutsideInteractive: true,})}
}

截图