Flutter设计模式实践：单例、工厂与观察者模式-代码聚汇网

Flutter设计模式实践：单例、工厂与观察者模式

Flutter设计模式单例模式

|难度：普通|阅读约 55 分钟

1. Flutter与设计模式的深度结合

Flutter作为Google推出的跨平台UI框架，其响应式编程模型和Widget树结构为设计模式的实现提供了独特土壤。在Flutter中应用设计模式不是简单的概念移植，而是需要考虑Dart语言特性和框架架构的深度适配。单例模式用于全局状态管理，工厂模式简化Widget创建流程，观察者模式则是实现响应式更新的核心机制。

提示：Flutter框架本身大量使用了观察者模式（如AnimationController）和工厂模式（如WidgetBuilder），理解这些模式有助于更高效地开发。

1.1 Flutter架构对设计模式的特殊要求

Flutter的不可变Widget树和Element树的分离设计，使得传统面向对象设计模式需要做出调整。例如实现单例时，需要考虑：

Widget重建时实例的保持
跨路由的状态共享
与Flutter原生状态管理方案的兼容性

我在实际项目中发现，直接套用Java/C++的设计模式实现往往会导致性能问题。比如在Dart中实现经典的双检锁单例：

dart复制class Singleton {
  static Singleton _instance;
  static Singleton get instance {
    if (_instance == null) {
      synchronized(Singleton) {
        if (_instance == null) {
          _instance = Singleton._internal();
        }
      }
    }
    return _instance;
  }
  
  Singleton._internal();
}

这种实现虽然线程安全，但在Flutter中可能造成不必要的重建开销。更Flutter化的做法是结合InheritedWidget：

dart复制class Singleton extends InheritedWidget {
  static Singleton of(BuildContext context) => 
    context.dependOnInheritedWidgetOfExactType<Singleton>();

  const Singleton({Key key, Widget child}) : super(key: key, child: child);

  @override
  bool updateShouldNotify(Singleton old) => false;
}

需要模型API调用？免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。

2. 单例模式在Flutter中的实践

2.1 全局状态管理的单例实现

Flutter中最常见的单例应用场景是全局状态管理。不同于传统的单例实现，我们需要考虑：

生命周期管理：单例对象应该与应用生命周期一致
跨组件访问：需要方便地在任何Widget中获取实例
响应式更新：状态变更时应自动触发UI更新

推荐使用get_it包实现的单例方案：

dart复制// 初始化
final getIt = GetIt.instance;

void setup() {
  getIt.registerSingleton<AppModel>(AppModel());
}

// 使用
final appModel = getIt.get<AppModel>();

2.2 单例模式的典型问题与解决方案

问题1：热重载失效

现象：修改单例类代码后热重载不生效
原因：Dart VM保留了单例实例
解决：开发时使用resetSingleton方法，或结合kDebugMode条件注册

问题2：测试污染

现象：单元测试间状态互相影响
解决：每个测试用例前重置单例：

dart复制setUp(() {
  GetIt.I.reset();
  setupSingletons();
});

问题3：内存泄漏

现象：单例持有Context导致内存无法释放
解决：避免直接持有BuildContext，改用GlobalKey

经验：在Flutter中，单例更适合管理纯数据层和服务层，UI相关状态建议使用Provider或Riverpod等专门方案。

3. 工厂模式在Widget构建中的应用

3.1 基于工厂方法的Widget创建

Flutter的Widget系统本身就是工厂模式的典型应用。我们可以进一步扩展这种模式：

dart复制abstract class DialogFactory {
  Widget create(BuildContext context);
}

class AlertDialogFactory implements DialogFactory {
  @override
  Widget create(BuildContext context) {
    return AlertDialog(
      title: Text('Alert'),
      content: Text('This is an alert'),
    );
  }
}

// 使用
void showDialog(DialogFactory factory) {
  showDialog(
    context: context,
    builder: (context) => factory.create(context),
  );
}

3.2 参数化工厂的实践技巧

对于需要动态创建的Widget，参数化工厂特别有用：

dart复制class ButtonFactory {
  final ButtonStyle style;
  
  ButtonFactory({required this.style});

  Widget create(String text, VoidCallback onPressed) {
    return ElevatedButton(
      style: style,
      onPressed: onPressed,
      child: Text(text),
    );
  }
}

// 初始化
final primaryButtonFactory = ButtonFactory(
  style: ButtonStyle(
    backgroundColor: MaterialStateProperty.all(Colors.blue),
  ),
);

// 使用
primaryButtonFactory.create('Submit', _handleSubmit);

性能优化点：

将工厂实例声明为const或final
对复杂Widget使用builder回调延迟构建
结合ListView.builder实现列表项工厂

4. 观察者模式与Flutter响应式系统

4.1 Stream与观察者模式的深度整合

Flutter内置的Stream本身就是观察者模式的实现。我们可以构建一个典型的观察者模式：

dart复制class DataModel {
  final _listeners = <VoidCallback>[];
  
  void addListener(VoidCallback listener) {
    _listeners.add(listener);
  }
  
  void removeListener(VoidCallback listener) {
    _listeners.remove(listener);
  }
  
  void notifyListeners() {
    for (final listener in _listeners) {
      listener();
    }
  }
}

// 在Widget中使用
class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  final model = DataModel();

  @override
  void initState() {
    super.initState();
    model.addListener(_handleChange);
  }

  @override
  void dispose() {
    model.removeListener(_handleChange);
    super.dispose();
  }

  void _handleChange() {
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

4.2 ChangeNotifier的最佳实践

Flutter提供的ChangeNotifier已经实现了观察者模式的基础功能：

dart复制class CartModel extends ChangeNotifier {
  final List<Item> _items = [];
  
  void add(Item item) {
    _items.add(item);
    notifyListeners();
  }
}

// 结合Provider使用
ChangeNotifierProvider(
  create: (context) => CartModel(),
  child: MyApp(),
);

// 在子Widget中访问
final cart = context.watch<CartModel>();

性能优化技巧：

对高频更新使用ValueNotifier
批量更新时使用notifyListeners()一次通知
对复杂对象实现==和hashCode避免不必要的重建

5. 设计模式组合应用实战

5.1 状态管理综合方案

结合单例和观察者模式实现全局状态管理：

dart复制class AppState extends ChangeNotifier {
  static AppState _instance;
  
  factory AppState() {
    _instance ??= AppState._internal();
    return _instance;
  }
  
  AppState._internal();
  
  ThemeData _theme = lightTheme;
  
  ThemeData get theme => _theme;
  
  void toggleTheme() {
    _theme = _theme == lightTheme ? darkTheme : lightTheme;
    notifyListeners();
  }
}

// 在MaterialApp中使用
Consumer<AppState>(
  builder: (context, appState, child) {
    return MaterialApp(
      theme: appState.theme,
      home: HomePage(),
    );
  },
);

5.2 复杂UI构建流程

使用工厂模式组合创建复杂UI：

dart复制class DashboardFactory {
  final List<TileFactory> tileFactories;
  
  Widget create(BuildContext context) {
    return GridView.count(
      crossAxisCount: 2,
      children: tileFactories.map((f) => f.create(context)).toList(),
    );
  }
}

abstract class TileFactory {
  Widget create(BuildContext context);
}

class StatsTileFactory implements TileFactory {
  @override
  Widget create(BuildContext context) {
    return Card(
      child: Center(child: Text('Statistics')),
    );
  }
}

6. 性能优化与调试技巧

6.1 设计模式实现的性能陷阱

单例内存泄漏检测：
- 使用DevTools的Memory视图
- 检查Expando和GlobalKey的使用
- 特别注意闭包捕获的上下文

观察者模式更新风暴：

dart复制// 错误示例
void update() {
  for (var i = 0; i < 1000; i++) {
    notifyListeners(); // 会触发1000次重建
  }
}

// 正确做法
void batchUpdate() {
  _batchMode = true;
  for (var i = 0; i < 1000; i++) {
    _internalUpdate();
  }
  _batchMode = false;
  notifyListeners(); // 只通知一次
}

6.2 设计模式调试技巧

日志追踪观察者通知：

dart复制void notifyListeners() {
  debugPrint('Notifying ${_listeners.length} listeners');
  super.notifyListeners();
}

工厂模式类型检查：

dart复制Widget create(BuildContext context) {
  assert(debugCheckHasMediaQuery(context));
  return _buildWidget(context);
}

单例生命周期监控：

dart复制class TrackedSingleton {
  static final _instances = <Type, TrackedSingleton>{};
  
  factory TrackedSingleton() {
    final instance = _createInstance();
    _instances[instance.runtimeType] = instance;
    return instance;
  }
  
  static void printInstances() {
    debugPrint('Active singletons: ${_instances.keys}');
  }
}

7. 测试策略与设计模式

7.1 单例模式的测试方案

dart复制test('Singleton should maintain state', () {
  final instance1 = Singleton.instance;
  final instance2 = Singleton.instance;
  
  expect(identical(instance1, instance2), isTrue);
  
  // 测试状态保持
  instance1.counter = 5;
  expect(instance2.counter, equals(5));
});

// 使用mockito测试单例依赖
test('Singleton with dependency', () {
  final mockService = MockService();
  when(mockService.fetch()).thenReturn('test');
  
  final singleton = Singleton.withService(mockService);
  expect(singleton.getValue(), equals('test'));
});

7.2 观察者模式的测试方法

dart复制test('Observable should notify listeners', () {
  final model = DataModel();
  var notified = false;
  
  model.addListener(() => notified = true);
  model.notifyListeners();
  
  expect(notified, isTrue);
});

test('ChangeNotifier should rebuild widget', () async {
  final model = CartModel();
  await tester.pumpWidget(
    ChangeNotifierProvider.value(
      value: model,
      child: MaterialApp(home: Consumer<CartModel>(/*...*/)),
    ),
  );
  
  final initialText = find.text('0 items');
  expect(initialText, findsOneWidget);
  
  model.add(Item('Test'));
  await tester.pump();
  
  expect(find.text('1 items'), findsOneWidget);
});

8. 设计模式在Flutter插件开发中的应用

8.1 插件接口的工厂模式实现

dart复制abstract class PaymentPlugin {
  factory PaymentPlugin(String platform) {
    switch (platform) {
      case 'android':
        return AndroidPaymentPlugin();
      case 'ios':
        return IosPaymentPlugin();
      default:
        throw UnsupportedError('Unsupported platform');
    }
  }
  
  Future<void> pay(double amount);
}

class AndroidPaymentPlugin implements PaymentPlugin {
  @override
  Future<void> pay(double amount) {
    // 调用Android原生代码
  }
}

8.2 插件事件总线的观察者模式

dart复制class PluginEventBus {
  final _listeners = <Type, List<Function>>{};
  
  void register<T>(void Function(T) listener) {
    _listeners[T] ??= [];
    _listeners[T].add(listener);
  }
  
  void emit<T>(T event) {
    (_listeners[T] ?? []).forEach((listener) => listener(event));
  }
}

// 在插件中使用
eventBus.emit(PaymentEvent.success());

9. 设计模式在Flutter Web的特殊考量

9.1 单例模式与浏览器标签页

浏览器多标签页会导致单例实例不共享的问题。解决方案：

dart复制class SharedSingleton {
  static SharedSingleton _instance;
  
  factory SharedSingleton() {
    if (_instance == null) {
      if (kIsWeb) {
        // 使用window.name保持单例
        _instance = window.name.isEmpty 
          ? SharedSingleton._internal()
          : SharedSingleton.fromJson(jsonDecode(window.name));
      } else {
        _instance = SharedSingleton._internal();
      }
    }
    return _instance;
  }
  
  void saveState() {
    if (kIsWeb) {
      window.name = jsonEncode(toJson());
    }
  }
}

9.2 Web Worker中的观察者模式

dart复制// main.dart
final worker = Worker('worker.dart.js');
worker.postMessage('init');

worker.onMessage.listen((message) {
  // 处理Web Worker通知
});

// worker.dart
void main() {
  final channel = MessageChannel();
  
  // 模拟观察者模式
  channel.stream.listen((message) {
    channel.postMessage('Processed: $message');
  });
}

10. 设计模式在Flutter桌面端的应用

10.1 原生菜单的单例控制

dart复制class MenuManager {
  static MenuManager _instance;
  
  factory MenuManager() {
    _instance ??= MenuManager._internal();
    return _instance;
  }
  
  MenuManager._internal() {
    _initPlatformMenu();
  }
  
  void _initPlatformMenu() {
    if (Platform.isMacOS) {
      // 创建macOS菜单
    } else if (Platform.isWindows) {
      // 创建Windows菜单
    }
  }
  
  void updateMenu(bool isEditing) {
    // 根据状态更新菜单项
  }
}

10.2 窗口管理的工厂模式

dart复制abstract class WindowFactory {
  Future<void> createWindow(String type);
}

class DocumentWindowFactory implements WindowFactory {
  @override
  Future<void> createWindow(String type) async {
    final window = await windowManager.createWindow(
      WindowConfig(
        title: 'Document $type',
        size: Size(800, 600),
      ),
    );
    
    window.loadContent(buildDocumentWindow(type));
  }
  
  Widget buildDocumentWindow(String type) {
    switch (type) {
      case 'text':
        return TextEditorWindow();
      case 'spreadsheet':
        return SpreadsheetWindow();
      default:
        throw UnsupportedError('Unknown document type');
    }
  }
}

11. 设计模式在Flutter状态管理库中的实现

11.1 Provider库中的观察者模式

Provider的核心实现就是观察者模式的变体：

dart复制class Provider<T> extends InheritedWidget {
  final T value;
  
  Provider({Key key, @required this.value, Widget child})
    : super(key: key, child: child);
  
  static T of<T>(BuildContext context) {
    final provider = context.dependOnInheritedWidgetOfExactType<Provider<T>>();
    return provider.value;
  }
  
  @override
  bool updateShouldNotify(Provider<T> old) => value != old.value;
}

11.2 Riverpod中的单例管理

Riverpod通过ProviderScope管理单例状态：

dart复制final counterProvider = Provider<int>((ref) {
  return 0;
});

class MyWidget extends ConsumerWidget {
  @override
  Widget build(BuildContext context, ScopedReader watch) {
    final count = watch(counterProvider);
    return Text('$count');
  }
}

实现要点：

每个Provider都是隐式单例
通过ref对象管理生命周期
自动处理依赖关系

12. 设计模式在Flutter动画系统中的应用

12.1 动画工厂模式

dart复制class AnimationFactory {
  static Animation<double> create(
    AnimationController controller,
    String type, {
    Curve curve = Curves.linear,
  }) {
    switch (type) {
      case 'fade':
        return Tween(begin: 0.0, end: 1.0).animate(
          CurvedAnimation(parent: controller, curve: curve),
        );
      case 'scale':
        return Tween(begin: 0.5, end: 1.0).animate(
          CurvedAnimation(parent: controller, curve: curve),
        );
      default:
        throw ArgumentError('Unknown animation type');
    }
  }
}

12.2 动画状态观察者

dart复制class AnimationObserver extends AnimationLocalStatusListenersMixin {
  final List<AnimationStatusListener> _listeners = [];
  
  @override
  void addStatusListener(AnimationStatusListener listener) {
    _listeners.add(listener);
  }
  
  @override
  void removeStatusListener(AnimationStatusListener listener) {
    _listeners.remove(listener);
  }
  
  void notifyStatusChange(AnimationStatus status) {
    for (final listener in _listeners) {
      listener(status);
    }
  }
}

13. 设计模式在Flutter路由管理中的应用

13.1 路由工厂模式

dart复制class RouteFactory {
  static Route<dynamic> generateRoute(RouteSettings settings) {
    switch (settings.name) {
      case '/home':
        return MaterialPageRoute(builder: (_) => HomePage());
      case '/details':
        final args = settings.arguments as DetailsArgs;
        return MaterialPageRoute(
          builder: (_) => DetailsPage(args: args),
        );
      default:
        return MaterialPageRoute(
          builder: (_) => Scaffold(
            body: Center(child: Text('No route defined')),
          ),
        );
    }
  }
}

// 在MaterialApp中使用
MaterialApp(
  onGenerateRoute: RouteFactory.generateRoute,
);

13.2 路由观察者模式

dart复制class RouteLogger extends NavigatorObserver {
  @override
  void didPush(Route route, Route previousRoute) {
    debugPrint('Route pushed: ${route.settings.name}');
  }
  
  @override
  void didPop(Route route, Route previousRoute) {
    debugPrint('Route popped: ${route.settings.name}');
  }
}

// 使用
MaterialApp(
  navigatorObservers: [RouteLogger()],
);

14. 设计模式在Flutter性能优化中的应用

14.1 缓存管理的单例模式

dart复制class ImageCacheManager {
  static final ImageCacheManager _instance = ImageCacheManager._internal();
  final _cache = <String, ui.Image>{};
  
  factory ImageCacheManager() => _instance;
  
  ImageCacheManager._internal();
  
  Future<ui.Image> load(String url) async {
    if (_cache.containsKey(url)) {
      return _cache[url];
    }
    
    final image = await _loadImage(url);
    _cache[url] = image;
    return image;
  }
}

14.2 性能数据观察者

dart复制class PerformanceMonitor extends ChangeNotifier {
  final _metrics = <String, double>{};
  
  void updateMetric(String name, double value) {
    _metrics[name] = value;
    notifyListeners();
  }
  
  void logFrameBuildTime(Stopwatch watch) {
    updateMetric('last_frame_ms', watch.elapsedMilliseconds.toDouble());
  }
}

// 在Widget中使用
class PerformanceOverlay extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final monitor = context.watch<PerformanceMonitor>();
    return Text('Last frame: ${monitor.metrics['last_frame_ms']}ms');
  }
}

15. 设计模式在Flutter测试中的应用

15.1 Mock工厂模式

dart复制class MockFactory {
  static T create<T>({List<MockBehavior> behaviors = const []}) {
    switch (T) {
      case NetworkService:
        return MockNetworkService(behaviors) as T;
      case DatabaseService:
        return MockDatabaseService(behaviors) as T;
      default:
        throw ArgumentError('No mock available for type $T');
    }
  }
}

class MockBehavior {
  final String methodName;
  final dynamic returnValue;
  
  MockBehavior(this.methodName, this.returnValue);
}

15.2 测试事件观察者

dart复制class TestEventObserver {
  final _events = <String>[];
  
  void recordEvent(String name) {
    _events.add(name);
  }
  
  void assertEvents(List<String> expected) {
    expect(_events, equals(expected));
  }
}

// 在测试中使用
test('Button click flow', () {
  final observer = TestEventObserver();
  final button = TestButton(observer: observer);
  
  button.click();
  
  observer.assertEvents(['click_started', 'click_processed']);
});

16. 设计模式在Flutter国际化中的应用

16.1 单例语言资源管理

dart复制class AppLocalizations {
  static AppLocalizations _instance;
  final Locale locale;
  final Map<String, String> _localizedStrings;
  
  factory AppLocalizations.of(BuildContext context) {
    return _instance ??= AppLocalizations(
      locale: Localizations.localeOf(context),
    );
  }
  
  AppLocalizations._internal({required this.locale}) 
    : _localizedStrings = _loadTranslations(locale);
    
  static Map<String, String> _loadTranslations(Locale locale) {
    // 加载对应语言资源
  }
  
  String get(String key) => _localizedStrings[key] ?? key;
}

16.2 语言变更观察者

dart复制class LanguageNotifier extends ChangeNotifier {
  Locale _locale = const Locale('en');
  
  Locale get locale => _locale;
  
  void change(Locale newLocale) {
    if (_locale != newLocale) {
      _locale = newLocale;
      notifyListeners();
    }
  }
}

// 在MaterialApp中使用
MaterialApp(
  locale: context.watch<LanguageNotifier>().locale,
  supportedLocales: AppLocalizations.supportedLocales,
);

17. 设计模式在Flutter插件开发中的高级应用

17.1 插件方法调用的工厂模式

dart复制abstract class PlatformMethodHandler {
  Future<dynamic> handle(MethodCall call);
}

class MethodHandlerFactory {
  static PlatformMethodHandler create(String platform) {
    switch (platform) {
      case 'android':
        return AndroidMethodHandler();
      case 'ios':
        return IosMethodHandler();
      default:
        throw UnsupportedError('Unsupported platform');
    }
  }
}

// 在插件中注册
MethodChannel('my_plugin').setMethodCallHandler((call) async {
  final handler = MethodHandlerFactory.create(Platform.operatingSystem);
  return handler.handle(call);
});

17.2 插件事件总线的观察者模式

dart复制class PluginEventBus {
  final _listeners = <String, List<Function>>{};
  
  void register(String eventName, Function listener) {
    _listeners[eventName] ??= [];
    _listeners[eventName].add(listener);
  }
  
  void emit(String eventName, [dynamic data]) {
    (_listeners[eventName] ?? []).forEach((listener) {
      if (listener is Function(dynamic)) {
        listener(data);
      } else if (listener is Function()) {
        listener();
      }
    });
  }
}

// 在原生代码触发事件时
eventBus.emit('location_updated', LocationData(...));

18. 设计模式在Flutter桌面应用中的特殊应用

18.1 系统托盘的单例管理

dart复制class SystemTrayManager {
  static SystemTrayManager _instance;
  
  factory SystemTrayManager() {
    _instance ??= SystemTrayManager._internal();
    return _instance;
  }
  
  SystemTrayManager._internal() {
    _initSystemTray();
  }
  
  void _initSystemTray() {
    if (Platform.isWindows) {
      // Windows系统托盘初始化
    } else if (Platform.isMacOS) {
      // macOS菜单栏初始化
    }
  }
  
  void updateIcon(bool hasNotification) {
    // 更新托盘图标状态
  }
}

18.2 窗口管理的工厂模式

dart复制abstract class WindowCreator {
  Future<void> createWindow(WindowConfig config);
}

class DocumentWindowCreator implements WindowCreator {
  @override
  Future<void> createWindow(WindowConfig config) async {
    final window = await windowManager.createWindow(config);
    window.loadContent(DocumentView());
  }
}

class PreferencesWindowCreator implements WindowCreator {
  @override
  Future<void> createWindow(WindowConfig config) async {
    final window = await windowManager.createWindow(config);
    window.loadContent(PreferencesView());
  }
}

19. 设计模式在Flutter游戏开发中的应用

19.1 游戏对象工厂

dart复制class GameObjectFactory {
  static GameObject create(String type, Vector2 position) {
    switch (type) {
      case 'player':
        return Player(position);
      case 'enemy':
        return Enemy(position);
      case 'powerup':
        return PowerUp(position);
      default:
        throw ArgumentError('Unknown game object type');
    }
  }
}

// 在游戏中生成对象
final enemy = GameObjectFactory.create('enemy', Vector2(100, 100));

19.2 游戏事件观察者

dart复制class GameEventSystem {
  final _listeners = <Type, List<Function>>{};
  
  void addListener<T>(void Function(T) listener) {
    _listeners[T] ??= [];
    _listeners[T].add(listener);
  }
  
  void emit<T>(T event) {
    (_listeners[T] ?? []).forEach((listener) => listener(event));
  }
}

// 使用示例
gameEventSystem.addListener<PlayerDiedEvent>((event) {
  showGameOverScreen();
});

// 触发事件
gameEventSystem.emit(PlayerDiedEvent(cause: 'enemy'));

20. 设计模式在Flutter混合开发中的应用

20.1 平台视图工厂

dart复制class PlatformViewFactory {
  static Widget create(String viewType, dynamic args) {
    switch (viewType) {
      case 'map':
        return Platform.isIOS 
          ? UiKitView(viewType: 'MapView')
          : AndroidView(viewType: 'MapView');
      case 'webview':
        return Platform.isIOS
          ? UiKitView(viewType: 'WebView')
          : AndroidView(viewType: 'WebView');
      default:
        throw ArgumentError('Unknown view type');
    }
  }
}

// 使用
PlatformViewFactory.create('map', {'zoom': 12.0});

20.2 平台通道观察者

dart复制class PlatformMessageObserver {
  final _listeners = <String, List<Function>>{};
  
  void addListener(String channel, Function listener) {
    _listeners[channel] ??= [];
    _listeners[channel].add(listener);
  }
  
  void handlePlatformMessage(MethodCall call) {
    (_listeners[call.method] ?? []).forEach((listener) {
      if (listener is Function(dynamic)) {
        listener(call.arguments);
      } else if (listener is Function()) {
        listener();
      }
    });
  }
}

// 初始化
final observer = PlatformMessageObserver();
MethodChannel('my_channel').setMethodCallHandler(observer.handlePlatformMessage);