советы и размышления о разделении логики и экрана

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

 `List device = [
    [Icons.lightbulb,'Свет',false],
    [Icons.lightbulb,'Свет',false],
    [Icons.lightbulb,'Свет',false],
    [Icons.lightbulb,'Свет',false],
  ];`

`Expanded(
          child: GridView.builder(
            itemCount: 4,
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                childAspectRatio: 1/1.5,
                crossAxisCount: 2),
            itemBuilder: (context, index) => Components(
              icon: device[index][0],
              second: device[index][1],
              value: device[index][2],
              onChanged: (value) {
                setState(() {
                  device[index][2] = !device[index][2];
                });
              },
            ),
          ),
        )`

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

Разделение логики и представления является ключевым аспектом разработки программного обеспечения, особенно в контексте использования таких фреймворков, как Flutter. Чтобы сделать ваш код более читабельным и поддерживаемым, важно понимать, как достичь этой цели в рамках вашего текущего проекта.

1. Определение модели данных

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

class Device {
  final IconData icon;
  final String name;
  bool isActive;

  Device({required this.icon, required this.name, this.isActive = false});
}

Такое оформление позволяет вам чётко определять, какие свойства имеет устройство и упрощает управление состоянием.

2. Замена списка моделей

Теперь вам нужно заменить ваш текущий список device на список объектов Device:

List<Device> devices = [
  Device(icon: Icons.lightbulb, name: 'Light'),
  Device(icon: Icons.lightbulb, name: 'Light'),
  Device(icon: Icons.lightbulb, name: 'Light'),
  Device(icon: Icons.lightbulb, name: 'Light'),
];

3. Обновление GridView

Ваша реализация GridView.builder должна быть изменена для работы с новыми объектами модели:

Expanded(
  child: GridView.builder(
    itemCount: devices.length,
    gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
      childAspectRatio: 1/1.5,
      crossAxisCount: 2,
    ),
    itemBuilder: (context, index) => Components(
      icon: devices[index].icon,
      second: devices[index].name,
      value: devices[index].isActive,
      onChanged: (value) {
        setState(() {
          devices[index].isActive = value;
        });
      },
    ),
  ),
)

4. Используйте Reactivity

Избегайте использования локального состояния (например, переменная device, такие как в вашем коде). Вместо этого рассмотрите возможность использования ChangeNotifier для создания модели, которая уведомляет слушателей при изменении данных.

class DeviceModel extends ChangeNotifier {
  final List<Device> _devices;

  DeviceModel(this._devices);

  List<Device> get devices => _devices;

  void toggleDevice(int index) {
    _devices[index].isActive = !_devices[index].isActive;
    notifyListeners();
  }
}

5. Применение Provider или других методов управления состоянием

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

ChangeNotifierProvider(
  create: (context) => DeviceModel(devices),
  child: YourWidgetTree(),
);

В Components, вы можете получить доступ к состоянию с помощью Provider:

onChanged: (value) {
  Provider.of<DeviceModel>(context, listen: false).toggleDevice(index);
}

Заключение

Эти шаги помогут вам реализовать лучшую разделяемость между логикой и представлением в вашем приложении на Flutter. Стремясь к чистому архитектурному подходу, вы не только улучшите читабельность своего кода, но и создадите основу для дальнейшей масштабируемости и поддержки. Помните: хорошо структурированный код — это залог вашего успеха в разработке программного обеспечения.