ArkTS开发系列之基础组件用法的学习(2.3.1上）

最新推荐文章于 2025-02-21 14:26:27 发布

原创

最新推荐文章于 2025-02-21 14:26:27 发布 · 1.2k 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#学习 #鸿蒙

上篇回顾 ArkTS开发系列之UI布局用法的学习认识（2.2.2下）

本篇内容对一些常用基础组件的使用学习

一、知识储备

1. 按钮（Button）

有两种创建形式

不包含子组件

    Button('无子组件')
      .type(ButtonType.Capsule) //设置按钮类型
      .stateEffect(true)
      .backgroundColor(Color.Orange)

包含子组件

     Button({ type: ButtonType.Normal, stateEffect: true }) {
         Row() {
           Image($r('app.media.app_icon')).width(30).height(30).margin({ left: 12 })
           Text('logo，有子组件')
             .fontSize(44).fontColor(Color.Green).margin({ left: 10, right: 10 }) //设置文本样式
         }.alignItems(VerticalAlign.Center)
       }
       .borderRadius(9) //设置按钮圆角
       .backgroundColor(0x00c250).height(40)
		  ```

2. 单选框（Radio）

创建方式

      Radio({ value: 'no', group: 'isRight' })
        .checked(false)

3. 切换按钮（Toggle）

创建方式有两种

无子组件

  Toggle({type: ToggleType.Switch,isOn: false})
  Toggle({type: ToggleType.Checkbox,isOn: false})

包含子组件

  Toggle({ type: ToggleType.Button, isOn: true }) {
    Text('status')//有子组件的创建方式
      .fontColor(Color.Red)
  }.width('80')
  .selectedColor(Color.Yellow)//自定义背景颜色
  .onChange(isOn=>{
    if (isOn) {
      promptAction.showToast({message: '我被选中了'})
    }
  })

4. 进度条（Progress）

创建方式

Progress({value: 24, total: 100, type: ProgressType.Linear})

5. 文本显示（Text/Span）

创建方式

  Text('我是文本'){
    Span('我是Span文本')
  }
  Text($r('app.string.app_name'))
    .baselineOffset(0)
    .fontSize(44)
    .fontColor(Color.Pink)
    .border({ width: 1 })
    .padding(10)
    .width(300)

6. 输入框（TextInput/TextArea）

创建方式

  TextArea()//多选输入框
  TextInput()//单选输入框

7. 自定义弹窗（CustomDialog）

定义弹窗

@CustomDialog
struct MyDialog {
  controller: CustomDialogController;
  cancel: () => void;
  confirm: () => void;

  build() {
    Column() {
      Text('确认提交吗')
        .fontSize(44)
        .margin(10)

      Flex({ justifyContent: FlexAlign.SpaceAround }) {
        Button('取消').onClick(() => {
          this.controller.close()
          this.cancel
        })
          .margin(10)
        Button('确定').onClick(() => {
          this.controller.close()
          this.confirm
        }).margin(10)
      }
    }
  }
}