如何让SingleChildScrollView的子DataTable充满屏幕宽度

要让DataTable默认铺满父容器宽度，仅在内容超出时允许水平滚动，你可以通过LayoutBuilder获取父组件的可用宽度，强制DataTable的最小宽度等于该值，同时保留SingleChildScrollView的滚动功能。

修改后的代码如下：

LayoutBuilder(
  builder: (context, constraints) {
    return SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: DataTable(
        minWidth: constraints.maxWidth, // 强制DataTable最小宽度等于父容器宽度
        columns: <DataColumn>[
          DataColumn(label: Expanded(child: Text('Item'))),
          if(widget.neighbour.rent) DataColumn(numeric: true, label: Expanded(child: Text('Rent'))),
          DataColumn(numeric: true, label: Expanded(child: Text('Deposit'))),
        ],
        rows: getTablesRows(),
      ),
    );
  },
)

原理说明 #

• LayoutBuilder能动态获取父组件的最大可用宽度，将其传给DataTable的minWidth，确保表格内容宽度小于父容器时，DataTable自动铺满整个宽度。
• 当表格内容总宽度超过父容器宽度时，SingleChildScrollView会自动启用水平滚动，此时DataTable实际宽度会大于minWidth，滚动功能正常生效。
• 列中的Expanded会继续均分可用宽度，维持表格的美观布局。

为什么之前的方法无效？ #

• ConstrainedBox：若固定设置minWidth为固定数值（如屏幕宽度），在父容器宽度变化时（比如屏幕旋转、嵌套在其他容器中）会失效，而LayoutBuilder能实时获取当前父容器宽度。
• Sliver解决方案：多数Sliver方案针对复杂滚动场景（如与ListView嵌套），对单纯的DataTable水平滚动来说过于冗余，且未处理宽度约束问题。
• SingleChildScrollView作为Expanded子组件：Expanded仅能让SingleChildScrollView铺满父容器，但SingleChildScrollView的水平约束为“无限大”，DataTable仍会收缩到内容最小宽度，无法自动铺满。

内容的提问来源于stack exchange，提问作者Sam