Что такое архитектурный паттерн Skeleton и как он реализовывается в Flutter?

Пожалуйста объясните в чем заключается архитектурный паттерн Skeleton и как он реализуется в приложении на Dart/Flutter, или дайте ссылку на статью где объясняется. Как в нем менеджить state?


Ответы (1 шт):

Автор решения: hedgehogues

Архитектурный паттерн Skeleton (или "Скелет") определяет общую структуру приложения, но не определяет его функциональности. Он представляет собой систему, которая создает общую структуру приложения и определяет то, какие компоненты будут в нем использоваться, но не определяет, как эти компоненты будут взаимодействовать друг с другом.

В Flutter, архитектурный паттерн Skeleton может быть реализован с помощью класса "StatefulWidget". Этот класс представляет собой виджет, который хранит свое состояние и обновляет его, когда состояние изменяется. Для управления состоянием внутри виджета можно использовать метод "setState", который обновляет состояние и перерисовывает виджет.

Например, вот так может выглядеть реализация архитектурного паттерна Skeleton в Flutter:

import 'package:flutter/material.dart';

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My App'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('You have pushed the button this many times:'),
            Text('$_counter', style: Theme.of(context).textTheme.headline4),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

В этом примере мы создаем виджет "MyApp", который является реализацией архитектурного паттерна Skeleton. Он содержит состояние (переменную "_counter") и метод "_incrementCounter", который увеличивает эту переменную на 1 и вызывает "setState" для обновления состояния и перерисовки виджета.

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


В Flutter, состояние (state) может быть управляемо на разных уровнях абстракции. Например, состояние виджета может быть управляемо с помощью класса "StatefulWidget" и метода "setState", как мы увидели в примере реализации архитектурного паттерна Skeleton.

Также существует более высокий уровень абстракции - библиотека "provider" - которая позволяет управлять состоянием на более высоком уровне и связывать состояние с виджетами в вашем приложении. С ее помощью вы можете создавать "поставщики" (providers) состояния, которые хранят данные и уведомляют свои потребители об изменениях в этих данных. Это позволяет управлять состоянием на более высоком уровне и связывать его с виджетами в вашем приложении без необходимости наследования от "StatefulWidget".

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class Counter with ChangeNotifier {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => Counter(),
      child: Scaffold(
        appBar: AppBar(
          title: Text('My App'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('You have pushed the button this many times:'),
              Consumer<Counter>(
                builder: (context, counter, child) {
                  return Text(
                    '${counter.count}',
                    style: Theme.of(context).textTheme.headline4,
                  );
                },
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            context.read<Counter>().increment();
          },
          tooltip: 'Increment',
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

В этом примере мы создаем класс "Counter", который реализует интерфейс "ChangeNotifier" и хранит состояние - переменную "_count". Он также содержит метод "increment", который увеличивает эту переменную на 1 и вызывает "notifyListeners" для уведомления об изменениях в состоянии.

Затем мы оборачиваем виджет "MyApp" в "ChangeNotifierProvider", чтобы создать экземпляр "Counter" и сделать его доступным для других виджетов в дереве.


Вот некоторые ссылки, где вы можете найти более подробную информацию об управлении состоянием (state) в Flutter:


Вот некоторые ссылки, где вы можете найти более подробную информацию об архитектурном паттерне Skeleton в Dart/Flutter:

→ Ссылка