《HarmonyOS應(yīng)用開發(fā)基礎(chǔ)》 課件知識(shí)點(diǎn)2-5 開發(fā)登錄頁

開發(fā)登錄頁010203輸入框組件Input按鈕組件Button開關(guān)組件Toggle04文本提示框promptAction輸入框組件TextInputTextInput組件用于輸入單行文本，響應(yīng)輸入事件。TextInput的使用也非常廣泛，例如在登錄頁中的賬號(hào)輸入和密碼輸入。TextInput組件支持文本樣式設(shè)置TextInput()

.fontColor(Color.Blue)

.fontSize(20)

.fontStyle(FontStyle.Italic)

.fontWeight(FontWeight.Bold)

.fontFamily('Arial')輸入框組件TextInput設(shè)置輸入提示文本我們平常使用輸入框時(shí)常?？吹捷斎肟蛏蠒?huì)有提示文字，例如登錄賬號(hào)時(shí)會(huì)有“請(qǐng)輸入賬號(hào)”這樣的文本提示，當(dāng)用戶輸入內(nèi)容后，提示文本就消失了。使用placeholder設(shè)置提示文本使用placeholderColor和placeholderFont分別設(shè)置提示文本的顏色和樣式。TextInput({

placeholder:

'請(qǐng)輸入帳號(hào)'

})

.placeholderColor(‘#999999')

.placeholderFont({

size:

20,

weight:

FontWeight.Medium,

family:

'cursive',

style:

FontStyle.Italic

})輸入框組件TextInput設(shè)置輸入類型可以使用type屬性來設(shè)置輸入框類型。例如密碼輸入框，一般輸入密碼的時(shí)候，為了用戶密碼安全，內(nèi)容會(huì)顯示為“......”。這種情況就可以設(shè)置type屬性值為InputType.Password實(shí)現(xiàn)，如下面示例所示。TextInput({

placeholder:

'請(qǐng)輸入密碼'

})

.type(InputType.Password)輸入框組件TextInput輸入類型InputType枚舉值：Normal：基本輸入模式。支持輸入數(shù)字、字母、下劃線、空格、特殊字符。Password：密碼輸入模式。Email：e-mail地址輸入模式。Number：純數(shù)字輸入模式。輸入框組件TextInput獲取輸入文本在onChange事件回調(diào)方法中，獲取輸入框的輸入文本。如下面示例所示。

TextInput({

placeholder:

'請(qǐng)輸入賬號(hào)'

})

.onChange((value:

string)

=>

{

this.text

=

value//this.text為@State修飾的狀態(tài)變量

})按鈕組件ButtonButton組件主要用來響應(yīng)點(diǎn)擊操作，可以包含子組件。Button使用示例Button('登錄',

{

type:

ButtonType.Capsule,

stateEffect:

true

})

.width('90%')

.onClick(()

=>

{

//處理點(diǎn)擊事件邏輯

}))示例中的代碼，type用于定義按鈕樣式，ButtonType.Capsule表示膠囊形按鈕；stateEffect用于設(shè)置按鈕按下時(shí)是否開啟切換效果，當(dāng)狀態(tài)置為false時(shí)，點(diǎn)擊效果關(guān)閉，默認(rèn)值為true。并且給Button綁定onClick事件，每當(dāng)用戶點(diǎn)擊Button的時(shí)候，就會(huì)回調(diào)執(zhí)行onClick方法，調(diào)用里面的邏輯代碼。按鈕組件Button按鈕樣式ButtonType枚舉值Capsule：膠囊型按鈕（圓角默認(rèn)為高度的一半）。Circle：圓形按鈕。Normal：普通按鈕（默認(rèn)不帶圓角）。按鈕組件Button包含子組件Button組件可以包含子組件，例如在Button組件包含了一個(gè)Image組件。Button({

type:

ButtonType.Circle,

stateEffect:

true

})

{

Image($r('app.media.icon_delete'))

.width(30)

.height(30)}.width(55).height(55).backgroundColor('#317aff')開關(guān)組件ToggleToggle組件表示開關(guān)，開關(guān)狀態(tài)的初始化用isOn參數(shù)進(jìn)行設(shè)置；使用type設(shè)置開關(guān)樣式，開關(guān)狀態(tài)切換時(shí)觸發(fā)onChange事件回調(diào)方法。Toggle({

isOn:true,

//設(shè)置開關(guān)狀態(tài)組件初始化狀態(tài)為開

type:

ToggleType.Switch})//設(shè)置組件為開關(guān)樣式

.selectedColor("#ffa6c88c")//設(shè)置組件打開狀態(tài)的背景顏色

.switchPointColor(Color.Red)//設(shè)置

type類型為

Switch時(shí)的圓形滑塊顏色

.onChange((isOn)

=>

{//事件回調(diào),isOn為開與關(guān)的狀態(tài)值

console.log(

"開關(guān)狀態(tài)："

+

isOn)

})Toggle的type樣式：ToggleType.Switch為開關(guān)樣式；ToggleType.Checkbox為單選框樣式；ToggleType.Button為按鈕樣式，可以在Toggle中加入子組件。文本提示框promptActionpromptAction是在@mptAction模塊里提供的，使用時(shí)需要導(dǎo)入@mptAction模塊，用promptAction.showToast()提示信息。import

promptAction

from

'@mptAction';

//導(dǎo)入文本提示框模塊…

promptAction.showToast({

message:

"消息",