HarmonyOS鸿蒙Next学习：实现年选择框

HarmonyOS鸿蒙Next学习：实现年选择框

背景

华为官方提供了DatePicker的弹窗组件，但是在项目中，会使用到仅需要选择年份的需求，因此，使用半模态转场+TextPicker的方式实现年份的选择。

实现如下弹窗

半模态转场（bindSheet）

可以在button上使用.bindSheet属性，实现按钮点击时，页面从底部弹出操作。

bindSheet(isShow?: Optional<boolean>, builder: CustomBuilder, options?: SheetOptions)

• isShow：参数可以控制半模态界面的弹出和关闭，可以使用 $$ 双向绑定变量。
• builder：半模态窗体的弹出界面内容。
• options：页面属性配置。

SheetOptions

示例中使用的属性：

• height：指定半模态窗体弹出的高度，也可以使用SheetSize枚举值来设置，MEDIUM为屏幕高度一半；LARGE为几乎满屏；FIT_CONTENT：自适应内容高度。需要结合detents属性的使用，底部弹窗时，当设置了detents属性，height会无效。
• blurStyle：设置半模态面板的模糊背景。
• showClose：是否显示关闭图标，默认为true。
• title：可以使用系统自带的SheetTitleOptions对象，提供了title和subtitle属性设置主副标题。可以自定义builder来设置对应的内容。
• preferType：页面显示样式。半模态在不同屏幕宽度所支持的显示类型：宽度 < 600vp：底部；600vp <= 宽度 < 840vp：底部、居中； 宽度 >= 840vp：底部、居中、跟手。

相关事件：

• onWillDismiss：页面交互式关闭回调函数，DismissSheetAction.dismiss()函数时在半模态页面需要退出操作时，调用此函数。
• onWillSpringBackWhenDismiss：半模态页面交互式关闭前控制回弹函数。

代码

在button后直接使用

Button("选择年时间")
  .width("80%")
  .onClick(() => {
    this.IsShow = true;
  })
  .bindSheet($$this.IsShow, this.YearBuilder, {
    height: SheetSize.MEDIUM,
    blurStyle: BlurStyle.Thick,
    showClose: true,
    title: this.TitleBuilder,
    preferType: SheetType.CENTER,
    onWillDismiss: (DismissSheetAction: DismissSheetAction) => {
      DismissSheetAction.dismiss()
    },

    onWillSpringBackWhenDismiss: (SpringBackAction: SpringBackAction) => {
      SpringBackAction.springBack()
    },
  })

滑动选择文本内容的组件（TextPicker）

TextPicker的内容和样式配置主要通过TextPickerOptions对象来设置

TextPickerOptions

属性解析：

• range：选择数组集，支持string[]数组、TextPickerRangeContent[]和TextCascadePickerRangeContent[]。TextPickerRangeContent对象支持设置带图标的字符。TextCascadePickerRangeContent对象支持设置子集的字符。
• selected：设置默认选择的索引值，可以使用$$实现双向绑定变量。
• value:设置默认选中的值，但是优先级低于selected。
• defaultPickerItemHeight：可以设置Picker中单个选项的高度。
• disappearTextStyle：设置在显示中最上和最下的选项的文本颜色、字号、字体粗细、字体加粗等字体相关的信息。
• textStyle：设置显示中除最上和最下选项的文本颜色、字号、字体粗细、字体加粗等字体相关的信息。
• selectedTextStyle：设置选中项的文本相关属性。
• selectedIndex：设置默认选中项在数组中的索引值，优先级高于options中的选中值。单列数据选择器使用number类型。多列、多列联动数据选择器使用number[]类型。
• canLoop：设置是否循环滚动。
• divider：是否显示分界线。显示分界线的话，需要设置样式。

方法：

内容滑动时，触发当前回调方法，value值为选中项中的文本值。

onChange(callback: (value: string | string[], index: number | number[]) => void)

TextPicker代码

@Builder
YearBuilder() {
  Column() {
    TextPicker({
      range: this.YearArray
    })
      .defaultPickerItemHeight(60)
      .selectedTextStyle({
        font: {
          weight: FontWeight.Bold
        }
      })
      .canLoop(false)
      .onChange((value) => {
        this.YearSelectValue = value as string;
      })
  }
  .height("100%")
  .width("100%")
}

完整代码

下面是实现半模态弹窗和TextPicker结合使用代码。

@Entry
@Component
struct DateSelectedPage {
  @State message: string = '';
  @State IsShow: boolean = false;
  YearArray: string[] = ["2018", "2019", "2020", "2021", "2022", "2023", "2024"];
  YearSelectValue: string = this.YearArray[0];

  aboutToAppear(): void {

  }

  @Builder
  YearBuilder() {
    Column() {
      TextPicker({
        range: this.YearArray
      })
        .defaultPickerItemHeight(60)
        .selectedTextStyle({
          font: {
            weight: FontWeight.Bold
          }
        })
        .canLoop(false)
        .onChange((value) => {
          this.YearSelectValue = value as string;
        })
    }
    .height("100%")
    .width("100%")
  }

  @Builder
  TitleBuilder() {
    RelativeContainer() {
      Button("✔")
        .width(38)
        .height(38)
        .backgroundColor("#f4f6f5")
        .fontSize(16)
        .fontColor("#707883")
        .type(ButtonType.Circle)
        .padding(0)
        .alignRules({
          center: { anchor: "__container__", align: VerticalAlign.Center },
          right: { anchor: "__container__", align: HorizontalAlign.End }
        })
        .id("OKButton")
        .onClick(() => {
          this.IsShow = false;
          this.message = `${this.YearSelectValue.toString()} 年`;
        })
      Column() {
        Text("选择")
          .fontSize(18)
        Text("年")
          .fontSize(14)
          .fontColor("#d8d8d8")
      }
      .id("TitleText")
      .alignItems(HorizontalAlign.Start)
      .justifyContent(FlexAlign.SpaceEvenly)
      .height("100%")
      .alignRules({
        left: { anchor: "__container__", align: HorizontalAlign.Start },
        top: { anchor: "__container__", align: VerticalAlign.Top }
      })
      .margin({ left: 20 })
    }
    .width("100%")
    .height("100%")
  }

  build() {
    Column({ space: 15 }) {
      Text(this.message)
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
      Button("选择年时间")
        .width("80%")
        .onClick(() => {
          this.IsShow = true;
        })
        .bindSheet($$this.IsShow, this.YearBuilder, {
          height: SheetSize.MEDIUM,
          blurStyle: BlurStyle.Thick,
          showClose: true,
          title: this.TitleBuilder,
          preferType: SheetType.CENTER,
          onWillDismiss: (DismissSheetAction: DismissSheetAction) => {
            DismissSheetAction.dismiss()
          },

          onWillSpringBackWhenDismiss: (SpringBackAction: SpringBackAction) => {
            SpringBackAction.springBack()
          },
        })

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

总结

上面代码以理解学习为主，希望对两个类型的属性理解和使用可以帮助到大家。

年份的数组列表中，使用的是固定的年份，可以推荐dayjs第三方库来实现年份的处理。