點擊整個專欄查看其它系列文章 （系列文章更新中…）：《iVX 高仿美團APP制作移動端完整項目》

項目界面預覽：

一、創建項目

首先打開在線編輯器地址：https://editor.ivx.cn/
隨后登錄帳號后創建一個相對應用項目，并且給予一個項目名稱：

點擊創建后進入線上IDE：

接著選擇對象樹中的前臺，為其創建一個頁面：

隨后選擇頁面，郵件重命名，命名為首頁：

二、添加基本背景

我們可以觀察頁面，發現當前首頁可以分為標題和下面的內容頁：

在此我們先創建一個行，該行將會包含“標題”以及“內容”兩個區域：

此時我們在行的屬性面板中找到對應的背景色，將其值拖拽至最左側，將會使其背景色透明：

此時該行會有高度，我們可以在行屬性中的高度中設置其屬性為包裹，設置包裹后其中的內容有多高，那么該行的高度就會隨著其內容的高度改變：

急著我們點擊首頁設置其背景顏色：

三、設置標題內容

此時我們已經完成了背景和主要容器的添加，此時我們在主要行中，添加一個行，重命名為標題：

在此我們可以分析一下該行的區域分布，我們可以分布為左和右，那么我們即可在這個行中再添加兩個行，一個命名為左，一個命名為右：

添加完畢后如下：

此時我們可以發現由于行本身占據了一定的寬度，左右分別占據了兩行，這兩行我們需要將其并為一行；我們在此分析，在當前標題內容中，左側為大部分內容，右側為小部分內容，我們可以將左側的行的寬度設置為 90%，右側行的寬度設置為 10%，此時頁面中兩行內容將會顯示在一行之中：

此時行的寬度太高，我們將其標題行的寬度設置為 40px：

但由于標題行中的左右兩行明顯其本身占據了一定高度，所以會超出顯示，在此我們將左右兩行的高度設置為包裹：

此時還有最后一個因素需要解決，咱們將標題行中的所有行（包括標題行）的背景色全部設置為透明：

接著我們查看原網頁，可以得知原網頁的標題左側為一個 icon 圖標，接著是一個文本，最右側是一個箭頭圖標：

此時我們點擊行，在其中添加圖標：

接著我們在圖標樣式中找到 location，并且設置，并對其更改對應的大小：

接著添加文本內容以及箭頭圖標（自己需要設置其大小）：

此時我們發現，當前內容并不垂直對其，我們只需要設置其父容器為垂直居中即可：

接著我們再到右邊添加一個圖標為 bell 即可：

為了保證其靠右顯示并且垂直居中，需要對其行進行對其的設置：

接著由于其內容太貼近于左右兩側，我們需要設置其父容器，也就是標題行，設置標題行的左右上下內編劇：

設置完之后效果如下：