【iVX 初级工程师培训教程 10篇文拿证】02 数值绑定及自适应网站制作
目錄
【iVX 初級(jí)工程師培訓(xùn)教程 10篇文拿證】01 了解 iVX 完成新年賀卡
【iVX 初級(jí)工程師培訓(xùn)教程 10篇文拿證】02 數(shù)值綁定及自適應(yīng)網(wǎng)站制作
【iVX 初級(jí)工程師培訓(xùn)教程 10篇文拿證】03 事件及猜數(shù)字小游戲
【iVX 初級(jí)工程師培訓(xùn)教程 10篇文拿證】04 畫布及我和 iVX 合照
【iVX 初級(jí)工程師培訓(xùn)教程 10篇文拿證】05 畫布及飛機(jī)大戰(zhàn)游戲制作
【iVX 初級(jí)工程師培訓(xùn)教程 10篇文拿證】06 數(shù)據(jù)庫及服務(wù)
【iVX 初級(jí)工程師培訓(xùn)教程 10篇文拿證】07 08 新聞頁制作
【iVX 初級(jí)工程師培訓(xùn)教程 10篇文拿證】09 聊天室制作
高分提升請(qǐng)查看專欄：
iVX入門到精通
大話 IVX 實(shí)戰(zhàn)到精通
一、數(shù)據(jù)綁定
數(shù)據(jù)綁定在 iVX 中指某一個(gè)組件的屬性值綁定于其他組件，例如以下示例中，點(diǎn)擊這個(gè)文本，將會(huì)在其屬性面板中看見一個(gè)鎖鏈按鈕：
此鎖鏈就表示當(dāng)前對(duì)應(yīng)的屬性值可以與其他值進(jìn)行綁定。
首先，咱們可以點(diǎn)擊文本變量組件，創(chuàng)建一個(gè)存儲(chǔ)文本的變量：
接著，點(diǎn)擊文本變量，可以在其屬性中設(shè)置當(dāng)前文本變量的值，當(dāng)然這個(gè)文本變量也可以綁定于其他值：
接著，咱們點(diǎn)擊文本，點(diǎn)擊其數(shù)據(jù)綁定按鈕：
我們發(fā)現(xiàn)，此時(shí)數(shù)值前面有一個(gè)箭頭，該箭頭可以從對(duì)象樹中選擇某一個(gè)組件的值：
選擇值之后，咱們點(diǎn)擊預(yù)覽即可發(fā)現(xiàn)文本的值自動(dòng)切換成了文本變量的值：
二、相對(duì)定位
在剛剛的演示之中，咱們使用的項(xiàng)目為 相對(duì)定位 應(yīng)用，咱們可以發(fā)現(xiàn)，在絕對(duì)定位中左側(cè)組件欄的顏色為藍(lán)色，在相對(duì)定位應(yīng)用中咱們組件欄的顏色為白色，這是亮點(diǎn)較為直觀的不同項(xiàng)目的IDE界面區(qū)別。
相對(duì)定位是根據(jù)元素的相對(duì)位置進(jìn)行定位的，咱們?cè)谙鄬?duì)定位中添加組件并不需要在界面中進(jìn)行繪制，只需要選擇對(duì)象樹中的某一個(gè)組件（頁面、行列），再選擇需要添加的組件，那么即可直接點(diǎn)擊需要添加的組件進(jìn)行添加。
接下來咱們需要做一個(gè)PC端的可適應(yīng)網(wǎng)站，那么此時(shí)需要在對(duì)象樹之上的屏幕大小區(qū)域更改其頁面大小：
2.1 行列
接著，在做自適應(yīng)網(wǎng)站前，咱們需要了解行和列的概念，在一個(gè)網(wǎng)站之中，元素要么是豎著排列，要么是橫著排列，以下圖片所顯示的紅色框中元素為行，藍(lán)色則為豎排為列：
在 iVX 中可以通過行和列進(jìn)行對(duì)應(yīng)內(nèi)容元素的位置排版。咱們?cè)陧?xiàng)目之中添加一個(gè)行，那么點(diǎn)擊行在其內(nèi)部添加某些組件，如文本組件，將會(huì)發(fā)現(xiàn)文本會(huì)自動(dòng)橫排顯示，并且在文本大于一行時(shí)，其文本將會(huì)自動(dòng)換行：
若添加內(nèi)容到列之中，那么這個(gè)列中的元素將會(huì)豎排顯示：
并且在此處需要注意，行和列都是容器，他們可以相互嵌套，則：行中可以包含多個(gè)行，列中可以包含多個(gè)列，并且行和列可以互相包含于其中。
三、簡單站點(diǎn)制作
現(xiàn)在使用 iVX 仿 CSDN 首頁，并且使其首頁可以自適應(yīng)屏幕大小。
首先咱們?cè)陧撁嬷刑砑右粋€(gè)行，并且設(shè)置行的高度為包裹：
包裹表示為當(dāng)前行中的元素高度有多高，那么該行的高度就有多高，若沒有元素，那么該行則無法從視覺上進(jìn)行呈現(xiàn)。
接著在行中設(shè)置背景色為透明，設(shè)置行的水平對(duì)齊為居中：
接著在行1中添加一個(gè)行，設(shè)置寬度為 80%，80% 表示當(dāng)前行占據(jù)父容器寬度的 80%：
同樣給這個(gè)行設(shè)置高度為包裹，并且設(shè)置其背景色為透明（我在此處對(duì)行重命名為“內(nèi)主”方便進(jìn)行辨認(rèn)）：
接著在內(nèi)主行中創(chuàng)建一個(gè)行，命名為標(biāo)題，并且設(shè)置高度為包裹、背景色為透明，這個(gè)行將會(huì)用作標(biāo)題的制作：
接著，在這個(gè)標(biāo)題之中添加一個(gè)文本，并且將其文本內(nèi)容設(shè)置為“首頁”：
我們可以發(fā)現(xiàn)該文本自動(dòng)的距離左側(cè)有一段距離，這是因?yàn)楦溉萜餍袑挾戎挥?80%，最外部的行設(shè)置了水平居中，自然其內(nèi)部的行將會(huì)跟隨父容器進(jìn)行位置上的變動(dòng)。我們發(fā)現(xiàn)這個(gè)文本在這個(gè)行中太過于靠近頂部，此時(shí)咱們只需要將標(biāo)題行設(shè)置內(nèi)外邊距即可；外邊距可以分外上外邊距、下外邊距、左外邊距、右外邊距，這些外邊距分別表示當(dāng)前組件與對(duì)應(yīng)方向的元素的距離，設(shè)置為 10 則表示距離該方向元素 10 個(gè)單位；外邊距容易造成布局的顯示錯(cuò)亂，咱們這里使用內(nèi)邊距實(shí)現(xiàn)這個(gè)文本與頂部的距離，只需要點(diǎn)擊標(biāo)題行，設(shè)置標(biāo)題行的上內(nèi)邊距，那么這個(gè)行將會(huì)有一個(gè)透明的厚度存在，那么此時(shí)這個(gè)文本自然的與頂部有了距離：
由于字體過大不是很美觀，設(shè)置字體的大小后顯示結(jié)果如下：
接著在這個(gè)行中復(fù)制這一個(gè)文本，并且粘貼在標(biāo)題行中：
此時(shí)這兩個(gè)文本將會(huì)緊緊相挨，為了使其留有一定間隙，咱們將博客這個(gè)文本設(shè)置其左外邊距為6：
此時(shí)頁面將會(huì)更加美觀：
接著復(fù)制多個(gè)文本到標(biāo)題行中更改文本內(nèi)容，將會(huì)看到以下效果：
接著咱們創(chuàng)建一個(gè)行命名為廣告，并且在其內(nèi)部添加一個(gè)圖片組件，上傳圖片：
我們發(fā)現(xiàn)這個(gè)圖片超出了屏幕區(qū)域，這是因?yàn)檫@個(gè)圖片沒設(shè)置其屬性，咱們需要設(shè)置這個(gè)圖片的屬性寬度為100%，那么將會(huì)暫居包裹他的父容器的最大寬度：
設(shè)置完畢之后頁面將會(huì)變得好看許多：
咱們接著創(chuàng)建 1個(gè)行命名為內(nèi)容，并且在這個(gè)內(nèi)容行里面創(chuàng)建3個(gè)列，并且這些行和列的背景色都設(shè)置為透明，內(nèi)容行設(shè)置高度為包裹，其內(nèi)部的3個(gè)內(nèi)容列設(shè)置寬度為33%，使3個(gè)列能夠占據(jù)一行：
此時(shí)我在頁面中創(chuàng)建了多個(gè)文本：
在頁面中顯示如下：
具體美不美觀這里不做要求，咱們可以看到這些文本自動(dòng)換行了，那有什么辦法讓他們不進(jìn)行自動(dòng)換行嗎？答案是肯定可以的，還需要在文本屬性中把換行關(guān)閉即可：
可是關(guān)閉之后查看內(nèi)容時(shí)發(fā)現(xiàn)該文本內(nèi)容超出了最大寬度：
此時(shí)只需要給予這個(gè)文本一個(gè)寬度為100%即可：
設(shè)置后將會(huì)自動(dòng)省略超出內(nèi)容：
四、for 循環(huán)組件
通過剛剛的內(nèi)容編排，咱們發(fā)現(xiàn)直接復(fù)制文本太過繁瑣有什么功能可以快速的完成內(nèi)容的顯示嗎？
咱們可以使用 for 循環(huán)容器，但在使用 for 循環(huán)容器之前咱們得學(xué)習(xí)一個(gè)變量組件——數(shù)組組件。
4.1 數(shù)組組件
點(diǎn)擊頁面，在頁面中創(chuàng)建3個(gè)數(shù)組容器，并且進(jìn)行重命名：
數(shù)組容器可以添加多個(gè)值，可以在其中創(chuàng)建多種類型的內(nèi)容：
我們?yōu)槊總€(gè)內(nèi)容數(shù)組都添加多個(gè)值：
4.2 for 循環(huán)生成內(nèi)容
接下來只需要使用 for 循環(huán)組件就可以生成多個(gè)內(nèi)容了。
每個(gè)內(nèi)容列此時(shí)只需要留下一個(gè)文本即可，其他文本刪除：
接著，在這些內(nèi)容列中添加一個(gè)for循環(huán)組件，并且將文本放到 for 循環(huán)組件之內(nèi)：
接著點(diǎn)擊任一 for 循環(huán)組件，可以看到 for 循環(huán)組件屬性中有一個(gè)數(shù)據(jù)來源，點(diǎn)擊箭頭，選擇對(duì)應(yīng)的 數(shù)組的值 作為其數(shù)據(jù)來源：
依次對(duì)3個(gè)for循環(huán)創(chuàng)建進(jìn)行操作，隨后在文本之中點(diǎn)擊數(shù)據(jù)綁定按鈕：
此時(shí)發(fā)現(xiàn)這些文本的綁定值中有一個(gè)當(dāng)前數(shù)據(jù)值，該值則是指循環(huán)創(chuàng)建時(shí)自動(dòng)遍歷數(shù)組元素的值，循環(huán)將會(huì)從數(shù)組的第一個(gè)值開始取值，重復(fù)不停，若文本的值設(shè)置為當(dāng)前的值，那么循環(huán)創(chuàng)建將會(huì)自動(dòng)創(chuàng)建一個(gè)文本以及綁定對(duì)應(yīng)的值給到文本，此時(shí)所有的內(nèi)容都將會(huì)以文本進(jìn)行顯示。
設(shè)置完文本數(shù)據(jù)為當(dāng)前數(shù)據(jù)后，預(yù)覽后發(fā)現(xiàn)文本值自動(dòng)出現(xiàn)：
五、自適應(yīng)網(wǎng)站制作
接下來進(jìn)行最后的一個(gè)步驟，為這個(gè)頁面添加自適應(yīng)功能。
我們先判斷該頁面哪一個(gè)區(qū)域需要自適應(yīng)，咱們可以得知，就是3個(gè)內(nèi)容列，當(dāng)頁面變化為小屏幕時(shí)只需要更改其父容器的寬度為100%即可完成自適應(yīng)。
實(shí)現(xiàn)很簡單，咱們同時(shí)選擇 3 個(gè)自適應(yīng)的列，在屬性中找到環(huán)境寬打開：
設(shè)置不同屏幕下的不同寬度，例如設(shè)置小屏PC寬為100%，那么意思則是在小屏是改列會(huì)直接占據(jù)100%大小寬度，我在這里同時(shí)設(shè)置了3個(gè)需要自適應(yīng)的屏幕寬度：
最后若想手機(jī)屏幕也可以實(shí)現(xiàn)這個(gè)寬度自適應(yīng)，還需要在對(duì)象樹根節(jié)點(diǎn)下設(shè)置移動(dòng)端適配為原始尺寸：
最后預(yù)覽，拖動(dòng)瀏覽器大小可以看到屏幕的不同變化
總結(jié)
以上是生活随笔為你收集整理的【iVX 初级工程师培训教程 10篇文拿证】02 数值绑定及自适应网站制作的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【iVX 初级工程师培训教程 10篇文拿
- 下一篇： 【iVX 初级工程师培训教程 10篇文拿