如何在flutter web的分页数据表中添加水平滚动

Question

我在 flutter web 中使用了分页数据表。在较小的屏幕上，表格调整其宽度但隐藏数据列，我想水平滚动数据表，以便能够浏览分页数据表中添加的整个数据列。（不想使用任何包）

提前致谢

这是我的代码

SingleChildScrollView(
      child: Container(
        padding: EdgeInsets.all(10),
        color: AppColors.grey,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
               CustomIconButton(
                buttonText: "Add School",
                onTap: () {}
              ),
        
            SizedBox(height: 15),

            PaginatedDataTable(
              source: _schoolData,
              dragStartBehavior: DragStartBehavior.start,

              header: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Padding(
                    padding: const EdgeInsets.all(20),
                    child: CustomText(
                      text: "School Overview",
                      fontSize: 20,
                    ),
                  ),
                  Divider(height: 0),
                ],
              ),
              columns:  [
                _createDataColumn("ID"),
                _createDataColumn("Name"),
                _createDataColumn("User Name"),
                _createDataColumn("Email"),
                _createDataColumn("City"),
                _createDataColumn("Country"),
                _createDataColumn("Grading"),
                _createDataColumn("Archive"),
                _createDataColumn("Education Level"),
                _createDataColumn(""),
              ],
              columnSpacing: 100,
              horizontalMargin: 10,
              rowsPerPage: 8,
              showCheckboxColumn: false,
              dataRowHeight: 70,
              arrowHeadColor: AppColors.darkBlue,

            ),
          ],
        ),
      ),
    );

Answer 1

在 Web 上，您必须添加自定义 MaterialScrollBehavior 并在 MaterialApp 内部调用，这将帮助您在 Web 中启用滚动。

class MyCustomScrollBehavior extends MaterialScrollBehavior {
  // Override behavior methods and getters like dragDevices
  @override
  Set<PointerDeviceKind> get dragDevices => {
        PointerDeviceKind.touch,
        PointerDeviceKind.mouse,
      };
}

主程序.dart

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      scrollBehavior: MyCustomScrollBehavior(), // <== add here
      title: 'Flutter App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Home Page'),
    );
  }
}