5.3鴻蒙ArkUI開發(fā)基礎(chǔ)本章主要講述鴻蒙ArkUI開發(fā)基礎(chǔ)

。通過學習本節(jié)將能夠了解鴻蒙ArkUI開發(fā)基礎(chǔ)。通過本節(jié)學習可以熟悉：Text組件Button組件Row與Column容器Image組件TextInput組件登錄驗證頁面設(shè)計Text組件Button組件Row與Column容器Image組件TextInput組件登錄驗證頁面設(shè)計Text組件

在ArkUI中Text組件用于顯示文字信息，可在組件描述指定顯示的文字內(nèi)容及相關(guān)屬性設(shè)置。Text("helloworld!!")//描述Text組件，并指定顯示字符串.fontSize(30)//設(shè)置字體大小.fontColor(Color.Red)//設(shè)置字體顏色.fontWeight(FontWeight.Bold)//設(shè)置字體加粗.textAlign(TextAlign.Center)//設(shè)置字體居中對齊.width('100%')//設(shè)置Text組件的寬度與頁面寬度一致Text組件Button組件Row與Column容器Image組件TextInput組件登錄驗證頁面設(shè)計Button組件

在ArkUI中Button表示一個按鈕，可顯示按鈕功能相關(guān)的文字信息，并設(shè)置點擊事件及其他屬性的配置。Button(){//按鈕組件里由一個Text組件顯示文字信息Text(＂按鈕＂).fontSize(18)}.type(ButtonType.Capsule)//設(shè)置按鈕為膠囊類型.width(150).height(50)//設(shè)置按鈕的寬高.margin(100)//設(shè)置按鈕的外邊距.onClick(()=>{//設(shè)置點擊事件})Text組件Button組件Row與Column容器Image組件TextInput組件登錄驗證頁面設(shè)計Row與Column容器(1/3)在ArkUI組件中，Row與Column組件屬于布局管理的容器組件，用于管理所屬組件的在頁面上的排列布局。其中Row是行布局，即它會將所屬的組件排成一行；Column是列布局，即會將每個所屬的組件單獨占用一行。同時布局管理器是可以互相嵌套的，即行布局管理器中可以包含列布局，而此被包含的列布局管理器里也可再包含一個行布局或列布局。但

根據(jù)一個系統(tǒng)組件內(nèi)部只能有一個子組件原則，

一個頁面也只能有一個根布局管理器。Row與Column容器(2/3)將四個按鈕排列成一行，則可以使用行布局方式：

Row({space:20}){//space:20設(shè)置按鈕間隔距離

Button("按鈕1")

Button("按鈕2")

Button("按鈕3")

Button("按鈕4")

}.width('100%').height('100%')//設(shè)置布局管理器的寬與高

.alignSelf(ItemAlign.Center)//組件居中對齊Row與Column容器(3/3)將四個按鈕排列成一列，則可以使用列布局方式：

Column({space:20}){//space:20設(shè)置按鈕間隔距離

Button("按鈕1")

Button("按鈕2")

Button("按鈕3")

Button("按鈕4")

}.width('100%').height('100%')//設(shè)置布局管理器的寬與高

.alignSelf(ItemAlign.Center)//組件居中對齊Text組件Button組件Row與Column容器Image組件TextInput組件登錄驗證頁面設(shè)計Image組件Image組件可用于顯示各種文件格式的資源圖像文件，并可設(shè)置組件的寬度、高度、縮放模式等配置。將圖像文件復制到工程中的“resources->base->media”文件夾中。Image($r('app.media.smoke'))//設(shè)置Image組件顯示smoke資源圖像.width(200).height(200)//設(shè)置Image組件的寬與高.objectFit(ImageFit.Fill)//設(shè)置圖像填充模式Text組件Button組件Row與Column容器Image組件TextInput組件登錄驗證頁面設(shè)計TextInput組件TextInput組件用于獲取用戶輸入的文本內(nèi)容，并提供提示信息、背景顏色等屬性配置。Column({space:20}){TextInput({placeholder:'請輸入賬號'})//描述文本輸入組件，并設(shè)置提示信息.width('60%').height(50)//設(shè)置組件的寬與高.backgroundColor('#ff326085')//設(shè)置組件的背景顏色.fontSize(20)//設(shè)置組件字體大小TextInput({placeholder:'請輸入密碼'})//描述文本輸入組件，并設(shè)置提示信息.width('60%').height(50)//設(shè)置組件的寬與高.backgroundColor('#ff326085')//設(shè)置組件的背景顏色.fontSize(20)//設(shè)置組件字體大小.type(InputType.Password)//設(shè)置密碼輸入掩碼}.width('100%').height('100%').alignSelf(ItemAlign.Center)Text組件Button組件Row與Column容器Image組件TextInput組件登錄驗證頁面設(shè)計登錄驗證頁面設(shè)計(1/2)

設(shè)計實現(xiàn)一個登錄驗證頁面。驗證頁面主要分成三行，第一行由一個圖像與一個輸入框組件組成實現(xiàn)用戶賬號的輸入，第二行實現(xiàn)用戶密碼的輸入，第三行只有一個登錄按鈕組件。登錄驗證頁面設(shè)計(2/2)

Column({space:20}){

//第一行組件描述

//第二行組件描述

//第三行組件描述

}.width('100%')

.alignItems(