深入淺出學(xué)習(xí)eTs（四）登陸界面UI

本項(xiàng)目Gitee倉(cāng)地址：深入淺出eTs學(xué)習(xí): 帶大家深入淺出學(xué)習(xí)eTs (gitee.com)

一、明確目標(biāo)

經(jīng)過(guò)前面兩章的學(xué)習(xí)，大家對(duì)Super Visual應(yīng)該有了一個(gè)較為簡(jiǎn)單的認(rèn)識(shí)，這一章就把前面的知識(shí)點(diǎn)串一下，使用Ark UI(Super Visual)賴(lài)模仿一個(gè)QQ的登陸界面，如下圖

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

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

二、分析目標(biāo)

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

QQ頭像：左右居中

帳號(hào)輸入框：左側(cè)有一個(gè)小圖標(biāo)，右側(cè)是輸入，是左右布局

密碼輸入框：同上

登陸按鈕：居中

三、Image的使用

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

Image

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

ImageFit

ImageInterpolation

ImageRenderMode

我們先在軟件中放置一個(gè)Image

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

該文件路徑需要是工程內(nèi)的路徑（因?yàn)槲疫@里是在lesson3的內(nèi)容上改的，所以顯示lesson3，這個(gè)不重要）

這里一般放置在media目錄下，此時(shí)再導(dǎo)入該路徑

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

四、Image的布局

如果是使用這個(gè)進(jìn)行移動(dòng)的話，不能完全靠中，且極易發(fā)生位移改變，這里使用之前學(xué)習(xí)到的flex控件

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

五、QQ帳號(hào)輸入框

選擇使用Row控件實(shí)現(xiàn)，因?yàn)槭撬綄?duì)齊

TextInput

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

參數(shù)

EnterKeyType枚舉說(shuō)明

InputType枚舉說(shuō)明

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

此時(shí)得到帳號(hào)的輸入

六、QQ密碼輸入框

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

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

六、登陸按鈕

因?yàn)榘粹o默認(rèn)是居中的，所以調(diào)整好大小和字體大小和顏色以及間距就可以了

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

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

是可以點(diǎn)擊和模擬的

編輯：黃飛