# ListItemWithWidget - 带控件的列表项

## 说明

右侧带控件（开关、按钮、圆形按钮）的列表项组件。支持副标题自定义渲染和右侧完全自定义。

## 属性

| 属性 | 说明 | 类型 | 默认值 | 必填 |
|------|------|------|--------|------|
| **widgetType** | 右侧控件类型 | `'switch' \| 'button' \| 'circularButton' \| 'custom'` | - | 否 |
| **title** | 标题 | `string` | - | 是 |
| **subtitle** | 副标题 | `string \| ReactElement<SubtitleGroupProps>` | - | 否 |
| **checked** | 开关状态 | `boolean` | - | 否 |
| **disabled** | 禁用状态 | `boolean` | `false` | 否 |
| **onPress** | 点击回调 | `() => void` | - | 否 |
| **onLongPress** | 长按回调 | `() => void` | - | 否 |
| **delayLongPress** | 长按延迟 | `number` | - | 否 |
| **onChange** | 开关切换回调 | `(val: boolean) => void` | - | 是 |
| **colorType** | 色系 | `ColorType` | - | 否 |
| **leadingIcon** | 左侧图标 | `ReactElement` | - | 否 |
| **customRender** | 自定义渲染 | `ReactElement` | - | 否 |
| **buttonOption** | 按钮选项 | `ButtonProps` | - | 否 |
| **switchOption** | 开关选项 | `SwitchProps` | - | 否 |
| **circularButtonOption** | 圆形按钮选项 | `CircularButtonProps` | - | 否 |

## 使用示例

```tsx
import { ListItemWithWidget } from '@hyperOS/components/listItem';

// 开关列表项（默认）
<ListItemWithWidget title="Wi-Fi" checked={true} onChange={(val) => console.log(val)} />

// 按钮列表项
<ListItemWithWidget
  widgetType="button"
  title="固件更新"
  buttonOption={{ title: '更新', onPress: () => {} }}
  onChange={() => {}}
/>

// 圆形按钮列表项
<ListItemWithWidget
  widgetType="circularButton"
  title="智能场景"
  checked={true}
  colorType="blue"
  onChange={(val) => console.log(val)}
/>

// 带可点击标题（显示箭头）
<ListItemWithWidget
  title="蓝牙"
  checked={true}
  onPress={() => console.log('跳转')}
  onChange={(val) => console.log(val)}
/>

// 自定义右侧渲染
<ListItemWithWidget
  widgetType="custom"
  title="固件版本"
  customRender={<Text>1.2.3</Text>}
  onChange={() => {}}
/>
```

## 注意事项

- `onChange` 必填，即使 widgetType='button' 或 'custom' 也需要传入
- `onPress` 控制左侧箭头显示，传入时标题右侧显示 Right 箭头
- `onLongPress` 仅在 `onPress` 存在且未禁用时生效，与普通 `ListItem` 保持一致
- `widgetType='button'` 时，buttonOption 默认 size='small'、type='primary'