什么是 Skeleton 架构模式，它在 Flutter 中是如何实现的？

架构模式骨架（或“骨架”）定义了应用程序的整体结构，但没有定义其功能。它是一个系统，它创建应用程序的整体结构并确定其中将使用哪些组件，但不确定这些组件将如何相互交互。

在 Flutter 中，可以使用“StatefulWidget”类来实现 Skeleton 架构模式。此类是一个小部件，用于存储其状态并在状态更改时对其进行更新。要管理小部件内的状态，您可以使用“setState”方法，该方法更新状态并重绘小部件。

例如，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”小部件，它是骨架架构模式的一个实现。它包含一个状态（变量“_counter”）和一个方法“_incrementCounter”，该方法将此变量递增 1 并调用“setState”来更新状态并重绘小部件。

“MyApp”小部件将显示“_counter”变量的当前值和一个在单击时递增该值的按钮。因此，我们在 Flutter 中实现了 Skeleton 架构模式，并使用“

在 Flutter 中，状态可以在不同的抽象层次上进行管理。例如，可以使用“StatefulWidget”类和“setState”方法来管理小部件的状态，正如我们在骨架架构模式的实现示例中看到的那样。

还有更高级别的抽象——“提供者”库——它允许您在更高级别管理状态并将状态与应用程序中的小部件相关联。有了它，您可以创建状态“提供者”来存储数据并通知消费者数据的更改。这允许您在更高级别管理状态并将其与应用程序中的小部件相关联，而无需继承自“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”变量。它还包含一个“增量”方法，该方法将此变量递增 1 并调用“notifyListeners”以通知状态变化。

然后，我们将“MyApp”小部件包装在“ChangeNotifierProvider”中以实例化“计数器”并使其可供树中的其他小部件使用。

以下是一些链接，您可以在其中找到有关 Flutter 中状态管理的更多信息：

• Flutter 官方文档：https ://flutter.dev/docs/development/data-and-backend/state-mgmt/intro
• “提供者”库：https ://pub.dev/packages/provider
• 关于 Flutter 中状态管理的博文：https ://www.didierboelens.com/2019/10/managing-state-in-flutter-using-the-provider-package/

以下是一些链接，您可以在其中找到有关 Dart/Flutter 中骨架架构模式的更多信息：

• Flutter官方文档：https ://flutter.dev/docs/development/ui/widgets/stateful-widget
• 关于 Flutter 架构模式的博文：https ://www.didierboelens.com/2019/05/architecture-patterns-with-flutter-bloc-scopedmodel-redux-and-rx/
• 关于在 Flutter 中实现 Skeleton 架构模式的博文：https ://medium.com/flutter-community/flutter-architecture-patterns-skeleton-screens-f5c20d5edcaf
• Flutter中Skeleton架构模式的实现视频：https ://www.youtube.com/watch?v=7F_8G4fZQO4