Flutter

Question

我有 table，它在右边被截断了 - 还有一些列，但它不适合移动屏幕。出于这个原因，我得到一个错误：RenderFlex 在右边溢出了 29 个像素。

如何启用水平滚动？

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

我的代码：

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

Answer 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(),
      ),
    );
  }
...

Answer 2

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

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

Answer 3

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

Flutter - 右侧溢出 29 像素的 RenderFlex

Flutter - A RenderFlex overflowed by 29 pixels on the right

scroll

col

dart