【鸿蒙开发】第6课，Divider、DataPanel、DatePicker、DatePickerDialog组件

Afra55
152 阅读13分钟

1 Divider组件详解

Divider组件在鸿蒙开发中的核心功能是将页面中的不同部分进行视觉上的分隔。无论是简单的文本列表，还是复杂的界面布局，Divider组件都能有效地将内容划分成清晰的区块，使得页面结构更加有条理，用户浏览体验更佳。通过添加分割线，开发者可以引导用户的视线流动，提高界面的可读性和易用性。

1.1 常用属性

  1. color：用于设置分割线的颜色。该属性接受ResourceColor类型的值，可以是系统预定义的颜色资源，也可以是自定义的颜色值。例如，Divider().color(Color.Gray)将分割线设置为灰色。

  2. strokeWidth：用于设置分割线的宽度。该属性接受number类型的值，单位为逻辑像素。开发者可以根据实际需求调整分割线的粗细，以达到最佳的视觉效果。例如，Divider().strokeWidth(2)将分割线宽度设置为2个逻辑像素。

  3. vertical：用于设置分割线的方向。该属性接受boolean类型的值，false表示水平分割线（默认值），true表示垂直分割线。根据页面布局的需要，开发者可以灵活地选择使用水平或垂直分割线。

  4. margin：这是一个简写属性，用于同时设置分割线的所有外边距属性（上、下、左、右）。该属性可以有1到4个值，分别对应上、右、下、左的外边距。例如，Divider().margin(10)将分割线的上、下、左、右边距都设置为10个逻辑像素。

  5. lineCap：用于设置分割线条的端点样式。该属性接受LineCapStyle类型的值，可选值包括butt（默认值，分割线两端为平行线）、round（分割线两端额外添加半圆）、square（分割线两端额外添加半方形）。这些选项允许开发者根据设计需求调整分割线的端点样式。

image.png

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('欢迎来到鸿蒙应用')
        .fontSize(24)

      Divider().color(Color.Gray).strokeWidth(2).margin({ top: 20, bottom: 20 })

      Image($r('app.media.startIcon'))
        .width(50)
        .height(50)
    }
  }
}

1.2 布局方式

Divider组件在布局中通常以水平或垂直方向排列，具体取决于其所在父容器的布局方式以及vertical属性的设置。

  • 在水平布局的容器中（如Row组件），如果未设置vertical属性或将其设置为false，Divider组件将默认以水平方向显示分割线，将容器中的内容在垂直方向上进行分隔。
  • 在垂直布局的容器中（如Column组件），同样地，如果未设置vertical属性或将其设置为false，Divider组件将默认以水平方向显示分割线。但如果将其vertical属性设置为true，则将以垂直方向显示分割线，将容器中的内容在水平方向上进行分隔。

image.png

@Entry
@Component
struct Index {
  build() {
    Row() {
      Text('欢迎来到鸿蒙应用')
        .fontSize(24)

      Divider().color(Color.Gray).strokeWidth(2).margin({ left: 20, right: 20 }).vertical(true)

      Image($r('app.media.startIcon'))
        .width(50)
        .height(50)
    }.height(100)
  }
}

1.3 颜色渐变

颜色渐变：除了使用color属性设置单一颜色外，还可以通过linearGradient或radialGradient来实现渐变颜色效果。这可以为分割线增添更多的视觉层次感和动态效果。例如：

image.png

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('欢迎来到鸿蒙应用')
        .fontSize(24)


      Divider().linearGradient({
        angle: 45, // 45度渐变
        colors: [
          [Color.Red, 0], // 起始颜色为红色
          [Color.Yellow, 0.5], // 中间位置为黄色
          [Color.Blue, 1]// 结束颜色为蓝色
        ],
        repeating: false // 不重复渐变
      })
        .strokeWidth(5) // 设置分割线宽度

      Image($r('app.media.startIcon'))
        .width(50)
        .height(50)
    }
  }
}

image.png

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('欢迎来到鸿蒙应用')
        .fontSize(24)

      Divider()
        .radialGradient({
          center: ['50%', '50%'], // 中心点位于组件中心
          radius: '75%', // 半径为组件尺寸的75%
          colors: [
            [Color.Blue, 0], // 中心颜色为蓝色
            [Color.Green, 0.7], // 过渡到绿色
            [Color.White, 1]// 外围颜色为白色
          ],
          repeating: false // 不重复渐变
        })
        .strokeWidth(50) // 设置分割线宽度

      Image($r('app.media.startIcon'))
        .width(50)
        .height(50)
    }
  }
}

2 DataPanel组件

DataPanel组件主要用于展示多个数据的占比情况，通过直观的图表形式，使用户能够快速理解数据的分布和比例。

2.1 接口介绍

DataPanel组件的接口原型为：

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

  1. values（必填）：数据值列表，类型为number[]。该列表最多包含9个数据，如果传入的数据值超过9个，则会自动取前9个数据。若数据值小于0，则会被置为0。

  2. max（可选）：数据的最大值，类型为number。如果max大于0，则表示数据的最大值；如果max小于等于0，则max等于values数组各项的和，数据将按比例显示。默认值为100。

  3. type（可选）：数据面板的类型，类型为DataPanelType。该枚举类型包括Line（线型数据面板）和Circle（环形数据面板）两种类型，默认值为DataPanelType.Circle。需要注意的是，数据面板的类型一旦在创建时指定，就不支持动态修改。

2.2 属性介绍

除了支持通用属性（如backgroundColor、color、font等）外，DataPanel组件还有自己独特的属性：

  1. closeEffect：布尔类型，用于关闭数据占比图表的旋转动效。默认值为false。

  2. valueColors：设置各数据段的颜色，类型为Array<ResourceColor | LinearGradient>。

  3. trackBackgroundColor：设置底板颜色，类型为ResourceColor。

  4. strokeWidth：设置圆环粗细，类型为Length。需要注意的是，当数据面板的类型为DataPanelType.Line时，该属性不生效。

  5. trackShadow：设置投影样式，类型为DataPanelShadowOptions。

  6. contentModifier：定制DataPanel内容区的方法，类型为ContentModifier<DataPanelConfiguration>。开发者需要自定义class实现ContentModifier接口。

2.3 使用示例

image.png

@Entry
@Component
struct Index {
  build() {
    Column() {
      DataPanel({
        values: [11, 40, 2, 3, 35, 8, 63, 12], // 数据值列表
        max: 100, // 数据的最大值
        type: DataPanelType.Circle // 数据面板的类型
      })
        .width('100%')// 设置宽度
        .height(100) // 设置高度
        .strokeWidth(20)

      Blank(20)

      DataPanel({
        values: [11, 40, 2, 3, 35, 8, 63, 12], // 数据值列表
        max: 100, // 数据的最大值
        type: DataPanelType.Line // 数据面板的类型
      })
        .width('100%')// 设置宽度
        .height(100) // 设置高度
    }
    .width('100%') // 设置外层容器的宽度
    .justifyContent(FlexAlign.Center) // 设置内容居中对齐
    .alignItems(HorizontalAlign.Center) // 设置子元素居中对齐
  }
}

3 DatePicker组件详解

DatePicker组件是鸿蒙操作系统提供的一个日期选择器，旨在帮助开发者在应用中轻松实现日期选择功能。用户可以通过滑动或点击选择器来选择具体的年、月和日。该组件不仅提供了基本的日期选择功能，还支持农历显示、文本样式自定义以及日期范围控制等高级特性。

3.1 示例代码分析

以下是一个使用鸿蒙DatePicker组件的示例代码，我们将通过这段代码来详细分析DatePicker的用法和配置选项：

动画.gif

@Entry
@Component
struct Index {
  @State private selectedDate: Date = new Date(); // 当前选中的日期

  build() {
    Column() {
      // 显示当前选中的日期
      Text(this.selectedDate.toLocaleString())
      
      // 创建一个DatePicker组件
      DatePicker({
        start: new Date('1970-01-01'), // 可选日期的起始时间
        end: new Date('2100-12-31'), // 可选日期的结束时间
        selected: this.selectedDate // 当前选中的日期
      })
      .lunar(false) // 设置是否显示农历，false表示显示公历
      .textStyle({ color: Color.Red, font: { size: '18fp', weight: 400 } }) // 设置普通选项的文本样式
      .disappearTextStyle({ color: Color.Green, font: { size: '22fp', weight: 400 } }) // 设置最上和最下选项的文本样式
      .selectedTextStyle({ color: Color.Blue, font: { size: '14fp', weight: 400 } }) // 设置选中项的文本样式
      .onDateChange((value: Date) => {
        // 日期变化时触发的回调函数
        this.selectedDate = value;
      })
    }
    .width('100%') // 设置外层容器的宽度
    .height('100%') // 设置外层容器的高度
    .justifyContent(FlexAlign.Center) // 设置内容居中对齐
    .alignItems(HorizontalAlign.Center) // 设置子元素居中对齐
  }
}

3.2 DatePicker组件的关键功能和配置选项

  1. 日期选择范围：

    • start：设置日期选择的起始日期。在示例中，我们将其设置为1970年1月1日。
    • end：设置日期选择的结束日期。在示例中，我们将其设置为2100年12月31日。

  2. 当前选中日期：

    • selected：设置DatePicker组件当前选中的日期。在示例中，我们使用了一个@State变量selectedDate来存储和更新当前选中的日期。

  3. 农历显示：

    • .lunar(false)：设置DatePicker组件是否显示农历。在示例中，我们将其设置为false，表示显示公历。

  4. 文本样式自定义：

    • .textStyle()：设置DatePicker组件中普通选项的文本样式。在示例中，我们设置了红色字体和18fp的字体大小。
    • .disappearTextStyle()：设置DatePicker组件中最上和最下选项的文本样式。在示例中，我们设置了绿色字体和22fp的字体大小。
    • .selectedTextStyle()：设置DatePicker组件中选中项的文本样式。在示例中，我们设置了蓝色字体和14fp的字体大小。

  5. 日期变化事件：

    • .onDateChange()：设置DatePicker组件日期变化时的回调函数。在示例中，我们定义了一个回调函数来更新selectedDate变量的值，并反映到界面上显示。

3.3 使用DatePicker组件的注意事项

  • 日期范围设置：确保start日期早于或等于end日期，否则可能导致用户无法选择任何日期。
  • 样式自定义：DatePicker组件提供了丰富的样式自定义选项，开发者可以根据应用需求进行合适的设置。但需要注意的是，过度自定义可能会影响界面的整体美观度和一致性。
  • 状态管理：使用@State变量来管理DatePicker组件的选中日期，确保在日期变化时能够及时更新应用状态。

4 DatePickerDialog组件详解

DatePickerDialog组件是鸿蒙操作系统提供的一个日期选择弹窗组件。它结合了DatePicker组件的日期选择功能和Dialog组件的弹窗显示方式，为用户提供了一个便捷的日期选择界面。用户可以在不离开当前页面的情况下，通过弹出的日期选择器快速选择日期。

4.1 DatePickerDialog组件的关键功能和配置选项

  1. 日期选择范围：

    • start：设置日期选择的起始日期。用户无法选择早于该日期的日期。
    • end：设置日期选择的结束日期。用户无法选择晚于该日期的日期。

  2. 当前选中日期：

    • selected：设置DatePickerDialog组件当前选中的日期。当弹窗弹出时，该日期将作为默认选中的日期显示。

  3. 时间显示：

    • showTime：设置是否显示时间选项。如果设置为true，则用户可以选择具体的时间（小时和分钟）；如果设置为false，则用户只能选择日期。
    • useMilitaryTime：当showTime为true时，此选项设置时间是否以24小时制显示。

  4. 农历显示：

    • lunar：设置是否显示农历日期。如果设置为true，则日期选择器将同时显示公历和农历日期。
    • lunarSwitch：设置是否显示农历切换开关。如果设置为true，则用户可以在公历和农历之间切换。

  5. 文本样式自定义：

    • textStyle：设置日期选择器中普通选项的文本样式，包括颜色、字号和字体粗细等。
    • disappearTextStyle：设置日期选择器中最上和最下选项的文本样式。
    • selectedTextStyle：设置日期选择器中选中项的文本样式。

  6. 按钮样式自定义：

    • acceptButtonStyle：设置确认按钮的样式，包括按钮类型、样式、角色、文本颜色、字号、字体粗细、背景色、圆角等。
    • cancelButtonStyle：设置取消按钮的样式。

  7. 弹窗位置和偏移：

    • alignment：设置弹窗在竖直方向上的对齐方式，如顶部、底部、居中等。
    • offset：设置弹窗相对alignment所在位置的偏移量，包括水平偏移和垂直偏移。

  8. 遮罩层：

    • maskRect：设置弹窗遮罩层的位置和大小。在遮罩层区域内的事件不透传，在遮罩层区域外的事件会透传。

  9. 回调函数：

    • onDateAccept：点击确认按钮时触发的回调函数。用户选择完日期并点击确认后，此函数将被调用，并传入用户选择的日期作为参数。
    • onCancel：点击取消按钮时触发的回调函数。用户点击取消按钮后，此函数将被调用。
    • onDateChange：选中日期变化时触发的回调函数。每当用户滑动选择器改变选中日期时，此函数将被调用，并传入新的选中日期作为参数。

4.2 使用DatePickerDialog组件的示例

以下是一个使用DatePickerDialog组件的示例代码：

动画.gif

@Entry
@Component
struct Index {
  // 定义一个状态变量，用于存储当前选中的日期
  @State private selectedDate: Date = new Date(); // 当前选中的日期，初始化为当前日期

  build() {
    // 使用Column组件来垂直排列子元素
    Column() {
      // 显示当前选中的日期，使用Text组件
      Text(this.selectedDate.toLocaleString()) // 将日期转换为本地字符串格式并显示

      // 定义一个按钮，点击后弹出日期选择对话框
      Button("选择日期")
        .onClick(() => {
          // 获取UI上下文，并调用showDatePickerDialog方法显示日期选择对话框
          this.getUIContext().showDatePickerDialog({
            start: new Date('1970-01-01'), // 可选日期的起始时间，设置为1970年1月1日
            end: new Date('2100-12-31'), // 可选日期的结束时间，设置为2100年12月31日
            selected: this.selectedDate, // 当前选中的日期，初始化为组件的状态变量
            showTime: true, // 是否显示时间选项，设置为true表示显示小时和分钟
            useMilitaryTime: false, // 是否是24小时制，设置为false表示使用12小时制
            lunar: false, // 是否显示农历，设置为false表示不显示农历
            lunarSwitch: true, // 是否显示农历切换开关，设置为true表示显示切换开关
            textStyle: { color: Color.Red, font: { size: '18fp', weight: 400 } }, // 普通选项的文本样式，设置为红色字体，大小为18fp，字重为400
            disappearTextStyle: { color: Color.Green, font: { size: '22fp', weight: 400 } }, // 最上和最下选项的文本样式，设置为绿色字体，大小为22fp，字重为400
            selectedTextStyle: { color: Color.Blue, font: { size: '14fp', weight: 400 } }, // 选中项的文本样式，设置为蓝色字体，大小为14fp，字重为400
            acceptButtonStyle: { // 确认按钮的样式
              type: ButtonType.Normal, // 按钮类型，设置为普通按钮
              style: ButtonStyleMode.NORMAL, // 按钮样式模式，设置为正常模式
              role: ButtonRole.NORMAL, // 按钮角色，设置为普通角色
              fontColor: Color.White, // 按钮字体颜色，设置为白色
              fontSize: 24, // 按钮字体大小，设置为24
              fontWeight: 400, // 按钮字体字重，设置为400
              backgroundColor: Color.Orange, // 按钮背景颜色，设置为橙色
              borderRadius: 20 // 按钮圆角半径，设置为20
            },
            onDateAccept: (value) => {
              // 点击确认按钮时触发的回调函数
              this.selectedDate = value; // 更新状态变量为选中的日期
              console.info("DatePickerDialog:onDateAccept() " + value.toString()); // 输出选中的日期到控制台
            },
            onCancel: () => {
              // 点击取消按钮时触发的回调函数
              console.info("DatePickerDialog:onCancel()"); // 输出取消信息到控制台
            },
            onDateChange: (value) => {
              // 选中日期变化时触发的回调函数
              console.info("DatePickerDialog:onDateChange() " + value.toString()); // 输出变化后的日期到控制台
            }
          });
        });
    }
    .width('100%') // 设置外层容器的宽度为100%
    .height('100%') // 设置外层容器的高度为100%
    .justifyContent(FlexAlign.Center) // 设置内容在垂直方向上居中对齐
    .alignItems(HorizontalAlign.Center); // 设置子元素在水平方向上居中对齐
  }
}

4.3 使用DatePickerDialog组件的注意事项

  • 日期范围设置：确保start日期早于或等于end日期，否则可能导致用户无法选择任何日期。
  • 样式自定义：DatePickerDialog组件提供了丰富的样式自定义选项，开发者可以根据应用需求进行合适的设置。但需要注意的是，过度自定义可能会影响界面的整体美观度和一致性。
  • 状态管理：使用@State变量来管理DatePickerDialog组件的选中日期，确保在日期变化时能够及时更新应用状态。
  • 弹窗显示时机：开发者需要合理控制DatePickerDialog弹窗的显示时机，避免在用户界面操作频繁时弹出，影响用户体验。
avatar
文章
阅读
粉丝