数据展示组件

数据展示组件用于以结构化的方式展示数据，包括表格、列表和网格等。

提示：选择合适的数据展示组件可以提升用户体验和数据可读性。

📱 渲染效果预览

姓名	年龄	城市
张三	25	北京
李四	30	上海

DataTable

DataTable 用于展示表格数据，支持排序、选择和分页等功能。

DataTable(
  columns: [
    DataColumn(label: Text('姓名')),
    DataColumn(label: Text('年龄')),
    DataColumn(label: Text('城市')),
  ],
  rows: [
    DataRow(cells: [
      DataCell(Text('张三')),
      DataCell(Text('25')),
      DataCell(Text('北京')),
    ]),
    DataRow(cells: [
      DataCell(Text('李四')),
      DataCell(Text('30')),
      DataCell(Text('上海')),
    ]),
  ],
)

📱 渲染效果预览

姓名	年龄	城市
张三	25	北京
李四	30	上海

📱 渲染效果预览

姓名	年龄	城市
张三	25	北京
李四	30	上海

📱 渲染效果预览

姓名	年龄	城市
张三	25	北京
李四	30	上海

Table

Table 是一个更底层的表格组件，提供更灵活的布局控制。

Table(
  border: TableBorder.all(),
  children: [
    TableRow(
      children: [
        TableCell(child: Text('姓名')),
        TableCell(child: Text('年龄')),
        TableCell(child: Text('城市')),
      ],
    ),
    TableRow(
      children: [
        TableCell(child: Text('张三')),
        TableCell(child: Text('25')),
        TableCell(child: Text('北京')),
      ],
    ),
  ],
)

📱 渲染效果预览

项目 0

这是第 0 个项目

项目 1

这是第 1 个项目

项目 2

这是第 2 个项目

项目 3

这是第 3 个项目

项目 4

这是第 4 个项目

ListView.builder

ListView.builder 用于构建高效的列表，特别适合大量数据。

ListView.builder(
  itemCount: 100,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text('项目 $index'),
      subtitle: Text('这是第 $index 个项目'),
    );
  },
)

📱 渲染效果预览

项目 0

项目 1

项目 2

项目 3

项目 4

项目 5

GridView.builder

GridView.builder 用于构建高效的网格布局。

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    childAspectRatio: 1.0,
  ),
  itemCount: 20,
  itemBuilder: (context, index) {
    return Card(
      child: Center(child: Text('项目 $index')),
    );
  },
)

📱 渲染效果预览

⋮⋮ 项目 0

⋮⋮ 项目 1

⋮⋮ 项目 2

⋮⋮ 项目 3

ReorderableListView

ReorderableListView 允许用户通过拖拽重新排列列表项。

ReorderableListView(
  children: List.generate(10, (index) {
    return ListTile(
      key: ValueKey('item_$index'),
      title: Text('项目 $index'),
    );
  }),
  onReorder: (oldIndex, newIndex) {
    // 处理重新排序逻辑
  },
)

← 布局组件滚动组件 →