Как сделать горизонтальный виджет прокручиваемой таблицы во Flutter

Я хочу сделать столбцы таблицы в прокручиваемом горизонтальном направлении во Flutter. Как этого добиться? Помните, мы говорили о Table Widget, а не о DataTable?

2 ответа

Вы можете попробовать это, чтобы сделать виджет таблицы флаттера горизонтально прокручиваемым,

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

Попробуй это,

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

Вот некоторые источники, которые могут помочь вам или кому-либо в будущем, https://github.com/flutter/flutter/issues/35445 ,

Другие вопросы по тегам