通过上一节SVG的应用中，我们了解了如何使用SVG来绘制图形，但是在实际开发中，我们往往需要将一些功能封装成组件，以便于复用。

本节我们将介绍如何将封装组件，如果你在上一章节跟着实现了代码。

那么现在可以再次打开跟着本文一起操作。

1. 创建一个组件

每一个@Component装饰器下方的struct都是一个组件，在上图中的@Entry装饰器是用来表达这个组件是一个入口组件，也就是说这个组件是整个应用的入口。

我们的目标很简单，就是将上一节中的SVG图形封装成一个组件，然后在入口组件中引用这个组件。

所以我们可以新建一个文件夹，然后新建具体的组件文件，如下图所示：

我们在路径新建文件，`entry/src/main/ets/components/DiyPlayer.ets`

然后将之前`Index.etx`中的代码全数复制进来，删除@Entry装饰器。

最后回到`Index.etx`中引入这个组件，如下图所示：

我们将之前在`Index.ets`中的代码删除，然后引入了我们新建的组件。这让我们的代码看起来更加简洁，方便我们后面在这个页面添加更多数据操作相关的组件。

2. 数据的绑定

我们在上一节通过对`Polygon`与`Path`组件样式属性的修改，来实现了SVG图形的变化。

我么下一步将这些样式属性的值进行变量化，然后通过数据绑定的方式来实现图形的变化。

我们在`DiyPlayer.ets`中添加如下代码：

这样我们就将之前svg图形使用的两个颜色，都变成了变量`color1`与`color2`。

实际上，这俩个变量与上一节中的字符串数据变量是一样的。他们现在都成了这个组件的对外接口。

我们可以在`Index.ets`中引入这个组件，并且给这个组件传递数据，如下图所示：

我们可以看到即便我们在`DiyPlayer.ets`中给予了`color1`与`color2`具体的颜色，

但是我们在`Index.ets`这个父组件中，给子组件传递红绿两个颜色之后，就可以直接覆盖掉子组件的具体颜色的值。

这就是数据绑定的作用，我们可以进一步继续将`Index.etx`中的颜色数据再次变量化，然后通过数据绑定的方式传递给`DiyPlayer.ets`。

如下图所示：

很好，做到这一步。我们已经初步完成了数据的变量化与绑定。

下一步我们需要做的是，将这些数据绑定的值，通过用户的操作来进行修改。

3. 数据的响应

既然需要数据通过交互响应，我们准备三个按钮，通过按钮的点击事件用来改变颜色。

代码如下图所示：

我们修改了部分布局的代码，并且增加了三个按钮，分别用来改变两个颜色的值。

当你复现了以上代码，你可能发现，点击按钮之后，颜色并没有发生变化。

那是因为我们目前的变量是不可变的，我们需要给这些变量添加不同的响应装饰器。

第一步，将Index.ets中的颜色变量前添加@State装饰器，如下图所示：

光是这样，我们发现仍然无法修改。

第二步，我们还需要将子组件中的变量也添加适合父子组件通信的@Link装饰器，如下图所示：

这样我们就完成了我们需要的数据响应，当我们点击按钮之后，颜色就会发生变化。

4. 总结

通过这一节的学习，我们了解了如何将组件封装,如何通过数据绑定的方式来传递数据，以及如何通过数据响应的方式来修改数据。

在ArkUI中还有很多不同的响应装饰器以满意各种不同的需求，希望通过本文的学习，你可以对ArkUI有更深入的了解。

更多关于状态管理的内容，可以查看[ArkUI文档]

---

本文代码在代码仓Step2分支中