如何在 Flutter for Desktop 中为分页数据添加水平滚动条和垂直滚动条 Table

Question

Container(
                    height: MediaQuery.of(context).size.height,
                    width: 2000,
                    // This padding value of 200 is not auto calculated, it is based on where the table ends,
                    // If table becomes much more highted then, this value should be changed manually by the developer.
                    padding: const EdgeInsets.fromLTRB(0, 40, 10, 200),
                    //If there is no cleaner way to add scrollbars to paginated data table then
                    //please suggest a way to get this value automatically.
                    decoration: BoxDecoration(
                      color: Colors.blue.shade200,
                    ),
                    child: AdaptiveScrollbar(
                        controller: verticalScroll,
                        width: width,
                        scrollToClickDelta: 75,
                        scrollToClickFirstDelay: 200,
                        scrollToClickOtherDelay: 50,
                        sliderDecoration: BoxDecoration(
                          color: Colors.grey.shade100,
                          borderRadius:
                              const BorderRadius.all(Radius.circular(5)),
                        ),
                        sliderActiveDecoration: BoxDecoration(
                          color: Colors.grey.shade300,
                          borderRadius:
                              const BorderRadius.all(Radius.circular(5)),
                        ),
                        underColor: Colors.transparent,
                        child: AdaptiveScrollbar(
                            underSpacing: EdgeInsets.only(bottom: width),
                            controller: horizontalScroll,
                            width: width,
                            position: ScrollbarPosition.bottom,
                            sliderDecoration: BoxDecoration(
                              color: Colors.grey.shade300,
                              borderRadius:
                                  const BorderRadius.all(Radius.circular(5)),
                            ),
                            sliderActiveDecoration: BoxDecoration(
                              color: Colors.grey.shade500,
                              borderRadius:
                                  const BorderRadius.all(Radius.circular(5)),
                            ),
                            underColor: Colors.transparent,
                            child: SingleChildScrollView(
                                controller: horizontalScroll,
                                scrollDirection: Axis.horizontal,
                                child: SingleChildScrollView(
                                    clipBehavior: Clip.none,
                                    controller: verticalScroll,
                                    scrollDirection: Axis.vertical,
                                    child: SizedBox(
                                      width: 1520,
                                      child: PaginatedDataTable(
                                        sortAscending: isAscending,
                                        sortColumnIndex: sortColumnIndex,
                                        arrowHeadColor: Colors.black,
                                        source: ErpInventoryDataSource(
                                            erpInventoryList),
                                        columns: <DataColumn>[
                                          DataColumn(
                                              label:
                                                  const Text('Inventory Id '),
                                              onSort: doColumnSort),
                                          DataColumn(
                                              label:
                                                  const Text('Inv Location '),
                                              onSort: doColumnSort),
                                          DataColumn(
                                              label: const Text('Inv Date '),
                                              onSort: doColumnSort),
                                          DataColumn(
                                              label: const Text('Inv Qty '),
                                              onSort: doColumnSort),
                                          DataColumn(
                                              label: const Text('Inv Min Qty '),
                                              onSort: doColumnSort),
                                          DataColumn(
                                              label: const Text('Inv Cost '),
                                              onSort: doColumnSort),
                                          const DataColumn(
                                            label: Text(
                                              'Edit/Delete',
                                              //style: Theme.of(context).textTheme.headline4,
                                            ),
                                          ),
                                        ],
                                        columnSpacing: 100,
                                        horizontalMargin: 30,
                                        rowsPerPage: 5,
                                        showFirstLastButtons: showFLButtons,
                                        //showCheckboxColumn: false,
                                      ),
                                    )))))),

Answer 1

像这样将其包裹在 ScrollBar 中：

Scrollbar(
 child: Scrollbar(
   scrollbarOrientation: ScrollbarOrientation.bottom,
 ),
 chid: ...
),