在表格中显示数据的 Flutter 布局示例

最新推荐文章于 2024-08-01 15:30:00 发布

nrxsh

最新推荐文章于 2024-08-01 15:30:00 发布

阅读量399

点赞数

分类专栏： Flutter 文章标签： flutter android 跨平台表格

本文链接：https://blog.youkuaiyun.com/qq_16635277/article/details/129160254

版权

Flutter 专栏收录该内容

4 篇文章

订阅专栏

该代码示例展示了如何在Flutter中创建一个包含姓名、年龄和性别的数据表。使用DataTable、DataColumn、DataRow和DataCell组件来构建表格，并通过SingleChildScrollView确保内容在横向滚动时可见。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在表格中显示数据的 Flutter 布局示例：

代码实现：

import 'package:flutter/material.dart';

class DataTableScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Data Table'),
      ),
      body: SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: DataTable(
          columns: [
            DataColumn(
              label: Text('Name'),
            ),
            DataColumn(
              label: Text('Age'),
            ),
            DataColumn(
              label: Text('Gender'),
            ),
          ],
          rows: [
            DataRow(
              cells: [
                DataCell(Text('John')),
                DataCell(Text('28')),
                DataCell(Text('Male')),
              ],
            ),
            DataRow(
              cells: [
                DataCell(Text('Jane')),
                DataCell(Text('32')),
                DataCell(Text('Female')),
              ],
            ),
            DataRow(
              cells: [
                DataCell(Text('Bob')),
                DataCell(Text('44')),
                DataCell(Text('Male')),
              ],
            ),
            DataRow(
              cells: [
                DataCell(Text('Alice')),
                DataCell(Text('19')),
                DataCell(Text('Female')),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

在此布局中，DataTableScreen 小部件显示具有三列（“姓名”、“年龄”和“性别”）和四行数据的 DataTable 小部件。 DataColumn 小部件用于定义每列的标题，而DataRow 小部件用于定义每行数据。在每个 DataRow 中，我们使用 DataCell 小部件定义每个数据单元格。

为确保表格在超过可用屏幕宽度时可滚动，我们将 DataTable 小部件包装在具有水平滚动方向的 SingleChildScrollView 小部件中。这允许用户左右滚动以查看表中的所有数据。