Вставить операцию в DataTable во Flutter

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

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

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

Создание данных класса

Используется для создания объектов из класса, чтобы избежать дублирования

Например:

Product P1-new Product(1, "PName");

Начиная

Первое создание переменных данных, которые нам нужны, с использованием var или Set Type(int, String)

var Var1, Var2;

Создание конструктора, который устанавливает данные и должен иметь то же имя, что и класс,

ClassName( this.Var1, this.Var1,);

Синтаксис:

class ClassName {
    final int Col1;
    final String Col2;

    ClassName(this.Col1, this.Col2,);
}

Код вставки

Из-за того, что данные извлекаются из списка, Insert будет новым объектом в списке.

ClassName Obj = ClassName(Col1);
List.add(Obj);

Код таблицы данных

DataTable(
    columns: [
        DataColumn(label: Text("Col1"),),
        rows: List.map((p) => DataRow(cells:[
            DataCell (Text(p.Col.toString()),),
        
]),
    ]
)

Пример кода

Dart

import "package:flutter/material.dart";
// Main method
void main() => runApp(InsertDataTable());
// Class person that initialize the data fields
class Persons {
  int ID, Age;
  String Name, LastName;
  Persons(this.ID, this.Name, this.LastName, this.Age);
}
 
class InsertDataTable extends StatefulWidget {
  @override
  _InsertDataTableState createState() => new _InsertDataTableState();
}
 
class _InsertDataTableState extends State<InsertDataTable> {
  List<Persons> PersonsLst = <Persons>[
    Persons(1, "Alex", "Anderson", 18),
    Persons(2, "John", "Anderson", 24),
  ];
 
  final formKey = new GlobalKey<FormState>();
  var ID_Controller = new TextEditingController();
  var Name_Controller = new TextEditingController();
  var LastName_Controller = new TextEditingController();
  var Age_Controller = new TextEditingController();
  var lastID = 2;
 
  @override
  // Method that call only once to initiate the default app.
  void initState() {
    super.initState();
    lastID++;
    ID_Controller.text = lastID.toString();
  }
  // Method that is used to refresh the UI and show the new inserted data.
  refreshList() {
    setState(() {
      ID_Controller.text = lastID.toString();
    });
  }
  // Method used to validate the user data
  validate() {
    if (formKey.currentState!.validate()) {
      formKey.currentState!.save();
      String ID = ID_Controller.text;
      String N = Name_Controller.text;
      String LN = LastName_Controller.text;
      String A = Age_Controller.text;
      Persons p = Persons(int.parse(ID), N, LN, int.parse(A));
      PersonsLst.add(p);
      lastID++;
      refreshList();
      Name_Controller.text = "";
      LastName_Controller.text = "";
      Age_Controller.text = "";
    }
  }
 // Method to check the value of age, age is int or not
  bool NotIntCheck(var N) {
    final V = int.tryParse(N);
 
    if (V == null) {
      print("Not Int");
      return true;
    } else {
      print("Int");
      return false;
    }
  }
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // MaterialApp with home as scaffold
      home: Scaffold(
        appBar: AppBar(
          title: Text("Insert Into  Data Table"),
        ),
        body: ListView(
          children: <Widget>[
            Form(
              key: formKey,
              child: Padding(
                padding: EdgeInsets.all(15.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text("Person ID:"),
                    TextField(
                      controller: ID_Controller,
                      enabled: false,
                    ),
                    Text("Person Name:"),
                    TextFormField(
                      controller: Name_Controller,
                      keyboardType: TextInputType.text,
                      validator: (val) =>
                          val?.length == 0 ? "Enter Person Name" : null,
                    ),
                    Text("Person Last Name:"),
                    TextFormField(
                      controller: LastName_Controller,
                      keyboardType: TextInputType.text,
                      validator: (val) =>
                          val?.length == 0 ? "Enter Person LastName" : null,
                    ),
                    Text("Person Age:"),
                    TextFormField(
                      controller: Age_Controller,
                      maxLength: 2,
                      keyboardType: TextInputType.number,
                      validator: (val) => NotIntCheck(val)
                          ? "Enter Person Age,Number Required"
                          : null,
                    ),
                    SizedBox(
                      width: double.infinity,
                      child: MaterialButton(
                        color: Colors.green,
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(30.0),
                        ),
                        child: Text(
                          "Insert Person",
                          style: TextStyle(
                            color: Colors.white,
                          ),
                        ),
                        onPressed: validate,
                      ),
                    ),
                  ],
                ),
              ),
            ),
            SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              child: DataTable(
                columns: [
                  DataColumn(
                    label: Text("ID"),
                  ),
                  DataColumn(
                    label: Text("Name"),
                  ),
                  DataColumn(
                    label: Text("LastName"),
                  ),
                  DataColumn(
                    label: Text("Age"),
                  ),
                ],
                rows: PersonsLst.map(
                  (p) => DataRow(cells: [
                    DataCell(
                      Text(p.ID.toString()),
                    ),
                    DataCell(
                      Text(p.Name),
                    ),
                    DataCell(
                      Text(p.LastName),
                    ),
                    DataCell(
                      Text(p.Age.toString()),
                    ),
                  ]),
                ).toList(),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Выходной интерфейс:

Код Пояснение

main — это основной метод, вызываемый после загрузки программы.
После загрузки программы runApp запустится и вызовет созданный нами класс (InsertDataTable) для выполнения.
Перед созданием InsertDataTable нам нужно создать классы, которые создают объекты.
Создание лиц класса, используемых для создания объектов-лиц.
Создание информационных переменных ID, возраста, целочисленного типа, имени и фамилии в виде строки.
Создание конструктора, который устанавливает информацию о каждом объекте, имеет одно и то же имя класса.
Теперь начните создание основного класса InsertDataTable с сохранением состояния из-за изменения состояния (выборка новых данных) и создание его состояния.
Создание списка PersonsList, который будет содержать объекты Person, содержащие 2 объекта Person.
Создание формы, которая будет проверять каждое значение TextField , чтобы избежать сохранения неправильных или нулевых данных.
Из-за того, что пользователь может вставлять свои собственные данные, нам нужно создать TextEditingControllers для получения данных.
Создание переменной LastID, инициализированной до 2 из-за 2 объектов, созданных в PersonsList в начале, после вставки мы увеличим идентификатор.
Как только страница загружена, мы инициализируем ее состояние и увеличиваем LastID, чтобы получить номер 3, и помещаем это значение в контроллер ID TextField.
Создайте RefreshList, который обновляет данные DataTable, взятые из PersonsList, и установите новый идентификатор для TextField (увеличивается при нажатии кнопки «Вставить» после проверки).
Создайте метод проверки, который проверяет, проверено ли оно. Если подтверждено, то мы принимаем каждое значение, введенное пользователем, и добавляем его в список в объект.
После добавления новых лиц объекта, увеличения идентификатора, очистки поля и обновления списка, чтобы принять новый объект.
Из-за того, что возраст является целым числом, нам нужно проверить значение, мы создаем метод, который будет проверять его всякий раз, когда целое или нет, возвращая true или false.
Тело содержит ListView , который позволяет прокручивать и избегать переполнения. Представление списка принимает форму , известную по ее ключу (используется для проверки формы (все текстовые поля)), используя столбец, помещающий тексты, текстовые поля и кнопку.
Каждое поле TextFormField имеет свой контроллер (используется для вставки данных) и валидатор, который проверяет данные (длина 0, если символы не были вставлены, проверьте, если int в возрасте) с сообщением об ошибке, которое будет отображаться в случае ошибки.
SingleChildScrollView принимает Single Child DataTable, который принимает столбцы и строки.
Столбцы, принимающие DataColumns, имеют свою метку, наконец, строки отображаются списком.

Выход:

Android Flutter Dart