巧妙利用 Flutter 设计模式：流动的观察者模式揭秘

Android

2023-11-11 22:52:46

在 Flutter 开发的汪洋大海中，观察者模式的指引之光

在 Flutter 开发的浩瀚海洋中，设计模式犹如一盏明灯，指引着开发者们走向代码的优雅与高效。其中，观察者模式脱颖而出，以其灵活性与简洁性著称，在构建复杂的、可维护的应用程序中发挥着至关重要的作用。

观察者模式的本质

观察者模式是一种发布-订阅机制，它允许对象（观察者）订阅其他对象（发布者）的事件。当发布者状态发生变化时，它会通知所有观察者，观察者可以相应地更新自己的状态或行为。

Flutter 中的流动观察者模式

流动的观察者模式是观察者模式在 Flutter 中的具体实现。它利用 Stream 和 StreamSubscription 类，提供了一个优雅的方式来管理对象之间的事件流。

使用流动观察者模式

实现流动的观察者模式涉及以下步骤：

创建 StreamController： StreamController 负责管理流并向其添加事件。
订阅流： 使用 StreamSubscription 来订阅流，以便在有新事件时接收通知。
向流添加事件： 调用 StreamController.add() 将事件添加到流中。
处理事件： 在收到事件通知时，调用 StreamSubscription. onData() 处理事件。
取消订阅： 调用 StreamSubscription.cancel() 取消对流的订阅。

流动的观察者模式的优点

可扩展性： 流动的观察者模式允许轻松添加和删除观察者，无需修改发布者或其他观察者。
灵活性： 流可以携带各种类型的数据，允许观察者灵活地处理事件。
异步通信： 流动的观察者模式基于异步通信，从而提高了应用程序的响应能力。

示例：使用流动观察者模式实现计数器

以下代码演示了如何在 Flutter 应用程序中使用流动的观察者模式实现计数器：

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

class CounterBloc {
  final BehaviorSubject<int> _counter = BehaviorSubject<int>();

  Stream<int> get counterStream => _counter.stream;

  void increment() => _counter.add(_counter.value + 1);
  void decrement() => _counter.add(_counter.value - 1);

  void dispose() => _counter.close();
}

class CounterPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counterBloc = CounterBloc();

    return Scaffold(
      appBar: AppBar(
        title: Text('Counter'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          StreamBuilder<int>(
            stream: counterBloc.counterStream,
            builder: (context, snapshot) => Text(
              'Count: ${snapshot.data ?? 0}',
              style: TextStyle(fontSize: 30),
            ),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              ElevatedButton(
                onPressed: counterBloc.increment,
                child: Text('+'),
              ),
              SizedBox(width: 10),
              ElevatedButton(
                onPressed: counterBloc.decrement,
                child: Text('-'),
              ),
            ],
          ),
        ],
      ),
    );
  }
}