鸿蒙开发：组件属性样式复用原创

哈喽，嗯，咱们这个视频呢，主要是给大家，嗯，分享一下啊，在红目当中我们如何进行组建样式的一个复用，哎，我们先看一段代码啊，这是一段很简单很普通的代码啊，对吧，根部就是一个column，里面有4个哎它组件，大家可以看看这一段代码有什么问题没有。哎，想必大家对吧，很清晰就能发现对吧？这4个text组件呢？哎，除了内容不一样之外，对吧？它们所有的属性都是一样的，比如宽，哎，都有宽高。哎，背景还有编剧啊，虽然说哎这样写也能实现我们的。功能，但是呢。我们可以发现它这个代码是很冗余的，对吧，虽然说对吧，这样写对吧，它不影响功能，但是如果说我们的应用当中啊，重量重复哎这样的一些样式代码，其实我们已经失去了什么，失去了代码的一个简洁性，其实也极大的去增加了我们后续的一个呃代码的维护，那么为了解决这些问题呢，其实还是建议大家在平时的开发当中呢，能够把这些重复哎出现的这个样式呢，哎，可以抽取成一个公共的样式。

对吧，第一哎简化我们的代码，第二还便于哎日后的一个维护。行，嗯，那么我们如何去把这些公共的属性给抽取出来呢？哎，咱们就不得不不说到啊，鸿蒙当中呢，有一个哎装饰剂叫at特stars，我们通过这个装饰剂呢，哎，我们就可以把一些重复的。重复的一些样式呢，来抽取成一个方法来供组件，然后进行调用。还是这些代码，来咱们看看，呃，咱们使用那个at stars还是装饰器，咱们去抽取一下。

好，我们在。在这个页面里面，我们去写一下爱的。Stars.给它定义一个方法叫。A star.好。这样这这样一清景，这样的话，我们就把这个什么，哎使用这个艾的哎stars把这个装饰器，呃修饰成修饰给了这个test star这个方法，然后呢，我们就可以把一些公共的属性，哎放到这里来来，我们把这个属性。复制大战。然后我们直接就可以给这个组件怎么着设置它的一个。公共属性，OK.

那其他几个组件，哎，我们也给他去设置一下。大家可以看到同样的功能呢，哎，我们仅仅用几行代码就实现了，咱们大家可以比着咱们，呃，前面的代码可以对比的看一下对吧，哪一种写法，哎，更简洁对吧？相对来说怎么着@用这个@styles这个装置器之后，哎，我们的代码更加的清晰明了。对吧，那么同样的呃，这个at styles呢啊，你是可以呃修饰在我们的一个哎组件里面或者页面里面，当然了，你也可以把它给呃抽取成一个啊公共的也是可以的。也是支持的，比如说哎，我在这个上面。啊，定义一个什么function。啊，我们这个stars。定义到上面。

我们把这个。属性。剪切一下。啊，你这种使用方式呢，呃，也是可以的，就是说你可以把它写到，哎，我们的这个，哎，呃，UI里面也可以写到这个，哎，UI的外面，其实它俩的效果是一样的，嗯。嗯，但是呢，呃，虽然说哎，我们使用这个爱stas，呃把我们的这个公共的一个属性，哎给抽取了出来，对吧，但是呢，他有一个阻碍性的问题，什么问题呢？来。你比如说对吧，我能不能在这里面对吧，既然都是T它组件对吧，我想给设置统一的颜色行不行呢？哎，我们试一下，哎，发现怎么着。没有对吧，没有这个test的一个放卡这个属性，这是为什么呢？这里我们就需要去着重的去了解一下，就是at stars.

At stars这个装饰器，它所能修饰的是公有的。属性。对吧，它仅仅支持那些呃，常见的属性，不支持你单个组件自己的属性，你比如说。你比如说对吧，Text里面的设置啊，你的文字的。大小呀，文字的颜色呢，哎，这些呢都是不支持的，它只支持一些通用的属性和一些通用的一些事件。那么怎么样，哎，怎么样还让我们的这个组件里面有一些自身的组件的样式也能够抽取出去呢。这里我们就要说到另一个装饰体叫。Extend这个装饰器呢？哎，就可以来解决at特stas这个装饰器的一些限制性问题。

好，这个@斯sta这个组，这个装饰器应该没什么难的，咱们就把它给删掉了。删掉之后，我们把这些属性留着啊。你把它注掉。OK.好，我们使用什么extend？我们使用哎，Extend, 然后去实现我们的这个，嗯，装实体，哎，我我们发现怎么着。在我们这个当前类里面呢，当前这个UI里面，我们是没有办法拿到我们这个extend的这个装饰器的，由此可见，怎么呢，它是要定义在外部的，那我们就定义的外。

At ten.E.1D。他也是接受一个，呃，一个方法，我们把这个方法。还是这个test给他复制过来。好，里面所接收的就是你的组件对么？你想把哪些组件的样式给它抽取出来，你就哎划哪个组件，哎，我们这里是T组件对吧？哎，我们我们就把这个T组件整进去，OK, 那么同样的我们就可以在这里面去执行一些公共属性之外的自身的一些属性，比如说我们把这些属性拿过来。把这个删掉。

来打开。OK, 那么除了这些公有属性之外呢，哎，我们也可以怎么着去执行探测的自由的属性，比如说放大卡，对吧，我们给它设置为。一个black黑色。同样的对吧，同样的装饰器extend相对于刚刚所讲的at stairs那个装饰器对吧？它是有什么区别呢？咱们再总结一下。首先，第一。@space这个装饰镜呢，它仅仅适用于通用的属性，比如说宽高，背景边距对吧，还有内外边距等等，那么它是不支持某一个组件内的自身属性。比如text里面的放大color它就是不支持的，对吧？Ex extend呢，它相对来说呢，它扩展了，哎，At test这个装饰器对吧，不仅仅支持公有的常见的一些属性，也支持我们自身组件下的一些属性，对吧，但是呢，它必须我们传一个自身的一个组件，这就是这两者的一个。

一个区别。嗯。但是呢，其实我们在正常的时候呢，去写项目呢，啊，我们肯定会有怎么着，不仅仅说是有这一个页面，对吧，我们可能会有N个页面，比如说A页面，B页面，C页面，OK, 我们在这个A页面里面，我们定义了这个样式，比如说TT，那么我们在其他页面。对吧，怎么样去用到，能不能用到它呢。显然。是不能的。对吧，除非我们再去定义什么，哎，再去定义一个公共的类。

对吧，而且。并且怎么着，而且我们在这个当前里面，你比如说哎，我这个组件怎么着。我需要这个放大卡了。那么我这个组件呢，我不需要放大卡了。我们能不能在这里面去去做一个判断呢？比如说哎衣服什么什么什么什么对吧，我呃为出的时候，哎我要这个卡了，否则呢，我不要这个放到卡拉，能不能这样去运算呢。显然是不可以的，因为它仅仅是属性的设置，也就是说我们无论说你是使用啊。At stas这个这个装饰器，还是at特一个extend的这个装饰器，这两个装饰器都无法满足，怎么着对于条件的判断？也就是说我们这些属性呢，你要不要。对吧，要么不要以及或者说你是通过一些参数，比如说我们在这里面对吧，去传递，去传递我们的参数。

去整理参数，通过参数去改变啊，我们某个属性的一些样式，但是呢，我们这个属性。必须得存在的。对吧，所以说呢，无论说你是at stas还是at extend, 它都有哎这样的一个弊端，就是说第一它无法满足多个页面的一个。共同应用。第二，那么在我们设置哎属性的时候呢，无法进行条件判断。那么基于此呢，其实在在我们正常的，呃，日常的一个开发当中啊，其实我们更多的是怎么着。是需要我们多个页面对吧，共同使用。哎，这个这个样式，而且还可以在里面进行判断，对吧，我需我是否，哎需要设置这个样式。

这个属性。那么有没有这样一种方式呢？哎，有的啊，公模当中就给咱们提供了，嗯，一个对象叫什么啊，吃bou的modify，我们使用这个对象之使用这个对象呢？哎，我们就可以怎么着。哎，更加完善的去运用我们哎的属性，还有一些事件的一个设测能力，那么所以呢，在在在以后的开发当中呢，当然了，我也是比较推荐啊，优先去使用啊和制备的moifified的好，那么我们先看一下哎这个对象啊，我们如何去运用呢？首先呢，你要定义出来。对吧，你要定义出来你这个对象对吧，是基于哪个组件的属性，然后进行去设置的，OK.这里呢是text组件对吧，我们去定义一下。

来。Text.哎，磨的很。好让我们这个来自定义的这个。这个属性，然后怎么着去实现，哎，系统的一个attribute。莫。它是它接触了一个放行，这个泛行呢，它就是你要给哪一个组件的属性，然后进拓进行拓展，那么你需要传递哪一个组件，那么我们这里呢，是使用什么？哎，Text组件对吧。那么text组件它就有，它就有一个text attribute, 对吧。那么同样的基基本上基本上这个attribute modify, 它是支持我们。

大部分。甚至说。绝对的就绝部分的组件的属性，它这里都是去支持的，OK, 嗯，它这里面呢，嗯，有几种的一个实有有几种的一个啊一个实现方法，我们可以去看一下。还有什么apply？Normal attribute, 那么这个呢，它是一个组建的一个普通状态式，普通啊状态式的一个样式，还有一个什么a play see的attribute，那么这个呢，它就是一个什么组件按压状态的时的一个样式，当然了还有什么。还有apply focus.FOX的attribute对吧，它是组件获取，哎，焦点，焦点的时候还有一个什么disable，那么这个呢，主要是禁用，当然还有一个什么色类的选中，那么一般情况下呢，大家可以根据自己的对吧，呃，所常见的场景，然后去使用的使用这其中的方法，当然了，我们一般就是主要的普通状态，哎就可以了。

那这里是用什么来？No.OK.在这里呢，是不是，哎，我们就可以进行设置我们的。呃，组件的一些样式，比如说对吧，Instance你要设置什么宽。对吧，我们给它设置框对吧，还可以设设置什么设置高。还可以设置什么，哎，设置你的自身的组件，比如自身的组件样式，比如说放卡了。OK.

那么同样的。它也可以在里面进行啊，判断你是否哎需要哎这个组件，你比如说我我在这里去定义一个，呃。定一个那个变量吧，叫点看看。快。OK.当我们这个属性怎么着。不等于哎，Any范式，哎，我就当然它是个this啊，我this达到我们当前这个碳害的数结构，OK, 不等于它是怎么着啊，我就去设置设置它。OK, 那么这里呢，我们就可以是不需要。

这就是。Attribute modify哎，所带来的一个功能，对吧，你除了可以设置我们常见的一个啊属性之外呢，也可以怎么着通过条件判断。条件判断，看看我们是否哎需要设置这个属性，对吧，你你需要的时候你就设置，不需要的时候就可以不设置，所以说这就解决了我们，哎，对吧，Stars和一个extend所带来的一个弊端，OK, 那么我们定义好之后，如何让其他组件去使用呢？很简单，对吧，我们通过port把它抛出去。OK.那么我们，哎，在其他组件使用的时候，我们就可以进行使用了，比如说。给第一个组件设置吧，还有一个什么attribute。对吧，Mo的份，哎，我们就可以把我们的这个组件是吧，刚才那个商品的样式给他。

是这理解，OK, 那么它呢？那么它不仅仅它就解决了什么，哎，我们仅仅用于某一个页面的问题就可以使用，你无论说你有100个页面还是N个页面，对吧，我们都可以进行。通用和适用的。对吧，OK, 那么这就是我们今天所给大家讲的一个组件的一个样式的，呃，组件属性或者说是样式的一个复用啊，总共有三个哎，两个装饰器，还有一个对象，一个是啊呃，Stars.装饰器，还有一个end装饰器，以及啊刚才我们所讲的attribute modify这个对象。就是如果说我们接下来要实现多页面之间的组件的哎属性样式复用，那么我们就建议使用g bou的目的，反如果说仅仅是单个页面，那么啊，通用属性我们可以使用啊啊X stars如果说我们想要扩展哎组件的自由属性，哎，我们就可以使用哎，Extent OK.

嗯，那咱们这个视频先到这里，好感谢大家。