数据中的两个方向滚动 table flutter

Question

我在 flutter 中制作了一个 DataTable，它有大约 10 列，这超出了屏幕可以处理的范围，所以我将 DataTable 包装在一个 SingleChildScrollView 小部件中，这个解决方案工作正常，直到 DataTable 中的行增长并超过屏幕高度，我无法向下滚动，因为滚动方向在 SingleChildScrollView 小部件中设置为水平！作为临时解决方案，我将 DataTable 包装在 SingleChildScrollView 内的 fittedBox 中，但这并不能解决整个问题，而且仍然存在一些责任问题。我需要的是一种使 DataTable 在水平和垂直两个方向上都可滚动的方法。

这是我的代码

 @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.all(16),
      child: Card(
        child: Container(
          padding: const EdgeInsets.all(16),
          child: SingleChildScrollView(
            scrollDirection: Axis.vertical,
            child: FutureBuilder(
              future: getCategories(),
              builder: (context, snapshot) {
                if (snapshot.connectionState == ConnectionState.waiting) {
                  return const Center(
                    child: CircularProgressIndicator(),
                  );
                } else {
                  return FittedBox(
                    child: DataTable(
                      headingRowColor: MaterialStateProperty.resolveWith(
                          (states) => Colors.grey.shade900),
                      columns: _columns,
                      rows: _rows,
                    ),
                  );
                }
              },
            ),
          ),
        ),
      ),
    );
  }

Answer 1

我知道的最简单的解决方案是在一秒钟内包装 SingleChildScrollView SingleChildScrollView。

但还有其他方法：

数据中的两个方向滚动 table flutter

Two direction scrolling in data table flutter

flutter

responsive

flutter-layout

flutter-web