《HarmonyOS应用开发基础》 课件知识点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设置输入提示文本我们平常使用输入框时常常看到输入框上会有提示文字，例如登录账号时会有“请输入账号”这样的文本提示，当用户输入内容后，提示文本就消失了。使用placeholder设置提示文本使用placeholderColor和placeholderFont分别设置提示文本的颜色和样式。TextInput({

placeholder:

'请输入帐号'

})

.placeholderColor(‘#999999')

.placeholderFont({

size:

20,

weight:

FontWeight.Medium,

family:

'cursive',

style:

FontStyle.Italic

})输入框组件TextInput设置输入类型可以使用type属性来设置输入框类型。例如密码输入框，一般输入密码的时候，为了用户密码安全，内容会显示为“......”。这种情况就可以设置type属性值为InputType.Password实现，如下面示例所示。TextInput({

placeholder:

'请输入密码'

})

.type(InputType.Password)输入框组件TextInput输入类型InputType枚举值：Normal：基本输入模式。支持输入数字、字母、下划线、空格、特殊字符。Password：密码输入模式。Email：e-mail地址输入模式。Number：纯数字输入模式。输入框组件TextInput获取输入文本在onChange事件回调方法中，获取输入框的输入文本。如下面示例所示。

TextInput({

placeholder:

'请输入账号'

})

.onChange((value:

string)

=>

{

this.text

=

value//this.text为@State修饰的状态变量

})按钮组件ButtonButton组件主要用来响应点击操作，可以包含子组件。Button使用示例Button('登录',

{

type:

ButtonType.Capsule,

stateEffect:

true

})

.width('90%')

.onClick(()

=>

{

//处理点击事件逻辑

}))示例中的代码，type用于定义按钮样式，ButtonType.Capsule表示胶囊形按钮；stateEffect用于设置按钮按下时是否开启切换效果，当状态置为false时，点击效果关闭，默认值为true。并且给Button绑定onClick事件，每当用户点击Button的时候，就会回调执行onClick方法，调用里面的逻辑代码。按钮组件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组件表示开关，开关状态的初始化用isOn参数进行设置；使用type设置开关样式，开关状态切换时触发onChange事件回调方法。Toggle({

isOn:true,

//设置开关状态组件初始化状态为开

type:

ToggleType.Switch})//设置组件为开关样式

.selectedColor("#ffa6c88c")//设置组件打开状态的背景颜色

.switchPointColor(Color.Red)//设置

type类型为

Switch时的圆形滑块颜色

.onChange((isOn)

=>

{//事件回调,isOn为开与关的状态值

console.log(

"开关状态："

+

isOn)