本項目Gitee倉地址：深入淺出eTs學習: 帶大家深入淺出學習eTs ()一、明確目標
經過前面兩章的學習，大家對Super 應該有了一個較為簡單的認識，這一章就把前面的知識點串一下，使用Ark UI(Super )賴模仿一個QQ的登陸界面，如下圖
針對這個界面，我們提取出來主要的內容
二、分析目標
通過（一）的內容我們提取出主要需要的部分，現在來分析一下布局：
QQ頭像：左右居中帳號輸入框：左側有一個小圖標，右側是輸入，是左右布局密碼輸入框：同上登陸按鈕：居中三、Image的使用
此時我們需要使用Image控件，先看一下image控件的介紹
Image
圖片組件，支持本地圖片和網絡圖片的渲染展示。
名稱描述
Cover
保持寬高比進行縮小或者放大，使得圖片兩邊都大于或等于顯示邊界。
保持寬高比進行縮小或者放大，使得圖片完全顯示在顯示邊界內。
Fill
不保持寬高比進行放大縮小，使得圖片充滿顯示邊界。
None
保持原有尺寸顯示。
保持寬高比顯示，圖片縮小或者保持不變。
名稱描述
None
不使用插值圖片數據。
High
插值圖片數據的使用率高，可能會影響圖片渲染的速度。
插值圖片數據的使用率中。
Low
插值圖片數據的使用率低。
名稱描述
按照原圖進行渲染，包括顏色。
將圖片渲染為模板圖片，忽略圖片的顏色信息。
我們先在軟件中放置一個Image
在此處選擇已經保存到本地的頭像圖片
該文件路徑需要是工程內的路徑（因為我這里是在的內容上改的，所以顯示，這個不重要）
這里一般放置在media目錄下，此時再導入該路徑
此時實現了Image的顯示部分
四、Image的布局
如果是使用這個進行移動的話，不能完全靠中，且極易發生位移改變，這里使用之前學習到的flex控件
這里選擇在Flex中塞入一個Image，且把Flex設置為左右居中，上下居中，此時實現了圖片的居中
五、QQ帳號輸入框
選擇使用Row控件實現，因為是水平對齊
可以輸入單行文本并支持響應輸入事件的組件。
參數
參數名參數類型必填默認值參數描述
|
否
-
無輸入時的提示文本。
text
|
否
-
設置提示文本的當前值。
+
否
-
設置控制器。
在參數進行設置后得到如下：
此時得到帳號的輸入
六、QQ密碼輸入框
密碼輸入框如法炮制input中加入搜索圖標，不過對應的類型選擇為.，變為密碼輸入模式
此時已經出現了QQ帳號的輸入和QQ密碼的輸入（圖片隨便選的input中加入搜索圖標，這個不重要）
六、登陸按鈕
因為按鈕默認是居中的，所以調整好大小和字體大小和顏色以及間距就可以了
七、轉換為eTs文件/模擬器展示
轉換為模擬器后發現與設計草稿一致，此時可以直接點擊模擬器中的輸入框
是可以點擊和模擬的