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