Лучшая структура для размещения стола (Flutter) - PullRequest
Новая
       2

Лучшая структура для размещения стола (Flutter)

0 голосов
/ 05 мая 2020

В функции виджета я возвращаю столбец, а затем добавляю несколько строк для отображения текста и данных. Я хочу добавить таблицу, которая отображается под текстовыми строками, и они должны выглядеть, как на рисунке ниже. Таблица также должна масштабироваться, чтобы уместиться на экранах меньшего размера. Какой объект / функцию я должен использовать для достижения этого вида, имея возможность интегрировать его в возврат моей функции виджета?

Table Structure I want to add

Код: 

return Container(
      padding: EdgeInsets.only(left: 15),
      child:
        Column(
          children: [
            Row(
              children: [
              cell(Text("Time:", textAlign: TextAlign.right)),
              cell(Text(getCatchableTime())),
            ]),
            Row(
              children: [
              cell(Text("Location:", textAlign: TextAlign.right)),
              cell(Text(location(locale))),
            ]),
            Row(children: [
              cell(Text("Price:", textAlign: TextAlign.right)),
              cell(Text("$price ★")),
            ]),
            Row(
              children: [
              cell(Text("Size:", textAlign: TextAlign.right)),
              cell(Text(getShadowsize(localization))),
            ]),
          ],
        ),

      );

1 Ответ

0 голосов
/ 05 мая 2020

Вы можете использовать таблицу данных дизайна материалов Flutter. Виджет позволяет вам построить таблицу, размер столбцов которой будет автоматически изменяться в соответствии с содержимым ячеек.

Сначала добавьте виджет DataTable () и определите его столбцы. Затем определите каждую строку и ячейки в каждой из них. И вуаля, у вас есть DataTable.

Но подождите, это еще не все. Вы можете показать, как сортируется таблица. Вы можете сделать столбец числовым, принудительно выровняв его по правому краю в локали слева направо. Вы можете показать, что строка выбрана. Вы можете показать, что ячейка доступна для редактирования или еще не заполнена.

Все элементы DataTable обеспечивают удобные обратные вызовы, поэтому вы можете реализовать, как пользователь должен редактировать, выбирать или сортировать данные. Также не забывайте, что все является виджетом. Поэтому не стесняйтесь помещать любой виджет в ячейки данных.

Если возможно, что все ваши данные не поместятся в горизонтальном пространстве, например, на маленьких телефонах, оберните виджет SingleChildScrollView.

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

По этой причине, если у вас много данных (скажем, более дюжины строк с дюжиной столбцов, хотя точные ограничения зависят от целевого устройства), рекомендуется, чтобы вы используйте PaginatedDataTable, который автоматически разбивает данные на несколько страниц.

...