IBest-UI

Appearance

PickerGroup 选择器组 ​

介绍 ​

用于结合多个 Picker 选择器组件，在一次交互中完成多个值的选择。

PickerGroup 中可以放置以下组件：

• Picker
• DatePicker
• TimePicker
• 其他基于 Picker 封装的自定义组件

TIP

阅读该组件文档前请确保已认真阅读快速上手章节的每一个字。

引入 ​

ts
import { IBestPickerGroup } from "@ibestservices/ibest-ui";

代码演示 ​

基础用法 ​

基础用法

TIP

通过绑定 groupId 属性后, PickerGroup 会代替子组件来渲染统一的顶部栏。

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State groupId: string = "1"
  @State tabs: string[] = ["选择地点", "选择星期"]
  @State options1: IBestPickerOption[] = [
    { text: '南京', value: '南京' },
    { text: '苏州', value: '苏州' },
    { text: '常州', value: '常州' },
    { text: '扬州', value: '扬州' },
    { text: '镇江', value: '镇江' }
  ]
  @State options2: IBestPickerOption[] = [
    { text: '周一', value: '周一' },
    { text: '周二', value: '周二' },
    { text: '周三', value: '周三' },
    { text: '周四', value: '周四' },
    { text: '周五', value: '周五' }
  ]
  @State selectValue1: string[] = []
  @State selectValue2: string[] = []
  build() {
    Column(){
      IBestPickerGroup({
        title: "选择地点时间",
        tabs: this.tabs,
        onConfirm: () => {
          IBestToast.show({
            message: `${this.selectValue1[0]} ${this.selectValue2[0]}`
          })
        }
      }){
        IBestPicker({
          groupId: this.groupId,
          options: this.options1,
          value: $selectValue1
        })
        IBestPicker({
          groupId: this.groupId,
          options: this.options2,
          value: $selectValue2
        })
      }
    }
  }
}

下一步按钮 ​

下一步按钮

TIP

通过设置 nextStepText 属性，可以自定义右侧按钮文案, 方便用户按步骤选择, 当切到最后一个标签时, 下一步 变为确认。

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State groupId: string = "1"
  @State tabs: string[] = ["选择地点", "选择星期"]
  @State options1: IBestPickerOption[] = [
    { text: '南京', value: '南京' },
    { text: '苏州', value: '苏州' },
    { text: '常州', value: '常州' },
    { text: '扬州', value: '扬州' },
    { text: '镇江', value: '镇江' }
  ]
  @State options2: IBestPickerOption[] = [
    { text: '周一', value: '周一' },
    { text: '周二', value: '周二' },
    { text: '周三', value: '周三' },
    { text: '周四', value: '周四' },
    { text: '周五', value: '周五' }
  ]
  @State selectValue1: string[] = []
  @State selectValue2: string[] = []
  build() {
    Column(){
      IBestPickerGroup({
        title: "选择地点时间",
        nextStepText: "下一步",
        tabs: this.tabs,
        onConfirm: () => {
          IBestToast.show({
            message: `${this.selectValue1[0]} ${this.selectValue2[0]}`
          })
        }
      }){
        IBestPicker({
          groupId: this.groupId,
          options: this.options1,
          value: $selectValue1
        })
        IBestPicker({
          groupId: this.groupId,
          options: this.options2,
          value: $selectValue2
        })
      }
    }
  }
}

选择日期范围 ​

选择日期范围

TIP

在默认插槽中放置两个 IBestDatePicker, 可以实现选择日期范围的交互效果。

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State groupId: string = "1"
  @State tabs: string[] = ["开始日期", "结束日期"]
  @State selectValue1: string[] = []
  @State selectValue2: string[] = []
  build() {
    Column(){
      IBestPickerGroup({
        title: "选择日期范围",
        nextStepText: "下一步",
        tabs: this.tabs,
        onConfirm: () => {
          IBestToast.show({
            message: `${this.selectValue1[0]} ${this.selectValue2[0]}`
          })
        }
      }){
        IBestDatePicker({
          groupId: this.groupId,
          value: $selectValue1
        })
        IBestDatePicker({
          groupId: this.groupId,
          value: $selectValue2
        })
      }
    }
  }
}

手动切换 ​

手动切换

TIP

通过 currentName 属性，可手动切换标签页。

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State groupId: string = "1"
  @State tabs: string[] = ["选择地点", "选择星期"]
  @State options1: IBestPickerOption[] = [
    { text: '南京', value: '南京' },
    { text: '苏州', value: '苏州' },
    { text: '常州', value: '常州' },
    { text: '扬州', value: '扬州' },
    { text: '镇江', value: '镇江' }
  ]
  @State options2: IBestPickerOption[] = [
    { text: '周一', value: '周一' },
    { text: '周二', value: '周二' },
    { text: '周三', value: '周三' },
    { text: '周四', value: '周四' },
    { text: '周五', value: '周五' }
  ]
  @State selectValue1: string[] = []
  @State selectValue2: string[] = []
  @State currentName: number = 0
  changeName(){
    this.currentName = this.currentName === 0 ? 1 : 0
  }
  build() {
    Column(){
      IBestButton({
        text: `点击切换tab 当前为${this.currentName}`,
        type: "primary",
        buttonSize: "small",
        onBtnClick: () => {
          this.changeName()
        }
      })
      IBestPickerGroup({
        title: "选择地点时间",
        tabs: this.tabs,
        nextStepText: "下一步",
        currentName: this.currentName,
        onTabNameChange: name => {
          this.currentName = name
        },
        onConfirm: () => {
          IBestToast.show({
            message: `${this.selectValue1[0]} ${this.selectValue2[0]}`
          })
        }
      }){
        IBestPicker({
          groupId: this.groupId,
          options: this.options1,
          value: $selectValue1
        })
        IBestPicker({
          groupId: this.groupId,
          options: this.options2,
          value: $selectValue2
        })
      }
    }
  }
}

API ​

@Props ​

参数说明类型默认值
title标题ResourceStr''
tabs顶部标签栏列表ResourceStr[][]
nextStepText下一步按钮文案ResourceStr``
currentName当前标签页名称string0
showToolBar是否显示顶部栏booleantrue
confirmText确认按钮文字ResourceStr确定
cancelText取消按钮文字ResourceStr取消

插槽 ​

插槽名说明类型
defaultBuilder默认插槽CustomBuilder

Events ​

事件名说明事件类型
onConfirm点击确定按钮时触发() => void
onCancel点击取消按钮时触发() => void