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

j5fpnvbx  于 12个月前  发布在  Flutter
关注(0)|答案(3)|浏览(142)

我试图通过根据屏幕分辨率调整宽度来使Flutter中的数据表更具响应性(例如:在浏览器中,它是默认宽度,在手机屏幕中,它的大小更小以适应屏幕)。我无法在网上找到任何结论性的东西,并且大多数Flex和响应表小部件选项仅在Flutter中的Table小部件中可用,而不是DataTable
下面是我的代码是如何构造的一个片段:

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小部件更适合系统。

rqenqsqc

rqenqsqc1#

你试过吗?

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

字符串
根据设备的不同,

jhkqcmku

jhkqcmku2#

几个星期前我也遇到过类似的问题。data_table_2插件可以让我解决这个问题。你的专栏根据屏幕分辨率的React更灵敏。

n8ghc7c1

n8ghc7c13#

我已经用FittedBox,Expanded和Row Package 了DataTable,它可以工作。

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

字符串

相关问题