ArkTS 自定义组件
在ArkTS中如何将重复的代码抽离复用呢,我们可以通过组件化的思想来实现。
头部组件(自定义组件)
在项目的开发中,一般头部导航栏的内容都是复用的,我们可以通过组件的封装实现。
我们在右侧添加一个按钮组件,代替功能组件。?
在这里 我们使用了Blank组件。 这个组件可以默认将中间的内容填补,更加方便做成我们两端对齐的效果。
Row(){
Text('商品列表')
.fontSize(30)
.fontWeight(FontWeight.Bold)
Blank()
Button('按钮')
.width(60)
.height(35)
}
.width('100%')
.height(30)
.margin({bottom: 20})
?在ArkTS中封装组件有两种方式,一种是直接在当前ets文件中定义封装,第二种是做成一个组件文件。
当前文件定义
我们通过定义一个struct体来实现一个组件的复用。但是要注意我们的Text组件保证复用性应该是动态改变的,还有外边距,可以使用组件的时候单独设置。
@Component
struct Header{
private title: ResourceStr
build(){
Row(){
Text(this.title)
.fontSize(30)
.fontWeight(FontWeight.Bold)
Blank()
Button('按钮')
.width(60)
.height(35)
}
.width('100%')
.height(30)
}
}
页面内定义的方法,定义好直接在页面中使用组件的名字使用就行了。发现跟之前的效果是一样的。
当然也可以对组件使用组件的通用样式,比如说宽度高度,边距等。
定义为单独文件
1.创建目录、文件
我们在ets目录下创建一个component目录,下面创建一个Header文件
2.将代码剪贴过去
我们将组件的代码剪贴过去,但是要注意,组件化的思想,我们需要将组件导入导出,所以需要export 这个组件。 使用export 语法导出
3.导入组件使用
导入header文件 会发现效果跟之前文件内使用是一摸一样的
?卡片内封装(自定义构造函数)
我们在写代码的时候,为了实现功能,代码的复用性很差,写了很多重复的代码,我们可以将它优化一下,让代码变得更加直观一点。
在这里我们可以通过自定义组件的方式来完成。当然还有别的方法,比如使用自定义构造函数来实现。 他用来做一个独特页面的封装更加方便。
1.全局自定义构建函数
我们在页面组件外边定义的组件叫做全局自定义构建函数。
然后我们将重复的代码放进去。
我们发现他是报错的,因为在原本的代码循环结构中,有一个item,是没有代入的,所以我们需要代入item?
我们直接在原先的地方使用就可以了?,发现跟之前的效果是一样的。
代码结构清晰很多。
2.局部自定义构建函数
我们也可以将构建函数定义在内部,叫做局部自定义构建函数
我们将其放在组件末尾,但是注意,在使用局部自定义构建函数的时候,是不需要写function的?
这时候我们发现上面调用组件的地方报错了,因为我们没有使用this,使用组件内部的方法,需要使用this来调用。 最后的结果也跟我们之前的是一样的。
自定义公共样式函数
我们代码中,重复的公共样式太多了,比如说什么width,height什么的呀,我们可以将公共样式封装起来,可以减少代码量,让代码变得更加清晰。
// 公共样式封装
@Styles function fillScreen(){
.width('100%')
.height('100%')
.backgroundColor('#efefef')
.padding(20)
}
?我们直接使用.函数 来使用它就发现跟之前一样了。
我们的 公共样式组件也可以写在页面内部,就是将function去掉 就可以了。
自定义私有样式组件
?我们在开发的时候,发现有一些私有样式也产生了很多重复的代码
我们使用全局样式抽离的时候发现样式报错了。报错提示不是公共样式。 所以我们的全局样式封装,只能写所有组件的公共样式,不可以写私有样式。我们可以通过extend语法来实现。
注意,使用extends 封装私有样式只能写在全局,不可以写在局部。?
// 全局私有样式封装
@Extend(Text) function priceText(){
.fontSize(18)
.fontColor('#ff0000')
}
最后发现跟我们的样式也是一样的,我们可以通过直接修改封装好的组件样式来做到集体修改的效果,也便于我们的操作。?
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!