1.布局初探Flex
Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容器组件，进而对容器内的其他元素进行弹性布局，例如：使三个元素在容器内水平居中，垂直等间隔分散。例如：如下的布局代码分别表示：（垂直排列，水平居中，垂直居中）
direction:FlexDirection.Column, justifyContent:FlexAlign.Center, alignItems:ItemAlign.Center
配合Text组件和Button组件，我们可以写一个基本的登录界面：
@Entry @Component struct Index { build() { Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center, direction: FlexDirection.Column }) { Text("登录") .fontSize(40) .fontWeight(700) TextInput() .width("80%") .height(40) TextInput() .width("80%") .height(40) Button("登录") } .width("100%") .height("100%") .border({ width: 10, color: "#000" }) } }
2.组件封装
我们可以将常用的组件进行自定义的封装，例如，我们想将输入框进行自定义的封装，以备后续进行调用：
自定义一个组件内容：（myInput.ets
/* 定义子组件的内容 */ @Component /* struct用于定义组件的名称 */ struct MyInput { build() { TextInput() .width("80%") .height(40) } } export default MyInput
在主页面引用它：
import MyInput from "../common/components/myInput" @Entry @Component struct Index { build() { Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center, direction: FlexDirection.Column }) { Text("登录") .fontSize(40) .fontWeight(700) MyInput() MyInput() Button("登录") } .width("100%") .height("100%") .border({ width: 10, color: "#000" }) } }
可以实现同上面一样的效果，但是组件的实现更加原子化：
我们也可以通过父组件向子组件传值，实现输入框的不同提示信息：
子组件新增Prop装饰器请求父组件传递的值：
@Component /* struct用于定义组件的名称 */ struct MyInput { @Prop placeholder:string build() { TextInput({ placeholder: this.placeholder }) .width("80%") .height(40) } } export default MyInput
父组件在调用子组件时，向子组件传值：
import MyInput from "../common/components/myInput" @Entry @Component struct Index { build() { Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center, direction: FlexDirection.Column }) { Text("登录") .fontSize(40) .fontWeight(700) MyInput({ placeholder:"输入用户名" }) MyInput({ placeholder:"输入密码" }) Button("登录") } .width("100%") .height("100%") .border({ width: 10, color: "#000" }) } }
效果如下：
3.设备管理器模拟
Previewer的页面无法进行实时的交互操作，所以我们要学会使用真机进行模拟
点击右上角如下选项：
选择华为P50，运行：
打开真机页面，运行：
模拟成功：
4.父子组件双向绑定
我们需要拿到用户输入的数据，以向后端发送一个登录请求，这就需要父子组件的双向绑定机制
要实现数据的双向绑定，我们先在父组件定义需要绑定的数据：
@State username: string = "" @State password: string = ""
在输入框中添加inputValue参数：
MyInput({ placeholder: "输入用户名", inputValue: $username }) MyInput({ placeholder: "输入密码", inputValue: $password })
子组件中进行链接：
@Link inputValue: string
子组件中设置onChange事件，用于绑定数据的修改：
TextInput({ placeholder: this.placeholder, text: this.inputValue }) .onChange((value:string) => { this.inputValue = value }) .width("80%") .height(40)
随后，为了展示一个好的效果，我们还需要在登陆字的下面显示一下我们监听到的输入的数据内容：
/* 展示输入框输入的数据 */ Text(this.username) .fontSize(40) .fontWeight(700) Text(this.password) .fontSize(40) .fontWeight(700)
整体代码如下： 🙌
index.ets： import MyInput from "../common/components/myInput" @Entry @Component struct Index { @State username: string = "" @State password: string = "" build() { Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center, direction: FlexDirection.Column }) { Text("登录") .fontSize(40) .fontWeight(700) /* 展示输入框输入的数据 */ Text(this.username) .fontSize(40) .fontWeight(700) Text(this.password) .fontSize(40) .fontWeight(700) MyInput({ placeholder: "输入用户名", inputValue: $username }) MyInput({ placeholder: "输入密码", inputValue: $password }) Button("登录") } .width("100%") .height("100%") .border({ width: 10, color: "#000" }) } }
myInput.ets：
@Component /* struct用于定义组件的名称 */ struct MyInput { @Link inputValue: string @Prop placeholder: string build() { TextInput({ placeholder: this.placeholder, text: this.inputValue }) .onChange((value:string) => { this.inputValue = value }) .width("80%") .height(40) } } export default MyInput
如下图，实现了父子组件数据的双向绑定：
