如何在 Flutter 中制作水平可滚动表格小部件

Question

我想在 Flutter 中使表列在水平方向上可滚动。如何做到这一点？还记得谈论 Table Widget 而不是 DataTable 吗？

Answer 1

您可以尝试使 flutter table 小部件水平滚动，

Scrollbar(
    child: ListView(
      children: [
        SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          child: Table(
            defaultColumnWidth: IntrinsicColumnWidth(),
            border: TableBorder.all(color: Colors.grey.shade200, width: 5),
            children: [
              TableRow(children: [
                Padding(
                    padding:
                        EdgeInsets.symmetric(vertical: 15, horizontal: 40),
                    child: Center(
                        child: Text(
                      'Title 1',
                      style: customTextStyle,
                    ))),
                Padding(
                    padding:
                    EdgeInsets.symmetric(vertical: 15, horizontal: 40),
                    child: Center(
                        child: Text(
                          'Title 2',
                          style: customTextStyle,
                        ))),
                Padding(
                    padding:
                    EdgeInsets.symmetric(vertical: 15, horizontal: 40),
                    child: Center(
                        child: Text(
                          'Title 3',
                          style: customTextStyle,
                        ))),
                Padding(
                    padding:
                    EdgeInsets.symmetric(vertical: 15, horizontal: 40),
                    child: Center(
                        child: Text(
                          'Title 4',
                          style: customTextStyle,
                        ))),
              ]),
              TableRow(children: [
                Padding(
                    padding:
                    EdgeInsets.symmetric(vertical: 15, horizontal: 40),
                    child: Center(
                        child: Text(
                          'Value 1',
                          style: customCellTextStyle,
                        ))),
                Padding(
                    padding:
                    EdgeInsets.symmetric(vertical: 15, horizontal: 40),
                    child: Center(
                        child: Text(
                          'Value 2',
                          style: customCellTextStyle,
                        ))),
                Padding(
                    padding:
                    EdgeInsets.symmetric(vertical: 15, horizontal: 40),
                    child: Center(
                        child: Text(
                          'Value 3',
                          style: customCellTextStyle,
                        ))),
                Padding(
                    padding:
                    EdgeInsets.symmetric(vertical: 15, horizontal: 40),
                    child: Center(
                        child: Text(
                          'Value 4',
                          style: customCellTextStyle,
                        ))),
              ]),
            ],
          ),
        ),
      ],
    ),
  ),

Answer 2

尝试一下，

Scrollbar(
      
        child: <Widget>[
          SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: Table(
...

这些资源可能会对您或将来的任何人有所帮助，https://github .com/flutter/flutter/issues/35445，