《HarmonyOS應用開發(fā)基礎》 課件知識點2-5-1 基礎組件2

基礎組件2010203輸入框組件Input按鈕組件Button開關組件Toggle輸入框組件TextInputTextInput組件用于輸入單行文本，響應輸入事件。TextInput的使用也非常廣泛，例如在登錄頁中的賬號輸入和密碼輸入。TextInput組件支持文本樣式設置TextInput()

.fontColor(Color.Blue)

.fontSize(20)

.fontStyle(FontStyle.Italic)

.fontWeight(FontWeight.Bold)

.fontFamily('Arial')輸入框組件TextInput設置輸入提示文本我們平常使用輸入框時常常看到輸入框上會有提示文字，例如登錄賬號時會有“請輸入賬號”這樣的文本提示，當用戶輸入內(nèi)容后，提示文本就消失了。使用placeholder設置提示文本使用placeholderColor和placeholderFont分別設置提示文本的顏色和樣式。TextInput({

placeholder:

'請輸入帳號'

})

.placeholderColor(‘#999999')

.placeholderFont({

size:

20,

weight:

FontWeight.Medium,

family:

'cursive',

style:

FontStyle.Italic

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

placeholder:

'請輸入密碼'

})

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

TextInput({

placeholder:

'請輸入賬號'

})

.onChange((value:

string)

=>

{

this.text

=

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

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

{

type:

ButtonType.Capsule,

stateEffect:

true

})

.width('90%')

.onClick(()

=>

{

//處理點擊事件邏輯

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

type:

ButtonType.Circle,

stateEffect:

true

})

{

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

.width(30)

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

isOn:true,

//設置開關狀態(tài)組件初始化狀態(tài)為開

type:

ToggleType.Switch})//設置組件為開關樣式

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

.switchPointColor(Color.Red)//設置

type類型為

Switch時的圓形滑塊顏色

.onChange((isOn)

=>

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

console.log(

"開關狀態(tài)："

+

isOn)