如何在Flutter中制作水平滚动表控件

iih3973s  于 2023-03-13  发布在  Flutter
关注(0)|答案(2)|浏览(161)

我想使表列在水平方向滚动的Flutter。如何做到这一点?记得谈到表小部件而不是数据表?

2ic8powd

2ic8powd1#

试试这个

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

这些资源可能会帮助你或任何人在未来,https://github.com/flutter/flutter/issues/35445

nszi6y05

nszi6y052#

您可以尝试这样做,使flutter表小部件可以水平滚动,

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,
                        ))),
              ]),
            ],
          ),
        ),
      ],
    ),
  ),

相关问题