SeekBar - Amazon Vega Docs

SeekBar组件是一个交互式进度控件，提供媒体导航功能。通过提供电视媒体播放器中常用的高级播放控制功能，它的运用不仅限于基本进度条。

使用场景

SeekBar组件非常适合需要媒体导航的应用，例如：

视频/音频播放器
时间轴拖动
内容预览系统
进度跟踪接口
交互式媒体导航

该组件通过属性来实现自定义，允许您针对特定用例自定义行为和外观，同时保持一致和直观的用户体验。

用户体验

核心属性

`currentValue`

必需内容进度的当前位置值。

<SeekBar currentValue={300} totalValue={1200} />

类型 number 必须介于0和totalValue（含）之间。

`totalValue`

必需搜索栏的最大值，表示总持续时间或范围。

<SeekBar currentValue={0} totalValue={300} />

类型 number

`step`

使用方向键导航时要递增或递减的值。值可以是正数或负数。

<SeekBar step={1} currentValue={0} totalValue={120} />

类型 number 默认值 10

交互控制属性

`disabled`

启用或禁用具有遥控器事件的所有用户交互。

<SeekBar disabled={true} currentValue={0} totalValue={1200} />

类型 boolean\ 默认值 false

`disabledWhenNotFocused`

如果为true，则在未聚焦搜索栏时禁用用户交互。此属性对于焦点管理至关重要的电视界面非常重要，如果您希望组件自动处理焦点管理而不是在应用代码中手动处理它，则此属性是理想的选择。

<SeekBar disabledWhenNotFocused={true} currentValue={0} totalValue={1200} />

类型 boolean\ 默认值 false

`disableThumbnail`

启用或禁用预览缩略图功能。要显示缩略图，请使用thumbnailImageSource属性。

<SeekBar disableThumbnail={true} currentValue={0} totalValue={1200} />

类型 boolean\ 默认值 false

`trapFocus`

控制SeekBar组件的焦点导航行为。

<SeekBar trapFocus={true} currentValue={0} totalValue={1200} />

类型 boolean\ 默认值 false 启用后，会将向左或向右方向键导航的焦点限制在SeekBar中。向上或向下导航到SeekBar上方或下方的控件仍然可用。

`partialDisablingConfiguration`

用于控制要禁用哪些特定的用户交互。

<SeekBar
  partialDisablingConfiguration={{
    skipBackward: true,
    skipForward: true,
    playPause: false,
  }}
  currentValue={0}
  totalValue={1200}
/>

Type PartialDisablingConfiguration 如果提供，此属性将覆盖全局disabled和disabledWhenNotFocused设置。该属性仅用于禁用特定按钮。例如，您可以禁用skipForward >>或skipBackward <<，同时保持搜索行为（right和left方向键）或移除自定义处理的默认行为。可用操作：

playPause
skipBackward
skipForward
left
right
select
back

当您提供PartialDisablingConfiguration对象时，操作的所有默认值都将设置为false。注意禁用back按钮仅会影响SeekBar的内部使用，不会影响外部导航或组件外部的其他交互。

回调属性

`onValueChange`

当滑动时如滑块拇指值发生变化则触发回调。

<SeekBar
  onValueChange={(value) => console.log("新值：", value)}
  currentValue={0}
  totalValue={1200}
/>

类型 (value: number) => void

`onSlidingStart`

滑动交互开始时触发回调。对于方向键，回调会在初始按下向左或向右（按下按键）时触发。

<SeekBar
  onSlidingStart={() => console.log("滑动已开始")}
  currentValue={0}
  totalValue={1200}
/>

类型：() => void

`onSlidingEnd`

滑动交互结束时触发回调。对于方向键导航，在松开向左或向右方向键时（按键弹起）触发。

<SeekBar
  onSlidingEnd={() => console.log("滑动已结束")}
  currentValue={0}
  totalValue={1200}
/>

类型 () => void | undefined

`onRewindPress`

当用户触发快退操作时触发回调。默认情况下，按下此按钮会模拟向后搜索内容的长按交互。对于遥控器<<中的快退按钮，在松开按键时（按键弹起）触发。

<SeekBar
  onRewindPress={() => console.log("按下快退键")}
  currentValue={0}
  totalValue={1200}
/>

类型 () => void 相关属性：longPressIntervalDuration、stepMultiplierFactor、enableSkipForwardBackwardAcceleration。

`onFastForwardPress`

当用户触发快进操作时触发回调。默认情况下，按下此按钮会模拟向前搜索内容的长按交互。对于遥控器 >>中的快进按钮，在松开按键时（按键弹起）触发。

<SeekBar
  onFastForwardPress={() => console.log("按下快进键")}
  currentValue={0}
  totalValue={1200}
/>

类型 () => void 相关属性：longPressIntervalDuration、stepMultiplierFactor、enableSkipForwardBackwardAcceleration。

`onPress`

当用户按下遥控器上的选择按钮时触发回调。

<SeekBar
  onPress={(thumbValue) => console.log("按下位置：", thumbValue)}
  currentValue={0}
  totalValue={1200}
/>

类型 (seekBarThumbValue: number) => void

`onPlayPause`

当用户按下遥控器上的播放或暂停按钮时触发回调。

<SeekBar
  onPlayPause={(thumbValue) => console.log("播放/暂停位置：", thumbValue)}
  currentValue={0}
  totalValue={1200}
/>

类型 (seekBarThumbValue: number) => void

`onFocus`

当搜索栏获得焦点时触发回调。

<SeekBar
  onFocus={() => console.log("聚焦于SeekBar")}
  currentValue={0}
  totalValue={1200}
/>

类型 () => void

`onBlur`

当搜索栏失去焦点时触发回调。

<SeekBar
  onBlur={() => console.log("SeekBar变模糊")}
  currentValue={0}
  totalValue={1200}
/>

类型 () => void

`onSeekInteractionChange`

在使用方向键进行搜索交互期间触发回调。该事件对象包含指示搜索方向的方向属性：

'forward': 向右方向键导航搜索（初始按下）
'rewind': 向左方向键导航搜索（初始按下）
'fast_forward': 长按向右方向键导航
'fast_rewind': 长按向左方向键导航
null: 在搜索交互结束时发送（当用户在搜索后松开方向键时）

<SeekBar
  onSeekInteractionChange={(event) => {
    switch(event.direction) {
      case 'forward':
        console.log('开始向前搜索');
        break;
      case 'rewind':
        console.log('开始向后搜索');
        break;
      case 'fast_forward':
        console.log('快进');
        break;
      case 'fast_rewind':
        console.log('快退');
        break;
      case null:
        console.log('搜索交互已结束');
        break;
    }
  }}
  currentValue={currentPosition}
  totalValue={totalDuration}
  longPressDelay={300}
/>

类型 (event: InteractionEventPayload) => void

事件序列

onSeekInteractionChange回调在方向键交互期间按特定顺序触发。 向右方向键示例

初始按下（按下按键）：event.direction = 'forward'
如果保持按下的时间足够长（超出longPressDelay）：event.direction = 'fast_forward'
释放时（按键弹起）：event.direction = null

向左方向键示例

初始按下（按下按键）：event.direction = 'rewind'
如果保持按下的时间足够长（超出longPressDelay）：event.direction = 'fast_rewind'
释放时（按键弹起）：event.direction = null

完整事件流程

长按交互的完整顺序是：

['forward' or 'rewind'] → ['fast_forward' or 'fast_rewind'] → [null]

短按时（快速点击），顺序为：

['forward' or 'rewind'] → [null]

视觉自定义属性

`markers`

在搜索栏上显示的标记数组。支持三种类型的标记：

// ReactNode标记 - 自定义组件
<SeekBar
  markers={[
    {
      position: 200,
      node: () => (
        <Text style={{color: 'white', marginTop: 20}}>Description</Text>
      ),
    },
    {
      position: 30,
      node: (
        <View style={{width: 15, height: 15, backgroundColor: 'red'}} />
      ),
    },
  ]}
  currentValue={0}
  totalValue={1200}
/>

// 点标记 - 分割条形的彩色点（常用于广告）
<SeekBar
  markers={[
    { position: 30, pointColor: '#FF0000' },
    { position: 60, pointColor: '#00FF00' }
  ]}
  currentValue={0}
  totalValue={1200}
/>

// 分段标记 - 将条形分隔成段
<SeekBar
  markers={[
    { position: 30, type: 'break' },
    { position: 60, type: 'break' }
  ]}
  currentValue={0}
  totalValue={1200}
/>

// 点和分段组合标记
<SeekBar
  markers={[
    { position: 20, pointColor: 'red' },
    { position: 40, type: 'break' },
    { position: 120, pointColor: 'red' },
    { position: 190, type: 'break' }
  ]}
  currentValue={0}
  totalValue={1200}
/>

类型 ReactNodeMarker[] | BreakMarker[] 标记类型

ReactNode标记：用于复杂视觉元素的自定义React组件
点标记：将搜索栏分隔成段的彩色点，通常用于广告标记
分段标记：将条形分隔为不同段的分隔标记

限制

ReactNode标记不能与点或分段标记组合
点和分段标记可以一起使用
点标记之间应至少有3%的间距
点标记最多只能在搜索栏总宽度的97%内放置

示例1 Point markers 屏幕截图，示出了点标记，其标出了广告在拖动条上的位置。

示例2 分段标记在拖动条上显示视频片段标记的屏幕截图。在此示例中，有三个示例标记为第一印象、内部和外部印象以及机械印象。

`displayAboveThumb`

要在搜索栏滑块拇指上方呈现的自定义内容。您可以使用渲染函数或React Node。渲染函数接收属性：{ mode, stepValue, multiplier, focused }。

// 静态内容
<SeekBar
    displayAboveThumb={
      <View
        style={{ alignItems: 'center', justifyContent: 'center', height: 50, width: 100 }}>
        <Text style={{color: 'white'}}>Seeking...</Text>
      </View>
    }
    currentValue={0}
    totalValue={1200}
/>

// 动态内容
<SeekBar
  displayAboveThumb={({ mode, stepValue, multiplier }) => (
    <View
      style={{ alignItems: 'center', justifyContent: 'center', height: 50, width: 100 }}>
      <Text style={{color: 'white'}}>
        {`${mode} `}
        {stepValue * multiplier}s
      </Text>
    </View>
  )}
  currentValue={0}
  totalValue={1200}
/>

Type DisplayAboveThumbType | React.ReactNode

`displayBelowThumb`

要在搜索栏滑块拇指下方呈现的自定义内容。您可以使用渲染函数或React Node。

<SeekBar
  displayBelowThumb={<Text>直播</Text>}
  currentValue={0}
  totalValue={1200}
/>

类型 (() => React.ReactNode) | React.ReactNode

`thumbIcon`

自定义的滑块拇指图标组件。您可以使用渲染函数或React Node。渲染函数接收{ focused }属性。

// 静态图标
<SeekBar
  thumbIcon={<View style={{ width: 20, height: 20, backgroundColor: 'yellow', borderRadius: 10 }} />}
  currentValue={0}
  totalValue={1200}
/>

// 动态图标
<SeekBar
  disabledWhenNotFocused={true}
  thumbIcon={({ focused }) => (
    <View style={{
      width: focused ? 24 : 20,
      height: focused ? 24 : 20,
      backgroundColor: focused ? 'yellow' : 'gray',
      borderRadius: 12
    }} />
  )}
  currentValue={0}
  totalValue={1200}
/>

类型 ((props: ThumbIconProps) => React.ReactNode) | React.ReactNode 注意当使用带有focused回调参数的动态图标时，请设置disabledWhenNotFocused={true}以实现正确的焦点行为。

`currentValueIndicatorColor`

进度指示器已填充部分的颜色。您可以使用静态颜色或根据焦点状态返回颜色的函数。

<SeekBar
  currentValueIndicatorColor="#FF0000"
  currentValue={0}
  totalValue={1200}
/>

// 基于焦点的动态颜色
<SeekBar
  disabledWhenNotFocused
  currentValueIndicatorColor={(isFocused) => isFocused ? '#FF0000' : '#888888'}
  currentValue={0}
  totalValue={1200}
/>

类型 ColorValue | ((isFocused: boolean) => ColorValue)

`barTrackColor`

滑块未填充部分的颜色。

<SeekBar barTrackColor="#626262" currentValue={0} totalValue={1200} />

类型 ColorValue

`segmentColors`

分段的颜色配置。

<SeekBar
  segmentColors={{
    0: { baseColor: "lightgreen", seekColor: "limegreen", progressedColor: "green", },
    1: { baseColor: "pink", seekColor: "brown", progressedColor: "red" },
  }}
  markers={[
    { position: 200, type: 'point', pointColor: 'red' },
    { position: 400, type: 'break' },
  ]}
  currentValue={0}
  totalValue={1200}
/>

类型SegmentColorsConfig

interface SegmentColorsConfig {
  [index: number]: {
    baseColor?: ColorValue; // 未交互时的基色
    seekColor?: ColorValue; // 进行搜索时的颜色
    progressedColor?: ColorValue; // 进度颜色
  };
}

分段颜色的配置对象，允许按索引自定义特定分段。您可以为任何分段指定颜色，不一定按顺序指定，也可以跳过不需要自定义颜色的分段。注意如果启用了动画，则不会应用segmentColors seekColor。如果没有分隔标记，则分段颜色将不适用于搜索栏。

用法示例

黄色分段颜色

  const segmentColors: SegmentColorsConfig = {
    2: {
      progressedColor: '#ffff00',
      seekColor: '#797926',
      baseColor: '#2e2e00',
    },
  };

红色分段颜色

  const segmentColors: SegmentColorsConfig = {
    0: {
      progressedColor: '#ff0000',
      seekColor: '#811e1e',
      baseColor: '#432f2f',
    },
    1: {
      baseColor: '#727272',
    },
  };

样式属性

`barStyle`

滑块的样式覆盖项。

<SeekBar
  barStyle={{ height: 8, borderRadius: 4 }}
  currentValue={0}
  totalValue={1200}
/>

类型 StyleProp<ViewStyle>

`currentValueIndicatorStyle`

进度指示器的样式覆盖项。

<SeekBar
  currentValueIndicatorStyle={{ backgroundColor: "#FF0000" }}
  currentValue={0}
  totalValue={1200}
/>

类型 StyleProp<ViewStyle>

`timeShiftIndicatorStyle`

timeshift指示器的样式覆盖项。

<SeekBar
  timeShiftIndicatorStyle={{ backgroundColor: "#00FF00", opacity: 0.7 }}
  currentValue={0}
  totalValue={1200}
/>

类型 StyleProp<ViewStyle>

缩略图属性

`thumbnailStyle`

缩略图容器的样式覆盖项。

<SeekBar
  thumbnailStyle={{ borderRadius: 8, borderWidth: 2 }}
  currentValue={0}
  totalValue={1200}
/>

类型 StyleProp<ViewStyle>

`thumbnailImageSource`

缩略图预览的图像来源。接受动态来源的渲染属性。

// 静态来源
<SeekBar
  thumbnailImageSource={{ uri: 'https://example.com/thumbnail.jpg' }}
  currentValue={0}
  totalValue={1200}
/>

// 动态来源
<SeekBar
  thumbnailImageSource={(thumbValue) => ({ uri: `https://example.com/thumb_${thumbValue}.jpg` })}
  currentValue={0}
  totalValue={1200}
/>

类型 ((thumbValue: number) => ImageSourcePropType) | ImageSourcePropType

`thumbnailImageStyle`

缩略图的样式覆盖项。

<SeekBar
  thumbnailImageStyle={{ width: 120, height: 80 }}
  currentValue={0}
  totalValue={1200}
/>

类型 StyleProp<ImageStyle>

`thumbnailImageResizeMode`

缩略图的大小调整模式。

<SeekBar
  thumbnailImageResizeMode="contain"
  thumbnailImageSource={{ uri: "https://example.com/thumbnail.jpg" }}
  currentValue={0}
  totalValue={1200}
/>

类型 ImageResizeMode\ 默认值 "cover"

`thumbnailLabel`

要在缩略图中显示的标签。接受动态内容的渲染属性。

// 静态标签
<SeekBar
  thumbnailLabel="Preview"
  thumbnailImageSource={{ uri: 'https://example.com/thumbnail.jpg' }}
  currentValue={0}
  totalValue={1200}
/>

// 动态标签
<SeekBar
  thumbnailLabel={thumbValue => `${thumbValue} sec`}
  currentValue={0}
  totalValue={1200}
/>

类型 ((thumbValue: number) => string) | string

`thumbnailLabelTextStyle`

缩略图标签文本的样式覆盖项。

<SeekBar
  thumbnailLabelTextStyle={{ color: "white", fontSize: 14 }}
  thumbnailLabel="Preview"
  currentValue={0}
  totalValue={1200}
/>

类型 StyleProp<TextStyle>

`thumbnailLabelContainerStyle`

缩略图标签容器的样式覆盖项。

<SeekBar
  thumbnailLabelContainerStyle={{
    backgroundColor: "rgba(0,0,0,0.7)",
    padding: 4,
  }}
  thumbnailLabel="Preview"
  currentValue={0}
  totalValue={1200}
/>

类型 StyleProp<ViewStyle>

交互计时属性

`longPressIntervalDuration`

方向键长按操作的间隔持续时间（以毫秒为单位）。控制按住方向键时搜索操作更新的频率。建议保留默认值，因为它与遥控器发送的事件频率相匹配。

<SeekBar longPressIntervalDuration={400} currentValue={0} totalValue={1200} />

类型 number\ 默认值 200 示例1 长按间隔持续时间：200 示例2 长按间隔持续时间：400

`longPressDelay`

用户触发长按操作需经过的时间（以毫秒为单位）。对于方向键输入，用户按住左键或右键可触发长按。

<SeekBar longPressDelay={500} currentValue={0} totalValue={1200} />

类型 number\ 默认值 250 示例1 长按延迟：200 示例2 长按延迟：3000

keyDownThrottleDelay

限制按键按下事件的延迟。有助于防止在快速按键时进行过度的事件处理。

<SeekBar keyDownThrottleDelay={100} currentValue={0} totalValue={1200} />

类型 number\ 默认值 0

animationDuration

当enableAnimations为true时，动画的持续时间（以毫秒为单位）。控制滑块拇指和进度过渡所需的时间。为了在长按和快进或快退交互中获得更好的动画感知，建议在longPressIntervalDuration和animationDuration中使用相同的值。如果enableAnimations为false，则不起作用。

<SeekBar
  animationDuration={200}
  enableAnimations={true}
  currentValue={0}
  totalValue={1200}
/>

类型 number\ 默认值 200

搜索行为属性

maxStepValue

长按期间渐进搜索的最大步长值。限制加速期间搜索步长的变大程度。

<SeekBar
  maxStepValue={50}
  currentValue={0}
  totalValue={3000}
  enableLongPressAcceleration
/>

类型 number\ 默认值 160

`stepMultiplierFactor`

渐进式搜索步长的乘法系数。确定加速期间搜索速度的增加速度。step值将乘以该系数。仅在启用了enableLongPressAcceleration或enableSkipForwardBackwardAcceleration时适用。

<SeekBar
  stepMultiplierFactor={2}
  enableLongPressAcceleration
  currentValue={0}
  totalValue={1200}
/>

类型 number\ 默认值 1 示例

stepMultiplierFactor={1}：持续加速 - 1x → 2x → 3x → 4x, ..
stepMultiplierFactor={2}：快速加速 - 随着时间推移速度加倍1x → 2x → 4x → 8x, ..
stepMultiplierFactor={3}：快速加速 - 随着时间推移速度达到三倍1x → 3x → 6x → 12x, ..

`stepMultiplierFactorInterval`

步长乘数之间的时间间隔增加。控制方向键向左或向右长按加速期间搜索速度的增大频率（以毫秒为单位）。stepMultiplierFactor处理速度的提高。

<SeekBar
  stepMultiplierFactorInterval={1500}
  stepMultiplierFactor={1}
  enableLongPressAcceleration
  currentValue={0}
  totalValue={1200}
/>

类型 number\ 默认值 1000

`lowerSeekLimit`

搜索栏范围内的最小可搜索值。防止搜索到该值之前的位置。

<SeekBar lowerSeekLimit={300} currentValue={0} totalValue={1200} />

类型 number\ 默认值 0

`upperSeekLimit`

搜索栏范围内的最大可搜索值。防止搜索到该值之后的位置。

<SeekBar upperSeekLimit={600} currentValue={0} totalValue={1200} />

类型 number\ 默认值 totalValue

`enableLongPressAcceleration`

启用长按交互期间的渐进加速。启用后，根据stepMultiplierFactor和stepMultiplierFactorInterval设置，步长乘数随时间推移而增大（例如，1x、2x、3x、4x）。step值乘以当前乘数。这会影响按住左或右按键或按钮时的搜索速度。

<SeekBar
  enableLongPressAcceleration={true}
  stepMultiplierFactor={1}
  currentValue={0}
  totalValue={1200}
/>

类型 boolean\ 默认值 false

`enableSkipForwardBackwardAcceleration`

在向前或向后跳过交互时启用渐进加速。启用后，连续向前跳转 (>>) 或向后跳转 (<<) 按钮会根据stepMultiplierFactor设置增加步长乘数（例如，1x、2x、3x、4x、5x）。step值乘以当前乘数。

<SeekBar
  enableSkipForwardBackwardAcceleration={true}
  stepMultiplierFactor={1}
  currentValue={0}
  totalValue={1200}
/>

类型 boolean\ 默认值 false

`enableAnimations`

启用或禁用搜索栏滑块拇指和进度动作的动画。当为true时，搜索栏会顺畅地以动画显示位置变化，并且不应用timeShiftIndicatorStyle属性。如果为false，则位置会立即发生变化，所有视觉元素都将被渲染。

<SeekBar enableAnimations={true} currentValue={0} totalValue={1200} />

类型 boolean\ 默认值 false

类型定义

PartialDisablingConfiguration

interface PartialDisablingConfiguration {
  back?: boolean; // 禁用返回操作
  playPause?: boolean; // 禁用播放/暂停操作
  skipBackward?: boolean; // 禁用向后跳转操作
  skipForward?: boolean; // 禁用向前转跳操作
  right?: boolean; // 禁用向右操作
  left?: boolean; // 禁用向左操作
  select?: boolean; // 禁用选择操作
}

InteractionEventPayload

type InteractionEventPayload = {
  direction: "forward" | "rewind" | "fast_forward" | "fast_rewind" | null;
};

DisplayAboveThumbProps

type DisplayAboveThumbProps = {
  mode: SeekMode; // 当前搜索模式
  stepValue: number; // 搜索增量的步长值
  multiplier: number; // 加速搜索的当前乘数系数
  focused: boolean; // 搜索栏是否有焦点
};

SegmentColorsConfig

interface SegmentColorsConfig {
  [index: number]: {
    baseColor?: ColorValue; // 未交互时的基色
    seekColor?: ColorValue; // 进行搜索时的颜色
    progressedColor?: ColorValue; // 进度颜色
  };
}

ThumbIconProps

type ThumbIconProps = {
  focused: boolean; // 搜索栏是否有焦点
};

SeekMode

type SeekMode =
  | "forward" // 普通向前搜索
  | "idle_forward" // 快进搜索状态但未主动搜索
  | "rewind" // 普通快退搜索
  | "idle_rewind" // 快退搜索状态但未主动搜索
  | "fast_forward" // 加速快进搜索
  | "fast_rewind" // 加速快退搜索
  | undefined;

术语表

以下列表包含本文档中使用的重要术语。 滑块拇指 - SeekBar上的一个交互式元素，让用户可以设置当前值 (currentValue)。默认情况下，滑块拇指放置在SeekBar的currentValue上。如果用户与之互动，则滑块拇指的位置会相应改变。时移 - 用滑块拇指向前或向后推移的操作。 时移指示器 - 该指示器表示用户移动滑块拇指时currentValue和当前滑块拇指位置之间的间隔。 当前值指示器 - 这是SeekBar中表示当前值的填充部分（进度指示器）。 搜寻缩略图 - 基于图像的缩略图组件，通常显示在SeekBar滑块拇指上方，该组件显示图像预览和缩略图标签等内容。标记 - 在整个SeekBar中水平布置的自定义React节点或视图。有三种类型：ReactNode标记（自定义组件）、点标记（彩色点）和分段标记（分隔标记）。 点标记 - 将搜索栏分成多个分段的彩色标记，通常用于广告标记。不能与ReactNode标记组合。 分段标记（分隔标记）- 将条形划分为不同分段的标记。可以与点标记组合。 ReactNode标记 - 用于复杂视觉元素的自定义React组件。不能与点或分段标记组合。长按 - 当用户按住方向键按钮（向左或向右）时，触发加速搜索行为。 向前跳转/向后跳转 - 遥控器按钮（>>和<<），可模拟用于搜索内容的长按交互。 方向键导航 - 用于搜索和滑块拇指定位的向左或向右方向键控件。 焦点限制 - 启用后，在允许向上或向下导航的同时，防止焦点向左或向右移动到超出SeekBar的位置。加速 - 长按或连续跳转操作时速度逐渐增加，由stepMultiplierFactor控制。 搜索限制 - 将可搜索位置限制在总范围内的边界（lowerSeekLimit或upperSeekLimit）。分段 - 通过分隔符标记创建的搜索栏的各个部分，每个部分都有可自定义的颜色和视觉属性。

​使用场景

​用户体验

​核心属性

​currentValue

​totalValue

​step

​交互控制属性

​disabled

​disabledWhenNotFocused

​disableThumbnail

​trapFocus

​partialDisablingConfiguration

​回调属性

​onValueChange

​onSlidingStart

​onSlidingEnd

​onRewindPress

​onFastForwardPress

​onPress

​onPlayPause

​onFocus

​onBlur

​onSeekInteractionChange

​事件序列

​完整事件流程

​视觉自定义属性

​markers

​displayAboveThumb

​displayBelowThumb

​thumbIcon

​currentValueIndicatorColor

​barTrackColor

​segmentColors

​用法示例

​样式属性

​barStyle

​currentValueIndicatorStyle

​timeShiftIndicatorStyle

​缩略图属性

​thumbnailStyle

​thumbnailImageSource

​thumbnailImageStyle

​thumbnailImageResizeMode

​thumbnailLabel

​thumbnailLabelTextStyle

​thumbnailLabelContainerStyle

​交互计时属性

​longPressIntervalDuration

​longPressDelay

​keyDownThrottleDelay

​animationDuration

​搜索行为属性

​maxStepValue

​stepMultiplierFactor

​stepMultiplierFactorInterval

​lowerSeekLimit

​upperSeekLimit

​enableLongPressAcceleration

​enableSkipForwardBackwardAcceleration

​enableAnimations

​类型定义

​PartialDisablingConfiguration

​InteractionEventPayload

​DisplayAboveThumbProps

​SegmentColorsConfig

​ThumbIconProps

​SeekMode

​术语表

使用场景

用户体验

核心属性

`currentValue`

`totalValue`

`step`

交互控制属性

`disabled`

`disabledWhenNotFocused`

`disableThumbnail`

`trapFocus`

`partialDisablingConfiguration`

回调属性

`onValueChange`

`onSlidingStart`

`onSlidingEnd`

`onRewindPress`

`onFastForwardPress`

`onPress`

`onPlayPause`

`onFocus`

`onBlur`

`onSeekInteractionChange`

事件序列

完整事件流程

视觉自定义属性

`markers`

`displayAboveThumb`

`displayBelowThumb`

`thumbIcon`

`currentValueIndicatorColor`

`barTrackColor`

`segmentColors`

用法示例

样式属性

`barStyle`

`currentValueIndicatorStyle`

`timeShiftIndicatorStyle`

缩略图属性

`thumbnailStyle`

`thumbnailImageSource`

`thumbnailImageStyle`

`thumbnailImageResizeMode`

`thumbnailLabel`

`thumbnailLabelTextStyle`

`thumbnailLabelContainerStyle`

交互计时属性

`longPressIntervalDuration`

`longPressDelay`

keyDownThrottleDelay

animationDuration

搜索行为属性

maxStepValue

`stepMultiplierFactor`

`stepMultiplierFactorInterval`

`lowerSeekLimit`

`upperSeekLimit`

`enableLongPressAcceleration`

`enableSkipForwardBackwardAcceleration`

`enableAnimations`

类型定义

PartialDisablingConfiguration

InteractionEventPayload

DisplayAboveThumbProps

SegmentColorsConfig

ThumbIconProps

SeekMode

术语表