深入淺出學習eTs（四）登陸界面UI

本項目Gitee倉地址：深入淺出eTs學習: 帶大家深入淺出學習eTs (gitee.com)

一、明確目標

經(jīng)過前面兩章的學習，大家對Super Visual應(yīng)該有了一個較為簡單的認識，這一章就把前面的知識點串一下，使用Ark UI(Super Visual)賴模仿一個QQ的登陸界面，如下圖

針對這個界面，我們提取出來主要的內(nèi)容

• QQ頭像：可以使用Image控件
• 帳號：使用輸入框
• 密碼：使用INPUT
• 登錄按鈕：使用Button

二、分析目標

通過（一）的內(nèi)容我們提取出主要需要的部分，現(xiàn)在來分析一下布局：

QQ頭像：左右居中

帳號輸入框：左側(cè)有一個小圖標，右側(cè)是輸入，是左右布局

密碼輸入框：同上

登陸按鈕：居中

三、Image的使用

此時我們需要使用Image控件，先看一下image控件的介紹

Image

圖片組件，支持本地圖片和網(wǎng)絡(luò)圖片的渲染展示。

ImageFit

ImageInterpolation

ImageRenderMode

我們先在軟件中放置一個Image

在此處選擇已經(jīng)保存到本地的頭像圖片

該文件路徑需要是工程內(nèi)的路徑（因為我這里是在lesson3的內(nèi)容上改的，所以顯示lesson3，這個不重要）

這里一般放置在media目錄下，此時再導入該路徑

此時實現(xiàn)了Image的顯示部分

四、Image的布局

如果是使用這個進行移動的話，不能完全靠中，且極易發(fā)生位移改變，這里使用之前學習到的flex控件

這里選擇在Flex中塞入一個Image，且把Flex設(shè)置為左右居中，上下居中，此時實現(xiàn)了圖片的居中

五、QQ帳號輸入框

選擇使用Row控件實現(xiàn)，因為是水平對齊

TextInput

可以輸入單行文本并支持響應(yīng)輸入事件的組件。

參數(shù)

EnterKeyType枚舉說明

InputType枚舉說明

在placeholder參數(shù)進行設(shè)置后得到如下：

此時得到帳號的輸入

六、QQ密碼輸入框

密碼輸入框如法炮制，不過對應(yīng)的InputType類型選擇為InputType.Password，變?yōu)槊艽a輸入模式

此時已經(jīng)出現(xiàn)了QQ帳號的輸入和QQ密碼的輸入（圖片隨便選的，這個不重要）

六、登陸按鈕

因為按鈕默認是居中的，所以調(diào)整好大小和字體大小和顏色以及間距就可以了

七、轉(zhuǎn)換為eTs文件/模擬器展示

轉(zhuǎn)換為模擬器后發(fā)現(xiàn)與設(shè)計草稿一致，此時可以直接點擊模擬器中的輸入框

是可以點擊和模擬的

編輯：黃飛