# ListCard - 列表分组卡片

## 说明

列表分组卡片容器组件，用于将多个 ListItem、ListItemWithWidget 或 ActionListItem 组合成一个分组显示。支持自定义标题、底部提示和标题右侧自定义渲染。

## 属性

| 属性 | 说明 | 类型 | 默认值 | 必填 |
|------|------|------|--------|------|
| **title** | 分组标题 | `string` | - | 是 |
| **titleSize** | 标题尺寸 | `'small' \| 'medium' \| 'large'` | - | 否 |
| **footer** | 底部提示文字 | `string` | - | 否 |
| **children** | 子元素 | `ListCardChild \| ListCardChild[]` | - | 否 |
| **onPress** | 标题点击回调 | `() => void` | - | 否 |
| **customRender** | 标题右侧自定义渲染区域 | `ReactElement` | - | 否 |

## 使用示例

```tsx
import { ListCard } from '@hyperOS/components/listCard';
import { ListItem } from '@hyperOS/components/listItem';

// 基础用法
<ListCard title="网络设置">
  <ListItem title="Wi-Fi" onPress={() => {}} />
  <ListItem title="蓝牙" onPress={() => {}} />
</ListCard>

// 带底部提示
<ListCard title="设备信息" footer="固件版本会定期自动更新">
  <ListItem title="固件版本" value="1.2.3" onPress={() => {}} />
</ListCard>

// 标题可点击
<ListCard title="查看全部" onPress={() => console.log('跳转')}>
  <ListItem title="选项一" onPress={() => {}} />
</ListCard>

// 标题右侧自定义渲染
<ListCard title="设置" customRender={<Text>编辑</Text>}>
  <ListItem title="选项一" onPress={() => {}} />
</ListCard>
```