一. Flex布局与基础组件
Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。
1.先规定弹性布局的大小,设置为百分之百。
.width("100%")
.height("100%")
2.放一个宽度为10的背景颜色为黑色的外边框来可视化弹性布局的大小。
.border({width:10,color:"#000"})
3.设置其页面方向:
设置其为水平居中:
justifyContent:FlexAlign.Center
设置其为垂直居中:
alignItems:FlexAlign.Center
设置竖状排列:
direction:FlexDirection.Column
4.设计一个简陋的登录页面:
登录——》俩个输入框——》进入APP
Text("登录")
.fontSize(40)
.fontWeight(700)
TextInput()
.width("80%")
.height(40)
.border({width:1,color:"#000"})
TextInput()
.width("80%")
.height(40)
.border({width:1,color:"#000"})
Button("进入APP")
5.效果展示:
二.声明式UI-组件封装和父对子组件传值
2.1 组件封装
组件封装其实就是自己定义一个函数方法,可以把重复的代码进行重复利用。
- 先观察该项目的目录结构:
- 在MainAbility 目录下作为pages的同级目录中,新建目录common,在common目录下新建components文件。components文件里存放我们自定义的组件。在components文件里新建myinput.ets文件夹,里面写我们自定义的组件。
- 自定义该组件
先写一个装饰器,然后定义名称:
@Component
struct Myinput{
}
使用build方法:
build(){
TextInput()
.width("80%")
.height(40)
.border({width:1,color:"#000"})
}
里面的TextInput方法直接把之前的TextInput方法剪切过来。
导出该模块:
export default Myinput
4.然后在index.tes文件里先把自定义的组件引用进来:
import Myinput from "../common/componets/myinput"
5.把之前写的TextInput方法删掉,使用Myinput方法来调用。
Myinput()
Myinput()
6.观察效果和之前的一模一样。
优点:原子化,颗粒化,方便管理。
2.2 父对子组件传值
@Prop装饰器:自定义组件成员变量初始化
-
@Prop和@Link变量必须且仅通过构造函数参数进行初始化。
-
父组件的@Prop变量可以初始化子组件的常规变量或@Prop变量,但不能初始化子组件的@State或@Link变量。
1.我们这里需要@Prop装饰器
@Prop
2.在子组件里,引用到父组件传过来的值。
@Prop placeholder:string
3.在下面的TextInput引用该方法的值。
TextInput({placeholder:this.placeholder})
4.在父组件中,引用Myinput的时候就要给其赋值:
Myinput({placeholder:"输入用户名"})
Myinput({placeholder:"输入密码"})
5.查看效果:
三.父子组件相互绑定
3.1 远程模拟器
我们需要打开远程模拟器,在这之前需要绑定华为账号,才能登录获得2小时的远程真机模拟。
3.2 Link装饰器
@Link装饰的变量可以和父组件的@State变量建立双向数据绑定:
- 支持多种类型:@Link变量的值与@State变量的类型相同,即class、number、string、boolean或这些类型的数组;
- 私有:仅在组件内访问;
- 单个数据源:初始化@Link变量的父组件的变量必须是@State变量;
- 双向通信:子组件对@Link变量的更改将同步修改父组件的@State变量;
- 创建自定义组件时需要将变量的引用传递给@Link变量,在创建组件的新实例时,必须使用命名参数初始化所有@Link变量。@Link变量可以使用@State变量或@Link变量的引用进行初始化,@State变量可以通过
'$'
操作符创建引用。
说明: @Link变量不能在组件内部进行初始化。
使用@Link装饰器。
写一个监听onChange事件,用来获取到用户端输入的值,赋值给@Link inputvakue:string。
.onChange((value:string)=>{
this.inputvakue=value
})
在登录下面输出一行提示的用户名,应该是用户输入随时变化的。
Text(this.username)
.fontSize(12)
.fontWeight(500)
.width("100px")
重新编译上传,得到以下结果:上面的提示小文字与输入框进行了应该实时的双向绑定。