Flutter - 右侧溢出 29 个像素的 RenderFlex答案

【问题标题】：Flutter - A RenderFlex overflowed by 29 pixels on the rightFlutter - 右侧溢出 29 个像素的 RenderFlex
【发布时间】：2021-09-27 06:19:20
【问题描述】：

我有一张桌子，它在右边被剪掉了——还有一些列，它不适合移动屏幕。由于这个原因，我收到一个错误：A RenderFlex 在右侧溢出了 29 个像素。

如何启用水平滚动？

我的桌子看起来像这样。在右侧还有其他列，例如ddd、eee、ff 等，它们不适合屏幕。无法向右滚动。

我的代码：

class _SimpleTableState extends State<SimpleTable> {
  @override
  Widget build(BuildContext context) {
    return DataTable(
      columns: initHeader(),
      rows: initRows(),
    );
  }

【问题讨论】：

标签： flutter dart scroll col

【解决方案1】：

通过包装“SingleChildScrollView”小部件并将“scrollDirection”设置为“Axis.horizontal”。

如果你有很多行，总有一天你需要垂直滚动。

class _SimpleTableState extends State<SimpleTable> {
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: DataTable(
        columns: initHeader(),
        rows: initRows(),
      ),
    );
  }
...

【讨论】：

谢谢 :) 可以同时设置水平和垂直滚动吗？
是的。如果您的源中widget.items的数量很大，则会出现垂直溢出问题。
但是如果我添加更多行，那么我也可以向下滚动。那还好吗？
哦~ 这意味着DataTable 小部件本身支持垂直滚动。如果是这样，好吧！

【解决方案2】：

您可以使用listview 或SingleChildScrollView 将其包裹起来，然后像这样将scrollDirection 设置为水平

SingleChildScrollView(
       scrollDirection: Axis.horizontal,
       child: DataTable()
),

【讨论】：

【解决方案3】：

也许您可以使用表格小部件 (Table class)

【讨论】：