Flutter依赖注入与状态观察插件observable_locator的使用

Flutter依赖注入与状态观察插件observable_locator的使用

observable_locator 是一个服务定位器，它使用 MobX 来简化API并创建反应式依赖关系。

如何使用

首先，确保在您的项目中添加了observable_locator依赖。在pubspec.yaml文件中添加以下依赖：

dependencies:
  observable_locator: ^x.y.z

然后运行flutter pub get以安装该库。

接下来，我们来创建一些基本的代码结构，以便展示如何使用observable_locator。

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

// 创建一个简单的模型类，用于演示
class Counter with Store {
  @observable
  int value = 0;

  @action
  void increment() {
    value++;
  }
}

// 主应用
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CounterPage(),
    );
  }
}

class CounterPage extends StatelessWidget {
  final counter = Counter(); // 实例化Counter模型

  @override
  Widget build(BuildContext context) {
    return Provider<Counter>(
      create: (_) => counter,
      child: Scaffold(
        appBar: AppBar(title: Text('Observable Locator Demo')),
        body: Center(
          child: Observer(
            builder: (_) => Text('${counter.value}'),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: counter.increment,
          tooltip: 'Increment',
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

详细说明

1. 引入必要的库：

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

2. 定义一个简单的模型类：

   class Counter with Store {
     @observable
     int value = 0;
   
     @action
     void increment() {
       value++;
     }
   }
   

3. 主应用部分：

   void main() {
     runApp(MyApp());
   }
   
   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         home: CounterPage(),
       );
     }
   }
   

4. 创建一个页面，使用Provider和Observer：

   class CounterPage extends StatelessWidget {
     final counter = Counter();
   
     @override
     Widget build(BuildContext context) {
       return Provider<Counter>(
         create: (_) => counter,
         child: Scaffold(
           appBar: AppBar(title: Text('Observable Locator Demo')),
           body: Center(
             child: Observer(
               builder: (_) => Text('${counter.value}'),
             ),
           ),
           floatingActionButton: FloatingActionButton(
             onPressed: counter.increment,
             tooltip: 'Increment',
             child: Icon(Icons.add),
           ),
         ),
       );
     }
   }