Flutter 跨组件状态共享

封面图 • 2025-11-03 • Flutter

在 Flutter 中，**跨组件状态共享**是开发中非常常见的需求。尤其是在大型应用中，多个组件可能需要访问和更新同一个数据源。Flutter 提供了多种方式来实现跨组件的状态共享，下面是一些常用的方法：

---

## ✅ 一、使用 `Provider`（推荐）

`Provider` 是 Flutter 官方推荐的轻量级状态管理库，非常适合跨组件共享状态。

### 📦 安装
```yaml
dependencies:
  provider: ^6.1.1
```

### 🔧 使用方法

#### 1. 创建一个 `ChangeNotifier` 类
```dart
import 'package:flutter/material.dart';

class Counter with ChangeNotifier {
  int _count = 0;

int get count => _count;

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

#### 2. 在 `main.dart` 中注册 Provider
```dart
void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => Counter(),
      child: MyApp(),
    ),
  );
}
```

#### 3. 在子组件中读取或修改状态
```dart
class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counter = Provider.of<Counter>(context);

return Text('Count: ${counter.count}');
  }
}

class IncrementButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counter = Provider.of<Counter>(context);

return ElevatedButton(
      onPressed: counter.increment,
      child: Text('Increment'),
    );
  }
}
```

---

## ✅ 二、使用 `Riverpod`（更现代的替代方案）

`Riverpod` 是 `Provider` 的改进版本，解决了 `Provider` 的一些局限性，比如依赖注入更灵活、测试更方便等。

### 📦 安装
```yaml
dependencies:
  flutter_riverpod: ^2.3.2
```

### 🔧 使用方法

#### 1. 定义一个 `StateProvider`
```dart
import 'package:flutter_riverpod/flutter_riverpod.dart';

final counterProvider = StateProvider<int>((ref) => 0);
```

#### 2. 在组件中使用
```dart
class MyWidget extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final count = ref.watch(counterProvider);

return Text('Count: $count');
  }
}

class IncrementButton extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return ElevatedButton(
      onPressed: () {
        ref.read(counterProvider.notifier).state++;
      },
      child: Text('Increment'),
    );
  }
}
```

---

## ✅ 三、使用 `Bloc` / `BLoC` 模式（适合复杂业务逻辑）

`Bloc` 是一种基于事件驱动的状态管理方式，适合处理复杂的业务逻辑。

### 📦 安装
```yaml
dependencies:
  flutter_bloc: ^8.1.1
```

### 🔧 使用方法

#### 1. 定义事件和状态
```dart
enum CounterEvent { increment }

class CounterState {
  final int count;

CounterState(this.count);
}
```

#### 2. 创建 `Bloc`
```dart
class CounterBloc extends Bloc<CounterEvent, CounterState> {
  CounterBloc() : super(CounterState(0)) {
    on<CounterEvent>((event, emit) {
      if (event == CounterEvent.increment) {
        emit(CounterState(state.count + 1));
      }
    });
  }
}
```

#### 3. 在 `main.dart` 中注册
```dart
void main() {
  runApp(
    BlocProvider(
      create: (context) => CounterBloc(),
      child: MyApp(),
    ),
  );
}
```

#### 4. 在组件中使用
```dart
class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final bloc = BlocProvider.of<CounterBloc>(context);
    return BlocBuilder<CounterBloc, CounterState>(
      builder: (context, state) {
        return Text('Count: ${state.count}');
      },
    );
  }
}
```

---

## ✅ 四、使用 `GetX`（轻量级 MVVM 框架）

如果你喜欢更简洁的方式，可以使用 `GetX`。

### 📦 安装
```yaml
dependencies:
  get: ^4.6.5
```

### 🔧 使用方法

#### 1. 定义 `GetController`
```dart
class CounterController extends GetxController {
  var count = 0.obs;

void increment() {
    count++;
  }
}
```

#### 2. 注册并使用
```dart
void main() {
  Get.put(CounterController());
  runApp(MyApp());
}

class MyWidget extends StatelessWidget {
  final CounterController controller = Get.find();

@override
  Widget build(BuildContext context) {
    return Text('Count: ${controller.count}');
  }
}
```

---

## ✅ 五、使用 `Shared Preferences` 或 `Hive`（持久化存储）

如果你需要将状态保存到本地（如用户设置、登录信息等），可以使用 `shared_preferences` 或 `hive`。

---

## ✅ 六、使用 `InheritedWidget`（原生方式）

Flutter 原生支持 `InheritedWidget`，但使用起来比较繁琐，一般建议使用 `Provider` 或 `Riverpod`。

---

## ✅ 总结：选择哪种方式？

| 方案       | 适用场景                     | 推荐程度 |
|------------|------------------------------|----------|
| `Provider` | 简单状态共享                 | ⭐⭐⭐⭐⭐  |
| `Riverpod` | 复杂项目、可测试性强         | ⭐⭐⭐⭐⭐  |
| `Bloc`     | 复杂业务逻辑、事件驱动       | ⭐⭐⭐⭐   |
| `GetX`     | 快速开发、轻量级             | ⭐⭐⭐⭐   |
| `InheritedWidget` | 自定义状态传递         | ⭐⭐     |

---

如果你有具体的使用场景（比如是否需要持久化、是否需要多平台支持等），我可以帮你推荐最适合的方案 😊