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

Question

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

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

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.horizontal

。 您必须将

columns

的最小宽度设置为

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