扩展到 window 的数据表，如果溢出也会水平滚动

Question

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

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

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 属性 of:

shrinkWrap: true,

希望我明白问题出在哪里你可以试一试希望对你有帮助

Answer 2

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

扩展到 window 的数据表，如果溢出也会水平滚动

DataTable that expands to window with, and also scroll horizontally if it overflows

dart

flutter

flutter-layout

flutter-web