Таблица данных Flutter с переключателем в качестве виджета

На чтение 3 мин Опубликовано 06.10.2024

Содержание

Вопрос или проблема
Ответ или решение
Объяснение кода:

Вопрос или проблема

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

Но как я могу установить Switch в данных, если логика сама находится в другом месте?

Поэтому я создал таблицу данных следующим образом:

Состояние .....
....
class MyCountriesState extends State<MyCountries> {
var test = Dummy();
....
body: SingleChildScrollView(
    scrollDirection: Axis.horizontal,
    child: SizedBox(
      width: 400,
      child: ListView(
        children: [_createDataTable()],
      ),
    ),
   ),
  );
 }

DataTable _createDataTable() {
return DataTable(
  columns: _createColumns(),
  rows: _createRows(),
);
}

List<DataColumn> _createColumns() {
return [
  DataColumn(
    label: Text('Страна'),
  ),
  DataColumn(label: Text('Кнопка')),
];
}

List<DataRow> _createRows() {
return test.countries
    .map((link) => DataRow(cells: [
          DataCell(Text(link['country'])),
          DataCell((link["status"]))
        ]))
     .toList();
  }
  }

Виджет получает свои данные из другого файла dart, который выглядит следующим образом:

import 'package:flutter/material.dart';

class Dummy {
List<Map<String, dynamic>> _countries = [
{
  "country": "Китай",
  "status": Switch(
    inactiveThumbColor: Colors.white,
    activeColor: Colors.white,
    activeTrackColor: Colors.green,
    inactiveTrackColor: Colors.grey,
    value: true,
    onChanged: (value) {},
  ),
  },
  ];
  List<Map<String, dynamic>> get countries => _countries;
  }

Ответ или решение

Для задачи использования виджета Switch в DataTable с данными, полученными из другого класса, необходимо правильно интегрировать состояние переключателя с данными в таблице.

Вот подход к решению этой проблемы:

Измените структуру данных: Вместо хранения Switch как виджета в списке стран, храните только состояние переключателя (true/false).
Создайте метод управления состоянием: Добавьте логику для изменения состояния каждого переключателя, чтобы обновлять интерфейс и отображать актуальные данные.

Ниже предлагается пример того, как это можно сделать:

import 'package:flutter/material.dart';

class Dummy {
  List<Map<String, dynamic>> _countries = [
    {"country": "China", "status": true},
    {"country": "India", "status": false},
    {"country": "Russia", "status": true},
  ];

  List<Map<String, dynamic>> get countries => _countries;

  void updateStatus(int index, bool newStatus) {
    _countries[index]['status'] = newStatus;
  }
}

class MyCountries extends StatefulWidget {
  @override
  _MyCountriesState createState() => _MyCountriesState();
}

class _MyCountriesState extends State<MyCountries> {
  var test = Dummy();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('DataTable with Switch Example'),
      ),
      body: SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: DataTable(
          columns: _createColumns(),
          rows: _createRows(),
        ),
      ),
    );
  }

  List<DataColumn> _createColumns() {
    return [
      DataColumn(label: Text('Страна')),
      DataColumn(label: Text('Статус')),
    ];
  }

  List<DataRow> _createRows() {
    return List<DataRow>.generate(test.countries.length, (index) {
      var countryData = test.countries[index];
      return DataRow(cells: [
        DataCell(Text(countryData['country'])),
        DataCell(Switch(
          value: countryData['status'],
          onChanged: (bool newValue) {
            setState(() {
              test.updateStatus(index, newValue);
            });
          },
        )),
      ]);
    });
  }
}

void main() {
  runApp(MaterialApp(
    home: MyCountries(),
  ));
}

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

Dummy класс: Содержит список стран и их статусов (логическое значение). Метод updateStatus обновляет статус конкретной страны.
MyCountries виджет: Это главный виджет, который отображает DataTable. Он реализует стейт, чтобы поддерживать обновление данных.
Создание строк: В _createRows создаются строки для таблицы, где в ячейке статуса находится переключатель (Switch). При его изменении происходит вызов метода updateStatus, который обновляет состояние в Dummy.
Обновление интерфейса: Используя setState, обновление переключателя приводит к перерисовке виджета с актуальными данными.

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