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

Question

我在 flutter web 中使用了分页数据 Table。在较小的屏幕上，table 调整它的宽度但隐藏数据列，我想水平滚动数据 table，这样我就可以浏览整个数据列，添加到分页数据中Table。（不想使用任何包）

提前致谢

这是我的代码

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

将 SingleChildScrollView 放入具有不同 scrollDirection 的 SingleChildScrollView 例如：

SingleChildScrollView(
            scrollDirection : Axis.vertical
            child: Column(
              children: [
                SingleChildScrollView(
                  scrollDirection : Axis.horizontal,
                  child: Text(''),
                ),
                SingleChildScrollView(
                  scrollDirection : Axis.horizontal,
                  child: Text(''),
                ),
                SingleChildScrollView(
                  scrollDirection : Axis.horizontal,
                  child: Text(''),
                ),
              ],
            ),

          ),

Answer 2

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

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

main.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'),
    );
  }
}

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

How to add horizontal scroll in paginated Data Table in flutter web

user-interface

scroll

dart

flutter