48.HarmonyOS鸿蒙系统 App(ArkUI)常用组件的使用
按钮触发事件
toast信息提示
单选按钮
复选框
切换按钮，开关按钮
进度条
textbox,textinput,TextArea文本输入框
气泡提示
import prompt from '@ohos.prompt';
import promptAction from '@ohos.promptAction';
@Entry
@Component
struct Index {
@State message: string = 'Hello World'
@State handlePopup: boolean = false
build() {
Column()
{
Row(){
Text('常用组件的使用').fontSize(38).fontColor(Color.White)
}.backgroundColor(Color.Blue)
Row(){
Text('文本组件').fontSize(38).fontColor(Color.White)
.align(Alignment.Center)
}.backgroundColor(Color.Blue)
Row(){
Button('按钮组件')
.fontSize(32)
.fontColor(Color.White)
.onClick(()=>{
promptAction.showToast({
message: "默认Toast提示信息显示"
})
})
Button('按钮组件2')
.fontSize(32)
.fontColor(Color.White)
.onClick(()=>{
promptAction.showToast({
message: "参数配置toast显示", // 显示文本
duration: 3000, // 显示时长，3秒
bottom: 500
})
})
}.backgroundColor(Color.Blue)
Row(){
Radio({ value: 'Radio1', group: 'radioGroup' })
.height(50)
.width(50)
.onChange((isChecked: boolean) => {
if(isChecked) {
// 切换
promptAction.showToast({ message: '单选1' })
}
})
Radio({ value: 'Radio2', group: 'radioGroup' })
.height(50)
.width(50)
.onChange((isChecked: boolean) => {
if(isChecked) {
// 切换
promptAction.showToast({ message: '单选2' })
}
})
Radio({ value: 'Radio3', group: 'radioGroup' })
.height(50)
.width(50)
.onChange((isChecked: boolean) => {
if(isChecked) {
// 切换
promptAction.showToast({ message: '单选3' })
}
})
}.backgroundColor(Color.Green)
Row()
{
Text('单选按钮')
}.backgroundColor(Color.Green)
Row()
{
Toggle({ type: ToggleType.Checkbox, isOn: false })
Text('复选框，切换按钮1')
}
Row()
{
Toggle({ type: ToggleType.Checkbox, isOn: true })
Text('复选框，切换按钮2')
}
Row()
{
Toggle({ type: ToggleType.Switch, isOn: false })
Text('开关按钮1')
Toggle({ type: ToggleType.Switch, isOn: true })
Text('开关按钮2')
}
Row(){
Progress({ value: 24, total: 100, type: ProgressType.Linear })
Text('进度条')
}
Row(){
Text('类别:')
TextInput({text:'文本输入信息'}).backgroundColor(Color.Yellow)
}
Row(){
Text('专业:')
TextArea({text:'TextArea信息可以自动换行，。。。。。。。。。。。，' +
'非常方便，非常有用'}).backgroundColor(Color.Orange)
}
Row(){
Button('气泡提示')
.onClick(()=>{
this.handlePopup = !this.handlePopup
})
.bindPopup(this.handlePopup, {
message: '这是气泡提示信息',
})
}.backgroundColor(Color.Orange)
}
}
}