Flutter中PaginatedDataTable无限宽约束错误排查求助

问题描述 #

运行代码时触发FlutterError，错误提示：

BoxConstraints forces an infinite width.
These invalid constraints were provided to _RenderScrollSemantics's layout() function by the following function, which probably computed the invalid constraints in question:
ChildLayoutHelper.layoutChild (package:flutter/src/rendering/layout_helper.dart:52:11)
The offending constraints were:
BoxConstraints(w=Infinity, 0.0<=h<=Infinity)

要求定位强制无效约束的组件，且不能硬编码宽高，保留PaginatedDataTable的自然尺寸。

复现代码 #

import 'package:flutter/material.dart';

/// Flutter code sample for [PaginatedDataTable].

class MyDataSource extends DataTableSource {
  @override
  int get rowCount => 3;

  @override
  DataRow? getRow(int index) {
    switch (index) {
      case 0:
        return const DataRow(
          cells: <DataCell>[
            DataCell(Text('Sarah')),
            DataCell(Text('19')),
            DataCell(Text('Student')),
          ],
        );
      case 1:
        return const DataRow(
          cells: <DataCell>[
            DataCell(Text('Janine')),
            DataCell(Text('43')),
            DataCell(Text('Professor')),
          ],
        );
      case 2:
        return const DataRow(
          cells: <DataCell>[
            DataCell(Text('William')),
            DataCell(Text('27')),
            DataCell(Text('Associate Professor')),
          ],
        );
      default:
        return null;
    }
  }

  @override
  bool get isRowCountApproximate => false;

  @override
  int get selectedRowCount => 0;
}

final DataTableSource dataSource = MyDataSource();

void main() => runApp(const DataTableExampleApp());

class DataTableExampleApp extends StatelessWidget {
  const DataTableExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: SingleChildScrollView(
        padding: EdgeInsets.all(12.0),
        child: DataTableExample(),
      ),
    );
  }
}

class DataTableExample extends StatelessWidget {
  const DataTableExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Wrap(
      direction: Axis.vertical,
      alignment: WrapAlignment.start,
      children: [
        Center(
          child: Column(
            children: [
              PaginatedDataTable(
                columns: const <DataColumn>[
                  DataColumn(
                    label: Text('Name'),
                  ),
                  DataColumn(
                    label: Text('Age'),
                  ),
                  DataColumn(
                    label: Text('Role'),
                  ),
                ],
                source: dataSource,
              ),
            ],
          ),
        )
      ],
    );
  }
}

问题定位 #

问题出在Wrap组件：当direction设置为Axis.vertical时，Wrap在水平方向会向子组件传递无限宽度的约束（BoxConstraints(w=Infinity)），而PaginatedDataTable需要基于父组件的可用宽度来计算自身的自然尺寸，无法处理无限宽度的约束，因此触发错误。

解决方案 #

移除多余的Wrap组件，直接保留Center和Column结构即可。Wrap在这里没有实际布局需求，反而破坏了正常的约束传递链，导致PaginatedDataTable无法获取有效的水平空间。

修改后的代码 #

import 'package:flutter/material.dart';

class MyDataSource extends DataTableSource {
  @override
  int get rowCount => 3;

  @override
  DataRow? getRow(int index) {
    switch (index) {
      case 0:
        return const DataRow(
          cells: <DataCell>[
            DataCell(Text('Sarah')),
            DataCell(Text('19')),
            DataCell(Text('Student')),
          ],
        );
      case 1:
        return const DataRow(
          cells: <DataCell>[
            DataCell(Text('Janine')),
            DataCell(Text('43')),
            DataCell(Text('Professor')),
          ],
        );
      case 2:
        return const DataRow(
          cells: <DataCell>[
            DataCell(Text('William')),
            DataCell(Text('27')),
            DataCell(Text('Associate Professor')),
          ],
        );
      default:
        return null;
    }
  }

  @override
  bool get isRowCountApproximate => false;

  @override
  int get selectedRowCount => 0;
}

final DataTableSource dataSource = MyDataSource();

void main() => runApp(const DataTableExampleApp());

class DataTableExampleApp extends StatelessWidget {
  const DataTableExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: SingleChildScrollView(
        padding: EdgeInsets.all(12.0),
        child: DataTableExample(),
      ),
    );
  }
}

class DataTableExample extends StatelessWidget {
  const DataTableExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: [
          PaginatedDataTable(
            columns: const <DataColumn>[
              DataColumn(
                label: Text('Name'),
              ),
              DataColumn(
                label: Text('Age'),
              ),
              DataColumn(
                label: Text('Role'),
              ),
            ],
            source: dataSource,
          ),
        ],
      ),
    );
  }
}

说明 #

修改后，PaginatedDataTable会从Center组件获取父级的可用宽度，自动计算自身的自然尺寸，既解决了无限宽度约束的问题，又不需要硬编码宽高。

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