在 Flutter 中创建表格的最佳方法答案

【问题标题】：Best Way to Create Table In Flutter在 Flutter 中创建表格的最佳方法
【发布时间】：2022-01-12 04:01:12
【问题描述】：

在这里，我使用容器创建表，并基于使用弹性编号进行扩展以使标题和行相关。我认为这不是最好的方法，但我不知道如何创建这样的表格，任何人都可以给我建议吗？

代码如下：

_tableSection

Widget _bookingListSection(OnlineBookingListController controller) {
    return Column(
      children: [
        _buildHeaderTable(),
        Expanded(
          child: ListView.builder(
            padding: EdgeInsets.zero,
            itemCount: controller.listBooking.length,
            itemBuilder: (context, index) {
              int lastIndex = controller.listBooking.length - 1;

              return _buildContentTable(
                index,
                lastIndex,
                context,
                controller,
              );
            },
          ),
        ),
      ],
    );
  }

_buildHeaderTable(),

Widget _buildHeaderTable() {
    return Container(
      width: double.maxFinite,
      height: AppSize.DIMEN_64.h,
      padding: EdgeInsets.fromLTRB(
        AppSize.DIMEN_22.h,
        AppSize.DIMEN_16.h,
        AppSize.DIMEN_22.h,
        AppSize.DIMEN_16.h,
      ),
      decoration: BoxDecoration(
        color: AppColors.GREY_BLACK_BACKGROUND,
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(AppSize.RADIUS_8.h),
          topRight: Radius.circular(AppSize.RADIUS_8.h),
        ),
      ),
      child: Row(children: [
        _titleHeaderTable('Time', 3),
        _titleHeaderTable('Phone Number', 3),
        _titleHeaderTable('Customer Name', 3),
        _titleHeaderTable('Room', 3),
        _titleHeaderTable('Waitress', 3),
        _titleHeaderTable('Status', 2),
        _titleHeaderTable('Action', 4),
      ]),
    );
  }

Widget _titleHeaderTable(String title, int flexNum) {
    return Expanded(
      flex: flexNum,
      child: Container(
        child: Text(
          title,
          textAlign: TextAlign.left,
          maxLines: 2,
          style: textStyleW700S14.copyWith(
            color: AppColors.WHITE,
          ),
        ),
      ),
    );
  }

然后对于我在行内使用 flex 的内容。你对这个有什么建议吗？

【问题讨论】：

标签： flutter dart flutter-layout flutter-table

【解决方案1】：

您可以使用 Table 和 Data Table

在 Flutter 中创建表格

使用表类：

参考Table类here

Container(
  margin: EdgeInsets.all(20),
  child: Table(
    defaultColumnWidth: FixedColumnWidth(120.0),
    border: TableBorder.all(
        color: Colors.black, style: BorderStyle.solid, width: 2),
    children: [
      TableRow(children: [
        Column(
          children: [
            Text(
              'Website',
              style: TextStyle(fontSize: 20.0),
            ),
          ],
        ),
        Column(
          children: [
            Text(
              'Tutorial',
              style: TextStyle(fontSize: 20.0),
            ),
          ],
        ),
        Column(
          children: [
            Text(
              'Review',
              style: TextStyle(fontSize: 20.0),
            ),
          ],
        ),
      ]),
      TableRow(children: [
        Column(
          children: [
            Text('https://flutter.dev/'),
          ],
        ),
        Column(
          children: [
            Text('Flutter'),
          ],
        ),
        Column(
          children: [
            Text('5*'),
          ],
        ),
      ]),
      TableRow(children: [
        Column(
          children: [
            Text('https://dart.dev/'),
          ],
        ),
        Column(
          children: [
            Text('Dart'),
          ],
        ),
        Column(
          children: [
            Text('5*'),
          ],
        ),
      ]),
      TableRow(children: [
        Column(
          children: [
            Text('https://pub.dev/'),
          ],
        ),
        Column(
          children: [
            Text('Flutter Packages'),
          ],
        ),
        Column(
          children: [
            Text('5*'),
          ],
        ),
      ]),
    ],
  ),
),

使用Table 类的结果屏幕->

使用DataTable 类：

参考DataTable类here

DataTable(
  columns: const <DataColumn>[
    DataColumn(
      label: Text(
        'Sr.No',
        style: TextStyle(
          fontWeight: FontWeight.bold,
        ),
      ),
    ),
    DataColumn(
      label: Text(
        'Website',
        style: TextStyle(
          fontWeight: FontWeight.bold,
        ),
      ),
    ),
    DataColumn(
      label: Text(
        'Tutorial',
        style: TextStyle(
          fontWeight: FontWeight.bold,
        ),
      ),
    ),
    DataColumn(
      label: Text(
        'Review',
        style: TextStyle(
          fontWeight: FontWeight.bold,
        ),
      ),
    ),
  ],
  rows: const <DataRow>[
    DataRow(
      cells: <DataCell>[
        DataCell(
          Text('1'),
        ),
        DataCell(
          Text('https://flutter.dev/'),
        ),
        DataCell(
          Text('Flutter'),
        ),
        DataCell(
          Text('5*'),
        ),
      ],
    ),
    DataRow(
      cells: <DataCell>[
        DataCell(
          Text('2'),
        ),
        DataCell(
          Text('https://dart.dev/'),
        ),
        DataCell(
          Text('Dart'),
        ),
        DataCell(
          Text('5*'),
        ),
      ],
    ),
    DataRow(
      cells: <DataCell>[
        DataCell(
          Text('3'),
        ),
        DataCell(
          Text('https://pub.dev/'),
        ),
        DataCell(
          Text('Flutter Packages'),
        ),
        DataCell(
          Text('5*'),
        ),
      ],
    ),
  ],
),

使用DataTable类的结果屏幕->

您也可以参考this 包Table

【讨论】：

【解决方案2】：

Flutter 为此提供了一个 Table 类（但您也可以使用简单的 Row + Column 组合来实现）。

这里是表格文档的链接：Flutter Table

Container(
        color: Colors.white,
        padding: EdgeInsets.all(20.0),
        child: Table(
          border: TableBorder.all(color: Colors.black),
          children: [
            TableRow(children: [
              Text('Cell 1'),
              Text('Cell 2'),
              Text('Cell 3'),
            ]),
            TableRow(children: [
              Text('Cell 4'),
              Text('Cell 5'),
              Text('Cell 6'),
            ])
          ],
        ),
      )

【讨论】：