Таблица данных во Flutter

Опубликовано: 9 Января, 2023

DataTable — это дизайн материала, используемый для отображения данных в таблице или в строках и столбцах. Таблица данных используется для отображения данных, которые имеют столбцы и строки в качестве дочерних, столбец используется для установки имени столбца, а строка используется для установки значений столбцов. Любой столбец в DataTable может быть отсортирован на его основе в порядке возрастания или убывания. Если sortColumnIndex не равен нулю, таблица будет отсортирована в соответствии со значениями в указанном столбце. Порядок сортировки определяется логическим флагом sortAscending.

Для получения дополнительной информации см. Учебник по Dart .

Синтаксис в Дарте:

DataTable(
    // datatable widget
    columns: [
        // column to set the name
        DataColumn(label: Text("Col1"),),
        DataColumn(label: Text("Col2"),),
    ],

    rows: [
        // row to set the values
        DataRow(cells: [
            DataCell(Text("ValCol1")),
            DataCell(Text("ValCol2")),
        ]),
    ],
)

Пример кода:

Dart

import "package:flutter/material.dart";
// main method that runs the runApp.
  
void main() => runApp(SimpleDataTable());
  
class SimpleDataTable extends StatelessWidget{
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // MaterialApp with debugShowCheckedModeBanner false and home
      debugShowCheckedModeBanner: false,
      theme: ThemeData.light(),
      home: Scaffold(
        // Scaffold with appbar ans body.
        appBar: AppBar(
          title: Text("Simple Data Table"),
        ),
        body:
        SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          child: DataTable(
            // Datatable widget that have the property columns and rows.
            columns: [
              // Set the name of the column
              DataColumn(label: Text("ID"),),
              DataColumn(label: Text("Name"),),
              DataColumn(label: Text("LastName"),),
              DataColumn(label: Text("Age"),),
            ],
            rows:[
              // Set the values to the columns 
              DataRow(cells: [
                DataCell(Text("1")),
                DataCell(Text("Alex")),
                DataCell(Text("Anderson")),
                DataCell(Text("18")),
              ]),
              DataRow(cells: [
                DataCell(Text("2")),
                DataCell(Text("John")),
                DataCell(Text("Anderson")),
                DataCell(Text("24")),
              ]),
            ]
          ),
        ),
      ),
    );
  }
}

Объяснение кода:

main — это основной метод, вызываемый после загрузки программы.
После загрузки программы runApp запустится и вызовет созданный нами класс (SimpleDataTable) для выполнения.
Этот класс является виджетом без сохранения состояния , поскольку показанные данные будут фиксированными (без изменений).
Поскольку Flutter основан на виджетах, виджет должен быть создан.
Создание MaterialApp , которое позволяет нам использовать Scaffold.
Scaffold позволяет нам использовать AppBar и Body.
AppBar имеет простой заголовок.
Тело содержит SingleChildScrollView, используемое для горизонтальной прокрутки и предотвращения переполнения из-за мобильного устройства с малой шириной экрана.
SingleChildScrollView принимает Single Child DataTable , который принимает столбцы и строки.
Столбцы, представленные в DataColumn , которые принимают метку.
Строки, представленные в DataRow, принимают ячейки, за которыми следует DataCell , который принимает любой виджет, представляющий каждое значение столбца строки.

Выход: