Flutter A RenderFlex 右侧溢出 X 像素

Question

我正在通过创建我们的 wpf 应用程序之一来学习 flutter 和 dart。

但是，我的DataTable抛出异常：

======== Exception caught by rendering library =====================================================
       A RenderFlex overflowed by 10.0 pixels on the right.

做了一些研究，有一些选项可以使用Expanded，SingleChildScrollView等等，但仍然没有任何帮助。

如果我让数据行字符串变小，一切都很好。

小工具代码

class WorkList extends StatefulWidget {
   WorkListState createState() => new WorkListState();
}

class WorkListState extends State<WorkList> with SingleTickerProviderStateMixin {
   List<DataRow> _activities = [
     DataRow(
       cells: <DataCell>[
          DataCell(Text('William')),
          DataCell(Text('27')),
          DataCell(Text('Associate Professor')),
          DataCell(Text('Associate Professor1')),
          DataCell(Text('Associate Professor1')),
    ]
  )
];

void initState() {
  super.initState();
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.landscapeRight,
    DeviceOrientation.landscapeLeft,
  ]);
  _controller = TabController(length: 2, vsync: this);
  _controller.addListener(() {
    _filterActivities();
  });
}
@override
dispose(){
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
    DeviceOrientation.portraitDown,
  ]);
  super.dispose();
}

TabBar get _tabBar => TabBar(
  labelColor: Colors.white,
  controller: _controller,
  indicator: BoxDecoration(
    color: orangeBackground,
  ),
  tabs: [
    Tab(text: 'SHOW CURRENT'),
    Tab(text: 'SHOW ALL')
  ],
);

TabController _controller;

DataTable get _dataTable => DataTable(
  columns: const <DataColumn>[
    DataColumn(
      label: Text(
        'First Name',
        style: TextStyle(fontStyle: FontStyle.italic),
      ),
    ),
    DataColumn(
      label: Text(
        'Last Name',
        style: TextStyle(fontStyle: FontStyle.italic),
      ),
    ),
    DataColumn(
      label: Text(
        'Id',
        style: TextStyle(fontStyle: FontStyle.italic),
      ), 
    ),
    DataColumn(
      label: Text(
        'Time',
        style: TextStyle(fontStyle: FontStyle.italic),
      ),
    ),
    DataColumn(
      label: Text(
        'Operator',
        style: TextStyle(fontStyle: FontStyle.italic),
      ),
    ),
  ],
  rows: _activities,
);

void _filterActivities() {
  setState(() {
    _dataTable.rows.clear();
    _activities.add(
      DataRow(
          cells: <DataCell>[
            DataCell(Text('Some random')),
            DataCell(Text('Some random1')),
            DataCell(Text('Associate Professor1111111111dasdasds')),
            DataCell(Text('Associate Professor1111111adssaa')),
            DataCell(Text('TEEEEEEEEEEESTdsdasds')),
          ]
      )
    );
  });
}

@override
Widget build(BuildContext context) {
  return DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          bottom: PreferredSize(
            preferredSize: _tabBar.preferredSize,
            child: ColoredBox(
              color: midDarkBackground,
              child: _tabBar,
            ),
          ),
          title: Text('Worklist'),
        ),
        body: Column(
          children: <Widget>[
            Expanded(
              child: TabBarView(
                controller: _controller,
                physics: NeverScrollableScrollPhysics(), // disable swipe
                children: [
                  _dataTable,
                  _dataTable
                ],
              ),
            )
          ],
        ),
        floatingActionButton: FloatingActionButton.extended(
          label: Text('CREATE NEW PROCEDURE'),
          backgroundColor: darkBackground,
          foregroundColor: Colors.white,
      ),
    ),
  );
}
}

Answer 1

如果您想让表格水平滚动，只需用withDataTable包裹小部件即可。SingleChildScrollViewscrollDirection: Axis.horizontal

所以你的get _dataTable将是以下内容：

get _dataTable => SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  child: DataTable(
    columns: const <DataColumn>[...],
    rows: ...,
  ),
);

结果：

如果您想要双向滚动，请SingleChildScrollView像这样用第二个滚动来包裹它：

get _dataTable => SingleChildScrollView(
  scrollDirection: Axis.vertical,
  child: SingleChildScrollView(
    scrollDirection: Axis.horizontal,
    child: DataTable(
      columns: const <DataColumn>[...],
      rows: ...,
    ),
  ),
);

UPD：从 Flutter 版本 3.13.0 开始，我建议看一下TwoDimensionalScrollable类。