HarmonyOS4.0系列——08、整合UI常用组件

HarmonyOS4.0 系列——08、UI 组件

Blank

Blank 组件在横竖屏占满空余空间效果

// xxx.ets
@Entry
@Component
struct BlankExample {
  build() {
    Column() {
      Row() {
        Text('Button')
          .fontSize(18)
        Blank()
        Toggle({
          type: ToggleType.Switch
        })
          .margin({
            top: 14,
            bottom: 14,
            left: 6,
            right: 6
          })
      }
      .width('100%')
      .backgroundColor(0xFFFFFF)
      .borderRadius(15)
      .padding({ left: 12 })
    }
    .backgroundColor(0xEFEFEF)
    .padding(20)
  }
}

Blank 的父组件需要设置宽度，否则不生效

Button

ButtonType 枚举说明

名称	描述
Capsule	胶囊型按钮（圆角默认为高度的一半）。
Circle	圆形按钮。
Normal	普通按钮（默认不带圆角）。

设置颜色渐变需先设置backgroundColor为透明色。

属性

• type: 按钮类型，可选值：Normal/Capsule/Circle 默认值：ButtonType.Capsule
• stateEffect: 按钮状态效果，可选值：true/false,默认 flase

例：

@Entry
@Component
struct Index {
  build() {
    Column({ space: 5 }) {
      Text('按钮类型').margin({top:20})
      Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) {
        Button('Button', { type: ButtonType.Normal })
        Button('Button', { type: ButtonType.Capsule })
        Button('Button', { type: ButtonType.Circle }).width(80)
      }.width('100%')

      Divider().margin(20)
      Text('按钮自定义样式').margin({bottom:20})
      Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceAround }) {
        Button({ type: ButtonType.Normal, stateEffect: true }) {
          Row() {
            LoadingProgress().width(20).height(20).margin({ left: 12 }).color(0xFFFFFF)
            Text('loading').fontSize(12).fontColor(0xffffff).margin({ left: 5, right: 12 })
          }.alignItems(VerticalAlign.Center)
        }.borderRadius(8).backgroundColor(0x317aff).width(90).height(40)

        Button('Disable', { type: ButtonType.Normal, stateEffect: false })
          .opacity(.4)
          .borderRadius(8)
          .backgroundColor(0x317aff)
          .width(90)

      }.width('100%')
    }.height('100%')
  }
}

Checkbox 和 CheckboxGroup

复选框，通常用于某选项的打开或关闭。

Checkbox

Checkbox 接口

Checkbox(options?: {name?: string, group?: string })

属性

• name：多选框名称。
• group：多选框的群组名称。说明：未配合使用 CheckboxGroup 组件时，此值无用。

CheckboxGroup 接口

CheckboxGroup(options?: { group?: string })

属性：

• selectAll：设置是否全选。默认值：false，若同组的 Checkbox 显式设置 select，则 Checkbox 的优先级高。
• selectedColor：设置被选中或部分选中状态的颜色。

@Entry
@Component
struct Index {
  build() {
    Row() {
      Column({ space: 10 }) {
        Row() {
          CheckboxGroup({ group: 'box' })
          Text('全选')
        }

        Row() {
          Checkbox({ group: 'box' })
          Text('1')
        }

        Row() {
          Checkbox({ group: 'box' })
          Text('2')
        }
      }
    }
  }
}

监听事件：

@Entry
@Component
struct Index {
  build() {
    Row() {
      Column({ space: 10 }) {
        Row() {
          CheckboxGroup({ group: 'checkboxGroup' })
            .selectedColor('#ff8e1e9b')
            .onChange((itemName: CheckboxGroupResult) => {
              console.info("checkbox group content" + JSON.stringify(itemName))
            })
          Text('全选')
        }

        Row() {
          Checkbox({ name: 'checkbox1', group: 'checkboxGroup' })
            .onChange((value: boolean) => {
              console.info('Checkbox1' + value)
            })
          Text('1')
        }

        Row() {
          Checkbox({ name: 'checkbox2', group: 'checkboxGroup' })
            .onChange((value: boolean) => {
              console.info('Checkbox2' + value)
            })
          Text('2')
        }

        Row() {
          Checkbox({ name: 'checkbox3', group: 'checkboxGroup' })
            .onChange((value: boolean) => {
              console.info('Checkbox3' + value)
            })
          Text('2')
        }
      }
    }
  }
}

效果：

DataPanel

数据面板组件，用于将多个数据占比情况使用占比图进行展示。

接口

DataPanel(options:{values: number[], max?: number, type?: DataPanelType})

参数

参数名	参数类型	必填	参数描述
values	number[]	是	数据值列表，最多包含9个数据，大于9个数据则取前9个数据。若数据值小于0则置为0。
max	number	否	- max大于0，表示数据的最大值。 - max小于等于0，max等于value数组各项的和，按比例显示。 默认值：100
type8+	DataPanelType	否	数据面板的类型（不支持动态修改）。 默认值：DataPanelType.Circle

属性

名称	类型	描述
closeEffect	boolean	关闭数据占比图表旋转动效。 默认值：false

DataPanelType 枚举说明

名称	描述
Line	线型数据面板。
Circle	环形数据面板。

实例：

@Entry
@Component
struct Index {
  public valueArr: number[] = [10, 10, 10, 10, 10, 10, 10, 10, 10]

  build() {
    Row() {
      Column({ space: 5 }) {
        Flex({wrap:FlexWrap.Wrap,justifyContent:FlexAlign.Center}){
          Row(){
            Text('环形图')
          }.width('80%')
          Stack() {
            DataPanel({ values: [25], max: 100, type: DataPanelType.Circle }).width(168).height(168)
            Column() {
              Text('30').fontSize(35).fontColor('#182431')
              Text('1.0.0').fontSize(9.33).lineHeight(12.83).fontWeight(500).opacity(0.6)
            }
          }.width('100%')

          Stack(){
            DataPanel({ values: [50, 12, 8, 5], max: 100, type: DataPanelType.Circle }).width(168).height(168)
            Column() {
              Text('75').fontSize(35).fontColor('#182431')
              Text('98GB/128GB').fontSize(8.17).lineHeight(11.08).fontWeight(500).opacity(0.6)
            }
          }
          Row(){
            Text('线图')
          }.width('80%')
          DataPanel({ values: this.valueArr, max: 100, type: DataPanelType.Line }).width('80%').height(10)
        }.width('100%')

      }.height('100%')
    }.width('100%').margin({ top: 5 })
  }
}

效果：

注意：在使用 DataPanel 组件在圆环内添加文字需要在外层使用 Stack 容器

DatePicker

日期选择器组件，用于根据指定日期范围创建日期滑动选择器。

接口

DatePicker(options?: {start?: Date, end?: Date, selected?: Date})

• start:起始日期 默认值：Date(‘1970-1-1’)
• end：结束日期 默认值：Date(‘2100-12-31’)
• selected：当前日期 默认值：当前系统日期

属性

名称	参数类型	描述
lunar	boolean	日期是否显示农历。 - true：展示农历。 - false：不展示农历。 默认值：false

事件

onChange(callback: (value: DatePickerResult) => void)

DatePickerResult 对象说明

名称	参数类型	描述
year	number	选中日期的年。
month	number	选中日期的月(0~11)，0表示1月，11表示12月。
day	number	选中日期的日。

示例：

@Entry
@Component
struct Index {
  @State isLunar: boolean = false
  private selectedDate: Date = new Date('2024-01-26')

  build() {
    Column() {
      Button('切换公历农历')
        .margin({ top: 30, bottom: 30 })
        .onClick(() => {
          this.isLunar = !this.isLunar
        })
      DatePicker({
        start: new Date('1970-1-1'),
        end: new Date('2100-1-1'),
        selected: this.selectedDate
      })
        .lunar(this.isLunar)
        .onChange((value: DatePickerResult) => {
          this.selectedDate.setFullYear(value.year, value.month, value.day)
          console.info('select current date is: ' + JSON.stringify(value))
        })
    }.width('100%')
  }
}

Divider

分割线

Divider();

属性

• vertical：使用水平分割线还是垂直分割线，默认 false。
• color：分割线颜色。默认值：‘#33182431’
• strokeWidth：分割线宽度。默认值：1，单位：vp。
• lineCap：分割线的端点样式。默认值：LineCapStyle.Butt。

@Entry
@Component
struct Index {
  build() {
    Column() {
      Row() {
        Column(){
          Text('Southern Wind01')
          Divider().vertical(false).color('#182431').opacity(0.6).margin(20)
          Text('Southern Wind02')
        }
      }
    }.width('100%')
  }
}

Image

Image 为图片组件，常用于在应用中显示图片。Image 支持加载 string、PixelMap 和 Resource 类型的数据源，支持 png、jpg、bmp、svg 和 gif 类型的图片格式。

参数名	参数类型	必填	参数描述
src	string | PixelMap | Resource	是	图片的数据源，支持本地图片和网络图片，引用方式请参考加载图片资源。 string格式可用于加载网络图片和本地图片，常用于加载网络图片。当使用相对路径引用本地图片时，例如Image("common/test.jpg")，不支持跨包/跨模块调用该Image组件，建议使用Resource格式来管理需全局使用的图片资源。 支持Base64字符串。格式data:image/[png|jpeg|bmp|webp];base64,[base64 data], 其中[base64 data]为Base64字符串数据。 支持file://路径前缀的字符串。用于读取本应用安装目录下files文件夹下的图片资源。需要保证目录包路径下的文件有可读权限。 PixelMap格式为像素图，常用于图片编辑的场景。 Resource格式可以跨包/跨模块访问资源文件，是访问本地图片的推荐方式。 说明： ArkTS卡片支持gif图片格式动效，但仅在显示时播放一次。 ArkTS卡片上不支持http://等网络相关路径前缀和file://路径前缀的字符串。 ArkTS卡片上不支持PixelMap类型。

加载基本类型图片

@Entry
@Component
struct ImageExample1 {
  build() {
    Column() {
      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start }) {
        Row() {
          // 加载png格式图片
          Image($r('app.media.ic_camera_master_ai_leaf'))
            .width(110).height(110).margin(15)
            .overlay('png', { ali