步进器#

Stepper 是一个用于执行递增和递减操作的控件。它允许用户通过点击“+”或“-”按钮来增加或减少数值。该组件也支持触发编辑状态变化的回调函数。

属性#

1. title（可选，字符串）#

• 描述：指定步进器的标题，通常用于说明步进器的目的。
• 类型：string
• 示例：

  1<Stepper 
  2  title="Adjust Volume" 
  3  onIncrement={handleIncrement} 
  4  onDecrement={handleDecrement} 
  5/>

2. children（可选，虚拟节点）#

• 描述：用于描述步进器的目的的视图内容。可以使用多个子视图来构建控件的外观。此属性和 title 属性为互斥关系，只能选择其一。
• 类型：(VirtualNode | undefined | null | (VirtualNode | undefined | null)[])[] | VirtualNode
• 示例：

  1<Stepper
  2  onIncrement={handleIncrement} 
  3  onDecrement={handleDecrement}
  4>
  5  <Text>Adjust Volume</Text>
  6</Stepper>

3. onIncrement（必选，回调函数）#

• 描述：当用户点击或触摸“+”按钮时，执行此函数。
• 类型：() => void
• 示例：

  1const handleIncrement = () => {
  2  console.log("Incremented");
  3}
  4
  5<Stepper 
  6  onIncrement={handleIncrement} 
  7  onDecrement={handleDecrement} 
  8/>

4. onDecrement（必选，回调函数）#

• 描述：当用户点击或触摸“-”按钮时，执行此函数。
• 类型：() => void
• 示例：

  1const handleDecrement = () => {
  2  console.log("Decremented")
  3}
  4
  5<Stepper onIncrement={handleIncrement} onDecrement={handleDecrement} />

5. onEditingChanged（可选，回调函数）#

• 描述：当编辑开始和结束时调用的函数。例如，在 iOS 上，用户长按步进器的增减按钮时，会触发 onEditingChanged 回调函数，表示编辑状态的变化。
• 类型：(value: boolean) => void
• 示例：

  1const handleEditingChanged = (isEditing: boolean) => {
  2  console.log("Editing started:", isEditing)
  3}
  4
  5<Stepper 
  6  onIncrement={handleIncrement} 
  7  onDecrement={handleDecrement} 
  8  onEditingChanged={handleEditingChanged} 
  9/>

示例代码#

以下是一个完整的示例，展示了如何使用 Stepper 组件：

1const handleIncrement = () => {
2  console.log("Volume increased")
3}
4
5const handleDecrement = () => {
6  console.log("Volume decreased")
7}
8
9const handleEditingChanged = (isEditing: boolean) => {
10  console.log("Editing started:", isEditing)
11}
12
13<Stepper
14  title="Volume Control"
15  onIncrement={handleIncrement}
16  onDecrement={handleDecrement}
17  onEditingChanged={handleEditingChanged}
18/>

注意事项#

• title 和 children 属性是互斥的。只能使用一个来描述步进器的目的。
• onEditingChanged 回调函数是可选的，只在支持编辑状态的情况下触发，例如长按按钮时。

小结#

Stepper 控件提供了一个简单的接口来实现递增和递减操作，支持在用户交互时触发回调。通过配置 title 或 children 属性来指定控件的目的，并且可以使用 onIncrement 和 onDecrement 函数定义按钮点击后的行为。