组件
本节将介绍如何添加一个组件,将该组件插入到页面中,从而感受组件的基本原理。
添加组件
进入开发面板,创建“临时文本”属性。并在“组件”面板中添加组件。
点击编辑器中的“+”号,添加组件
![](https://static.realm.host/uploads/images/2023/649051e80663ed935c9d67d9.jpeg)
![](https://static.realm.host/uploads/images/2023/649051e80663ed935c9d67d9.jpeg)
添加一个“文本”组件,并设置文本组件的“内容”参数,将“内容”设置为“临时文本”属性。
![](https://static.realm.host/uploads/images/2023/6490524f0663ed935c9d68f8.jpeg)
![](https://static.realm.host/uploads/images/2023/6490524f0663ed935c9d68f8.jpeg)
如果使用的是手机,需要先点击“扳手”按钮打开参数栏,再进行操作。
![](https://static.realm.host/uploads/images/2023/64905334af79a8af1a93947e.jpeg)
再添加一个“按钮”组件,设置“点击动作”参数。当用户点击按钮时,会执行这个动作。
![](https://static.realm.host/uploads/images/2023/64905385af79a8af1a93ba4d.jpeg)
![](https://static.realm.host/uploads/images/2023/649053e9b6545b447ed5c784.jpeg)
![](https://static.realm.host/uploads/images/2023/6490542bb6545b447ed5e199.jpeg)
然后,添加一个“块”组件,将两个按钮放入新的“块”组件中。如图,设置该组件的“排列方向”为“水平”,排列间距为 4。
现在,两个按钮会并排摆放,并且中间间隔4个单位的长度。
![](https://static.realm.host/uploads/images/2023/6490552e0663ed935ca003ed.jpeg)
![](https://static.realm.host/uploads/images/2023/64905557e352b5f7b615ce59.jpeg)
让组件显示在页面中
组件已经添加完成。现在,我们要让页面显示该组件。在“页面”面板添加一个页面,类型选择“普通”,如图:
![](https://static.realm.host/uploads/images/2023/649055e3e352b5f7b615e3a0.jpeg)
![](https://static.realm.host/uploads/images/2023/649056040663ed935ca03f78.jpeg)
![](https://static.realm.host/uploads/images/2023/6490564d0663ed935ca0504d.jpeg)
从原理上看,当用户点击其中一个按钮后,就会执行这个按钮的动作。这时,整个页面会被刷新,文本组件的值变成了“A”或“B”。
总结
这就是组件的原理。点击一个按钮,让界面得到刷新,并产生一个新的界面。在这个界面上,每个组件会根据自己的参数进行显示。