DataTable 扩展到窗口，如果溢出也会水平滚动

Question

我正在尝试创建一个 DataTable，它将像 DataTable 通常那样扩展到其父级的可用宽度，但如果屏幕上没有足够的水平空间，它应该允许水平滚动。就目前情况而言，我只能做其中之一。问题是当我允许表格水平滚动时，单元格不再扩展。当我允许单元格水平扩展时，如果表格不适合，就会从页面上切掉。

下面的示例代码是表格版本，其中单元格不会展开，但可以滚动。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  ScrollController verticalController = ScrollController();
  ScrollController horizontalController = ScrollController();

  bool maximized = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Scrollbar(
          controller: verticalController,
          isAlwaysShown: true,
          child: SingleChildScrollView(
            controller: verticalController,
            child: Padding(
              padding: const EdgeInsets.all(15.0),
              child: Column(
                children: [
                  Text('Table Name'),
                  Container(
                    width: double.infinity,
                    child: Scrollbar(
                      isAlwaysShown: true,
                      controller: horizontalController,
                      child: SingleChildScrollView(
                        controller: horizontalController,
                        scrollDirection: Axis.horizontal,
                        child: DataTable(
                            dataRowHeight: 50,
                            columnSpacing: 20,
                            horizontalMargin: 0,
                            columns: List<DataColumn>.generate(
                                10,
                                (index) => DataColumn(
                                    label: Text("Column" + index.toString()))),
                            rows: List<DataRow>.generate(10, (rowIndex) {
                              if (maximized) {
                                return DataRow(
                                  cells: List<DataCell>.generate(
                                    10,
                                    (cellIndex) => DataCell(
                                      Container(
                                        width: 100,
                                        child: Column(
                                          children: [
                                            Text("row" + rowIndex.toString()),
                                            Text("Cell" + cellIndex.toString()),
                                          ],
                                        ),
                                      ),
                                    ),
                                  ),
                                );
                              } else {
                                return DataRow(
                                  cells: List<DataCell>.generate(
                                    10,
                                    (cellIndex) => DataCell(
                                      Container(
                                        child: Column(
                                          children: [
                                            Text("row" + rowIndex.toString()),
                                            Text("Cell" + cellIndex.toString()),
                                          ],
                                        ),
                                      ),
                                    ),
                                  ),
                                );
                              }
                            })),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ));
  }
}

Answer 1

您可以尝试给出上面的 SingleChildScrollView 属性吗：

shrinkWrap: true,

希望我明白问题是什么
你可以尝试一下希望有帮助

Answer 2

我可以通过在桌子周围使用约束框并将最小宽度设置为屏幕上的可用宽度来解决此问题。这仍然允许表格水平扩展，同时保持宽度至少与可用屏幕宽度一样大。

Answer 3

有点晚了，但如果有人正在搜索这个，请将 DataTable 包装在 SingleChildScrollView 中，并将滚动方向设置为 Axis.horizo​​ntal。
您必须将列的最小宽度设置为

DataTable(
columns: yourData.map((data)=>DataColumn(label :SizedBox(width: 250,
child:yourChild,
  ),
 ),
);