用途
Shadcn UI — Table 用于构建响应式表格。资料同时提供两种构建方式:适用于小数据量的列表方式,以及适用于大数据量的 builder 方式。
主要能力
- ShadTable.list(小表格):一次构建全部行,传入 header、footer(由 ShadTableCell.header / ShadTableCell.footer 组成的列表)以及 children(由行单元格列表组成的列表,每行是一组 ShadTableCell)。
- ShadTable(大数据量表格):使用 columnCount、rowCount、header、builder、footer,按需构建,仅构建可见行。
- 列宽控制:通过 columnSpanExtent 设置,例如 FixedTableSpanExtent(130) 表示固定宽度,MaxTableSpanExtent(FixedTableSpanExtent(120), RemainingTableSpanExtent()) 表示在固定与剩余宽度之间取较大值。
- 表头与表尾对齐:ShadTableCell.header 与 ShadTableCell.footer 支持 alignment,例如 Alignment.centerRight 实现右对齐。
使用方式
列表方式(小表格)
ShadTable.list 接受 header、footer、columnSpanExtent 与 children 参数。header / footer 中每一项为 ShadTableCell.header / ShadTableCell.footer,children 中每一项是一行的 ShadTableCell 列表。columnSpanExtent 是一个接收列索引的函数,可按索引返回不同类型的宽度范围对象或 null。
Builder 方式(大表格)
使用 ShadTable,传入 columnCount:、rowCount:、header: (context, column) => ...、columnSpanExtent: (index) => ...、builder: (context, index) => ShadTableCell(...) 与 footer: (context, column) => ...。builder 接收带 row 与 column 的表格索引;大数据量时优先使用 builder,以便只构建可见行。
适用场景
- 需要展示发票等带表头、表尾与金额列的表格(资料示例为发票列表)。
- 需要响应式、可控制列宽的表格布局。
- 数据量较大时,使用 builder 按需构建以优化性能。
限制
资料未提供平台限制、收费、价格、安装命令或依赖要求等信息,暂未提供。更多关于列跨度与 builder 模式的细节,资料指向 reference.md,但未给出其具体内容。