跳到主要内容

数据展示组件

数据展示组件用于展示各种类型的数据，包括列表、表格、卡片、图表等。

列表组件​

List - 列表组件​

创建基础列表组件。

基本用法​

List()
    .data([])
    .renderItem(renderListItem)
    .onItemClick(handleItemClick)
{
    // 列表内容
}

属性列表​

属性接受类型默认值说明
dataarr[]数据数组
renderItemfuncnull渲染函数
keyExtractorfuncnull键提取函数
onItemClickfuncnull项目点击事件
onItemHoverfuncnull项目悬停事件
loadingboolfalse加载状态
errorboolfalse错误状态
emptyTextstring"暂无数据"空数据文本
widthstring, int, singlef"auto"宽度
heightstring, int, singlef"auto"高度
paddingstring, int, singlef0内边距
marginstring, int, singlef0外边距
backgroundColorstring"transparent"背景颜色
borderRadiusstring, int, singlef0圆角
gapstring, int, singlef8项目间距

示例​

List()
    .data(["项目1", "项目2", "项目3"])
    .renderItem((item: string, index: number) => {
        return Text(item)
            .padding(12)
            .backgroundColor("#f8f9fa")
            .borderRadius(6)
            .marginBottom(8);
    })
    .onItemClick((item: string, index: number) => {
        print("点击了: " + item);
    })

ListItem - 列表项组件​

创建列表项组件。

基本用法​

ListItem()
    .title("标题")
    .subtitle("副标题")
    .onClick(handleClick)
{
    // 列表项内容
}

属性列表​

属性接受类型默认值说明
titlestring""主标题
subtitlestring""副标题
descriptionstring""描述
iconstring""图标
avatarstring""头像
onClickfuncnull点击事件
onHoverfuncnull悬停事件
disabledboolfalse禁用状态
selectedboolfalse选中状态
widthstring, int, singlef"auto"宽度
heightstring, int, singlef"auto"高度
paddingstring, int, singlef12内边距
marginstring, int, singlef0外边距
backgroundColorstring"transparent"背景颜色
borderRadiusstring, int, singlef6圆角
borderstring"none"边框

示例​

ListItem()
    .title("用户设置")
    .subtitle("管理您的账户设置")
    .icon("settings")
    .onClick(() => {
        print("点击了用户设置");
    })

VirtualList - 虚拟列表​

创建虚拟列表，用于大量数据的性能优化。

基本用法​

VirtualList()
    .data([])
    .itemHeight(60)
    .renderItem(renderItem)
    .onItemClick(handleItemClick)
{
    // 虚拟列表内容
}

属性列表​

属性接受类型默认值说明
dataarr[]数据数组
itemHeightint, singlef60项目高度
renderItemfuncnull渲染函数
keyExtractorfuncnull键提取函数
onItemClickfuncnull项目点击事件
loadingboolfalse加载状态
errorboolfalse错误状态
emptyTextstring"暂无数据"空数据文本
widthstring, int, singlef"auto"宽度
heightstring, int, singlef"400px"高度
paddingstring, int, singlef0内边距
marginstring, int, singlef0外边距
backgroundColorstring"transparent"背景颜色
borderRadiusstring, int, singlef0圆角

示例​

VirtualList()
    .data(Array.from({length: 1000}, (_, i) => `项目 ${i + 1}`))
    .itemHeight(50)
    .height("400px")
    .renderItem((item: string, index: number) => {
        return Text(item)
            .padding(12)
            .backgroundColor(index % 2 === 0 ? "#f8f9fa" : "#ffffff")
            .borderRadius(4);
    })
    .onItemClick((item: string, index: number) => {
        print("点击了: " + item);
    })

表格组件​

Table - 表格组件​

创建数据表格组件。

基本用法​

Table()
    .columns([])
    .data([])
    .onRowClick(handleRowClick)
{
    // 表格内容
}

属性列表​

属性接受类型默认值说明
columnsarr[]列配置
dataarr[]数据数组
onRowClickfuncnull行点击事件
onCellClickfuncnull单元格点击事件
loadingboolfalse加载状态
errorboolfalse错误状态
emptyTextstring"暂无数据"空数据文本
stripeboolfalse斑马纹
borderedbooltrue边框
hoverablebooltrue悬停效果
selectableboolfalse可选择
widthstring, int, singlef"auto"宽度
heightstring, int, singlef"auto"高度
paddingstring, int, singlef0内边距
marginstring, int, singlef0外边距
backgroundColorstring"#ffffff"背景颜色
borderRadiusstring, int, singlef0圆角

示例​

Table()
    .columns([
        { key: "name", title: "姓名", width: 120 },
        { key: "age", title: "年龄", width: 80 },
        { key: "email", title: "邮箱", width: 200 }
    ])
    .data([
        { name: "张三", age: 25, email: "zhangsan@example.com" },
        { name: "李四", age: 30, email: "lisi@example.com" },
        { name: "王五", age: 28, email: "wangwu@example.com" }
    ])
    .stripe(true)
    .hoverable(true)
    .onRowClick((row: any, index: number) => {
        print("点击了行: " + row.name);
    })

卡片组件​

Card - 卡片组件​

创建基础卡片组件。

基本用法​

Card()
    .padding(20)
    .borderRadius(12)
    .boxShadow("0 2px 8px rgba(0,0,0,0.1)")
    .onClick(handleClick)
{
    // 卡片内容
}

属性列表​

属性接受类型默认值说明
titlestring""卡片标题
subtitlestring""卡片副标题
onClickfuncnull点击事件
onHoverfuncnull悬停事件
disabledboolfalse禁用状态
loadingboolfalse加载状态
hoverableboolfalse悬停效果
widthstring, int, singlef"auto"宽度
heightstring, int, singlef"auto"高度
paddingstring, int, singlef16内边距
marginstring, int, singlef0外边距
backgroundColorstring"#ffffff"背景颜色
borderRadiusstring, int, singlef8圆角
boxShadowstring"0 2px 8px rgba(0,0,0,0.1)"阴影
borderstring"1px solid #e1e4e8"边框

示例​

Card()
    .title("产品信息")
    .subtitle("查看产品详情")
    .padding(20)
    .borderRadius(12)
    .boxShadow("0 4px 12px rgba(0,0,0,0.15)")
    .hoverable(true)
    .onClick(() => {
        print("点击了卡片");
    })
{
    Text("这是一个产品卡片")
        .fontSize(16)
        .color("#333")
        .marginBottom(12)
    
    Text("产品描述内容...")
        .fontSize(14)
        .color("#666")
        .lineHeight(1.6)
}

CardHeader - 卡片头部​

创建卡片头部组件。

基本用法​

CardHeader()
    .title("标题")
    .subtitle("副标题")
    .action(headerAction)
{
    // 卡片头部内容
}

属性列表​

属性接受类型默认值说明
titlestring""标题
subtitlestring""副标题
actionelementnull操作按钮
widthstring, int, singlef"auto"宽度
heightstring, int, singlef"auto"高度
paddingstring, int, singlef16内边距
marginstring, int, singlef0外边距
backgroundColorstring"transparent"背景颜色
borderRadiusstring, int, singlef0圆角
borderBottomstring"1px solid #e1e4e8"底部边框

示例​

CardHeader()
    .title("用户信息")
    .subtitle("管理用户账户")
    .action(
        Button("编辑")
            .size("small")
            .backgroundColor("#007bff")
            .color("white")
    )

CardBody - 卡片主体​

创建卡片主体组件。

基本用法​

CardBody()
    .padding(16)
{
    // 卡片主体内容
}

属性列表​

属性接受类型默认值说明
widthstring, int, singlef"auto"宽度
heightstring, int, singlef"auto"高度
paddingstring, int, singlef16内边距
marginstring, int, singlef0外边距
backgroundColorstring"transparent"背景颜色
borderRadiusstring, int, singlef0圆角

示例​

CardBody()
    .padding(20)
{
    Text("卡片主体内容")
        .fontSize(16)
        .color("#333")
        .lineHeight(1.6)
}

CardFooter - 卡片底部​

创建卡片底部组件。

基本用法​

CardFooter()
    .padding(16)
    .justify("space-between")
{
    // 卡片底部内容
}

属性列表​

属性接受类型默认值说明
widthstring, int, singlef"auto"宽度
heightstring, int, singlef"auto"高度
paddingstring, int, singlef16内边距
marginstring, int, singlef0外边距
backgroundColorstring"transparent"背景颜色
borderRadiusstring, int, singlef0圆角
borderTopstring"1px solid #e1e4e8"顶部边框
justifystring"flex-start"对齐方式

示例​

CardFooter()
    .padding(16)
    .justify("space-between")
{
    Text("更新时间: 2024-01-01")
        .fontSize(12)
        .color("#999")
    
    Row()
        .gap(8)
    {
        Button("取消")
            .size("small")
            .backgroundColor("#6c757d")
            .color("white")
        
        Button("确定")
            .size("small")
            .backgroundColor("#007bff")
            .color("white")
    }
}

图表组件​

Chart - 图表组件​

创建通用图表组件。

基本用法​

Chart()
    .type("line")
    .data([])
    .options({})
    .width(400)
    .height(300)
{
    // 图表内容
}

属性列表​

属性接受类型默认值说明
typestring"line"图表类型
dataarr[]图表数据
optionsobj图表配置
widthstring, int, singlef400宽度
heightstring, int, singlef300高度
paddingstring, int, singlef0内边距
marginstring, int, singlef0外边距
backgroundColorstring"#ffffff"背景颜色
borderRadiusstring, int, singlef0圆角
boxShadowstring"none"阴影

图表类型值​

值说明
line折线图
bar柱状图
pie饼图
doughnut环形图
area面积图
scatter散点图

示例​

Chart()
    .type("line")
    .data([
        { x: "1月", y: 100 },
        { x: "2月", y: 150 },
        { x: "3月", y: 200 },
        { x: "4月", y: 180 }
    ])
    .options({
        title: "月度销售数据",
        xAxis: { title: "月份" },
        yAxis: { title: "销售额" }
    })
    .width(500)
    .height(300)

PieChart - 饼图​

创建饼图组件。

基本用法​

PieChart()
    .data([])
    .options({})
    .width(300)
    .height(300)
{
    // 饼图内容
}

属性列表​

属性接受类型默认值说明
dataarr[]饼图数据
optionsobj饼图配置
widthstring, int, singlef300宽度
heightstring, int, singlef300高度
paddingstring, int, singlef0内边距
marginstring, int, singlef0外边距
backgroundColorstring"#ffffff"背景颜色
borderRadiusstring, int, singlef0圆角
boxShadowstring"none"阴影

示例​

PieChart()
    .data([
        { label: "桌面端", value: 45, color: "#007bff" },
        { label: "移动端", value: 35, color: "#28a745" },
        { label: "平板端", value: 20, color: "#ffc107" }
    ])
    .options({
        title: "设备类型分布",
        showLegend: true,
        showPercentage: true
    })
    .width(400)
    .height(400)

BarChart - 柱状图​

创建柱状图组件。

基本用法​

BarChart()
    .data([])
    .options({})
    .width(400)
    .height(300)
{
    // 柱状图内容
}

属性列表​

属性接受类型默认值说明
dataarr[]柱状图数据
optionsobj柱状图配置
widthstring, int, singlef400宽度
heightstring, int, singlef300高度
paddingstring, int, singlef0内边距
marginstring, int, singlef0外边距
backgroundColorstring"#ffffff"背景颜色
borderRadiusstring, int, singlef0圆角
boxShadowstring"none"阴影

示例​

BarChart()
    .data([
        { category: "Q1", value: 120 },
        { category: "Q2", value: 150 },
        { category: "Q3", value: 180 },
        { category: "Q4", value: 200 }
    ])
    .options({
        title: "季度销售数据",
        xAxis: { title: "季度" },
        yAxis: { title: "销售额(万)" },
        color: "#007bff"
    })
    .width(500)
    .height(350)

LineChart - 折线图​

创建折线图组件。

基本用法​

LineChart()
    .data([])
    .options({})
    .width(400)
    .height(300)
{
    // 折线图内容
}

属性列表​

属性接受类型默认值说明
dataarr[]折线图数据
optionsobj折线图配置
widthstring, int, singlef400宽度
heightstring, int, singlef300高度
paddingstring, int, singlef0内边距
marginstring, int, singlef0外边距
backgroundColorstring"#ffffff"背景颜色
borderRadiusstring, int, singlef0圆角
boxShadowstring"none"阴影

示例​

LineChart()
    .data([
        { x: "1月", y: 100 },
        { x: "2月", y: 120 },
        { x: "3月", y: 150 },
        { x: "4月", y: 180 },
        { x: "5月", y: 200 }
    ])
    .options({
        title: "月度增长趋势",
        xAxis: { title: "月份" },
        yAxis: { title: "数值" },
        color: "#28a745",
        showGrid: true,
        showPoints: true
    })
    .width(600)
    .height(400)

进度组件​

Progress - 进度条​

创建进度条组件。

基本用法​

Progress()
    .value(50)
    .max(100)
    .showPercentage(true)
{
    // 进度条内容
}

属性列表​

属性接受类型默认值说明
valueint, singlef0当前值
maxint, singlef100最大值
showPercentageboolfalse显示百分比
colorstring"#007bff"进度条颜色
backgroundColorstring"#e9ecef"背景颜色
sizestring"medium"尺寸
animatedboolfalse动画效果
stripedboolfalse条纹效果
widthstring, int, singlef"100%"宽度
heightstring, int, singlef"auto"高度
paddingstring, int, singlef0内边距
marginstring, int, singlef0外边距
borderRadiusstring, int, singlef4圆角

尺寸值​

值说明
small小尺寸
medium中等尺寸
large大尺寸

示例​

Col()
    .gap(16)
{
    Text("上传进度: 50%")
    Progress()
        .value(50)
        .max(100)
        .showPercentage(true)
        .color("#28a745")
        .animated(true)
        .striped(true)
        .width("100%")
        .height(20)
}

CircularProgress - 圆形进度条​

创建圆形进度条组件。

基本用法​

CircularProgress()
    .value(50)
    .max(100)
    .size(100)
    .showPercentage(true)
{
    // 圆形进度条内容
}

属性列表​

属性接受类型默认值说明
valueint, singlef0当前值
maxint, singlef100最大值
showPercentageboolfalse显示百分比
colorstring"#007bff"进度条颜色
backgroundColorstring"#e9ecef"背景颜色
sizeint, singlef100圆形尺寸
strokeWidthint, singlef8线条宽度
animatedboolfalse动画效果
widthstring, int, singlef"auto"宽度
heightstring, int, singlef"auto"高度
paddingstring, int, singlef0内边距
marginstring, int, singlef0外边距

示例​

CircularProgress()
    .value(75)
    .max(100)
    .size(120)
    .showPercentage(true)
    .color("#ffc107")
    .strokeWidth(10)
    .animated(true)