Проблемы с шириной столбца DataTable

Я пытаюсь построить полную ширину DataTable в Flutter со столбцом фиксированной ширины слева и двумя другими столбцами, которые должны разделить оставшиеся.

Однако, даже если текст левого заголовка усечен, средний и правый столбцы не занимают оставшуюся ширину, как вы можете видеть ниже:

Скриншот таблицы

Я также хотел бы обернуть текст в ячейку, когда он слишком широк для отображения в одной строке, но Wrap не работает должным образом.

Как я могу решить свои проблемы?

Вот код:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Column(children: [
          Expanded(
            child: Container(
              constraints: BoxConstraints.expand(width: double.infinity),
              child: SingleChildScrollView(
                child: DataTable(
                    headingRowHeight: 32,
                    dataRowHeight: 24,
                    columns: [
                      DataColumn(
                        label: ConstrainedBox(
                          constraints: BoxConstraints(
                            maxWidth: 20,
                            minWidth: 20,
                          ),
                          child: Text('Short column'),
                        ),
                      ),
                      DataColumn(label: Text('Long column')),
                      DataColumn(label: Text('Long column')),
                    ],
                    rows: [
                      DataRow(
                        cells: [
                          DataCell(
                            ConstrainedBox(
                              constraints: BoxConstraints(
                                maxWidth: 20,
                                minWidth: 20,
                              ),
                              child: Text('1'),
                            ),
                          ),
                          DataCell(
                            Wrap(
                              children: [
                                Text(
                                    """Some long content i would like to be wrapped when column width is not
                              enought to fully display it"""),
                              ],
                            ),
                          ),
                          DataCell(Text('Some more text')),
                        ],
                      ),
                      DataRow(
                        cells: [
                          DataCell(Container(
                            color: Colors.pink,
                            child: ConstrainedBox(
                              constraints: BoxConstraints(
                                maxWidth: 20,
                                minWidth: 20,
                              ),
                              child: Text('2'),
                            ),
                          )),
                          DataCell(
                            Wrap(
                              children: [
                                Container(
                                    color: Colors.yellow,
                                    child: Text(
                                        """Some long content i would like to be wrapped when column width is not
                              enought to fully display it""")),
                              ],
                            ),
                          ),
                          DataCell(Text('Some more text')),
                        ],
                      )
                    ]),
              ),
            ),
          ),
        ]),
      ),
    );
  }
}

ИЗМЕНИТЬ

Спасибо @awaik за ответ, но в вашем примере таблица не занимает всю ширину устройства, она остается посередине с большим экраном, а это не то, что я хотел.

Кроме того, высота строки постоянна, она не увеличивается, если содержимому требуется большая высота.

Есть ли что-нибудь, что можно сделать?


flutter datatable flutter-desktop width
person Ansharja    schedule 09.05.2020    source источник

Ответы (2)


arrow_upward
3
arrow_downward

DataTable имеет некоторые значения по умолчанию:

DataTable({
  Key key,
  @required this.columns,
  this.sortColumnIndex,
  this.sortAscending = true,
  this.onSelectAll,
  this.dataRowHeight = kMinInteractiveDimension,
  this.headingRowHeight = 56.0,
  this.horizontalMargin = 24.0,
  this.columnSpacing = 56.0,

Ниже исправлен пример с некоторыми удаленными виджетами.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: SafeArea(
          child: DataTable(
            horizontalMargin: 6.0,
            columnSpacing: 6.0,
            headingRowHeight: 32.0,
            dataRowHeight: 100.0,
            columns: [
              DataColumn(
                label: ConstrainedBox(
                  constraints: BoxConstraints(
                    maxWidth: 20,
                    minWidth: 20,
                  ),
                  child: Text('Short column'),
                ),
              ),
              DataColumn(label: Text('Long column')),
              DataColumn(label: Text('Three')),
            ],
            rows: [
              DataRow(
                cells: [
                  DataCell(
                    Text('1'),
                  ),
                  DataCell(
                    Container(
                      child: Text(
                        'Some long content i would like to be wrapped ',
                      ),
                    ),
                  ),
                  DataCell(Text('Some more text')),
                ],
              ),
              DataRow(
                cells: [
                  DataCell(Container(
                    color: Colors.pink,
                    child: Text('2'),
                  )),
                  DataCell(
                      Container(
                        height: 500,
                        color: Colors.yellow,
                        child: Text(
                          'Some long content i would like to be wrapped when column width is not enought to fully display itSome long content i would like to be wrapped when column width is not display it Some long content i would like to be wrapped when column width is not enought to fully display itSome long content i would like to be wrapped when column width is not display it Some long content i would like to be wrapped when column width is not enought to fully display itSome long content i would like to be wrapped when column width is not display it 555',
                        ),
                      ),
                      placeholder: false),
                  DataCell(Text('Some more text')),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

ИЗМЕНИТЬ

  1. Код наверху обновился.
  2. Таблица не была взята на всю ширину, так как мы использовали многострочные строки с деревом """, если использовать обычную строку, то поведение нормальное.

  3. Высота строки задается в конструкторе и не может быть изменена динамически.

    дочерний элемент: DataTable( horizontalMargin: 6.0, columnSpacing: 6.0, headingRowHeight: 32.0, dataRowHeight: 100.0,

Наконец, моя личная точка зрения - проще создать свой виджет, чем использовать этот DataTable

введите здесь описание изображения

person awaik    schedule 12.05.2020
comment
Спасибо @awaik за ваш ответ, но это не решает мою проблему. Пожалуйста, проверьте мое редактирование - person Ansharja; 16.05.2020
comment
Я попробовал обновленный код, но он по-прежнему не занимает всю ширину. В любом случае, как вы сказали, я обнаружил, что DataTable, вероятно, не лучший виджет для моих нужд. - person Ansharja; 17.05.2020

arrow_upward
0
arrow_downward

Я обнаружил, что обычный Table позволяет мне делать то, что я хочу: я могу использовать FixedColumnWidth для определенного столбца и FlexColumnWidth для остальных, чтобы занять оставшееся место.

Кроме того, текст правильно переносится, а высота строки увеличивается, чтобы соответствовать содержимому, как на изображении ниже с маленькой шириной экрана и большой шириной экрана:

введите здесь описание изображения

И это код:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Column(children: [
          Expanded(
            child: Container(
              child: SingleChildScrollView(
                child: Table(
                  border: TableBorder.all(width: 1),
                  columnWidths: {
                    0: FixedColumnWidth(20),
                  },
                  defaultColumnWidth: FlexColumnWidth(),
                  children: [
                    TableRow(children: [
                      Text('Short column'),
                      Text('Long column'),
                      Text('Long column')
                    ]),
                    TableRow(
                      children: [
                        Text('1'),
                        Text(
                            'Some long content i would like to be wrapped when column width is not enought to fully display it'),
                        Container(
                          child: Text('Some more text'),
                        )
                      ],
                    )
                  ],
                ),
              ),
            ),
          ),
        ]),
      ),
    );
  }
}
person Ansharja    schedule 17.05.2020