Flutter - 根据屏幕方向/大小使 DataTable 响应答案

【问题标题】：Flutter - Making DataTable responsive according to screen orientation/sizeFlutter - 根据屏幕方向/大小使 DataTable 响应
【发布时间】：2022-06-29 14:55:51
【问题描述】：

我正在尝试通过根据屏幕分辨率调整宽度来使 Flutter 中的数据表更具响应性（例如：在浏览器中，它的默认宽度，在手机屏幕中，它的尺寸更小以适合屏幕）。我无法在网上找到任何确凿的信息，并且大多数 flex 和响应式表格小部件选项仅在 Flutter 的 Table 小部件中可用，而在 DataTable 中不可用。

以下是我的代码结构的 sn-p：

SizedBox(
          width: double.infinity,
          child: SingleChildScrollView(
            child: DataTable(
              columnSpacing: 0.0,
              columns: const [
                DataColumn(
                  label: Text(
                    "First Name",
                    style: TextStyle(color: Colors.white),
                  ),
                ),
                DataColumn(
                  label: Text(
                    "Last Name",
                    style: TextStyle(color: Colors.white),
                  ),
                ),
                DataColumn(
                  label: Text(
                    "Username",
                    style: TextStyle(color: Colors.white),
                  ),
                ),
                DataColumn(
                  label: Text(
                    "Email ID",
                    style: TextStyle(color: Colors.white),
                  ),
                ),
                DataColumn(
                  label: Text(
                    "DOB",
                    style: TextStyle(color: Colors.white),
                  ),
                ),
                DataColumn(
                  label: Text(
                    "Account Type",
                    style: TextStyle(color: Colors.white),
                  ),
                ),
                DataColumn(
                  label: Text(
                    "Actions",
                    style: TextStyle(color: Colors.white),
                  ),
                ),
                DataColumn(
                  label: Text(
                    "Posts",
                    style: TextStyle(color: Colors.white),
                  ),
                ),
              ],
              rows: users
                  .map(
                    (user) => DataRow(
                      cells: <DataCell>[
                        DataCell(Text(user.first_name,
                            style: TextStyle(color: Colors.white))),
                        DataCell(Text(user.last_name,
                            style: TextStyle(color: Colors.white))),
                        DataCell(Text(user.username,
                            style: TextStyle(color: Colors.white))),
                        DataCell(Text(user.email,
                            style: TextStyle(color: Colors.white))),
                        DataCell(Text(user.date_of_birth,
                            style: TextStyle(color: Colors.white))),
                        DataCell(Text(user.account_type,
                            style: TextStyle(color: Colors.white))),
                        DataCell(
.
.
.
.

如果可能的话，我想继续为这个应用程序使用 DataTables，因为它比 Table 小部件更适合系统。

【问题讨论】：

标签： flutter android-studio dart

【解决方案1】：

你试过了吗？

width: MediaQuery.of(context).size.width //to get the width of screen

根据设备将宽度设为动态

【讨论】：

你能提供一个完整的答案吗？为什么会这样？由于您测量整个屏幕的方式与匹配屏幕全宽的 double.infinity 没有区别。
如上述评论者所说，答案并不完整，表格不会根据屏幕方向调整大小。
据我所知，他想要“根据屏幕分辨率的宽度”，因此请参考：stackoverflow.com/questions/54489513/… 解决问题的另一种方法是：stackoverflow.com/questions/61698700/…

【解决方案2】：

几周前我遇到了类似的问题。 data_table_2 插件让我可以解决这个问题。根据屏幕分辨率，您的列响应速度更快。

【讨论】：

【解决方案3】：

我已经用 FittedBox、Expanded 和 Row 包装了 DataTable，它可以工作。

Row(
  children: [
    Expanded(
      child: FittedBox(
        child: DataTable(
          columns: columns,
          rows: rows,
        ),
      ),
   ],
),

【讨论】：