Flutter插件scoper的使用_Scoper 是一个用于 Flutter 的极简状态管理解决方案。

Scoper

Scoper 是一个用于 Flutter 的极简状态管理解决方案。

如何使用

创建自定义的 Scope

通过扩展 Scope 类来创建自定义的 Scope。例如，我们可以创建一个 CounterScope：

class CounterScope extends Scope {
  int _counter = 0;
  int _divider = 7;

  increment() {
    _counter++;
    notifyBuilders(); // 触发所有依赖此 Scope 的 Builder 重建

    if (_counter % _divider == 0) {
      notifyExecutors(); // 触发所有依赖此 Scope 的 Executor 执行
    }
  }

  get counter => _counter; // 获取计数器值
  get divider => _divider; // 获取分隔符值
}

注册 Scope

在根部件树中通过 ScopeRegistrant 来注册你的 Scope：

ScopeRegistrant(
  scopes: [
    CounterScope(), // 注册 CounterScope
  ],
  child: Container(
    child: (...)
  ),
)

使用 ScopeBuilder

使用 ScopeBuilder 来根据给定的 Scope 构建小部件：

ScopeBuilder<CounterScope>(
  builder: (context, scope) {
    return Text(scope.counter.toString()); // 显示当前计数值
  },
),

使用 ScopeExecutor

使用 ScopeExecutor 来执行某些逻辑，这些逻辑依赖于给定的 Scope：

ScopeExecutor<CounterScope>(
  executor: (context, scope) {
    final message = "This number is divisible by " + scope.divider.toString();
    final snackbar = SnackBar(content: Text(message));
    ScaffoldMessenger.of(context).showSnackBar(snackbar); // 显示 Snackbar
  },
  child: Container(
    child: (...)
  ),
)

从 context 中获取 Scope 并调用其方法

你可以通过 context.get<CounterScope>() 来获取 Scope，并调用它的方法（例如，在 onPressed 回调中）：

floatingActionButton: FloatingActionButton(
  onPressed: () => context.get<CounterScope>().increment(), // 调用 increment 方法
  tooltip: 'Increment',
  child: Icon(Icons.add),
),

完整示例

以下是一个完整的示例，展示了如何使用 Scoper 插件：

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

// 定义 CounterScope
class CounterScope extends Scope {
  int _counter = 0;
  int _divider = 7;

  increment() {
    _counter++;
    notifyBuilders();

    if (_counter % _divider == 0) {
      notifyExecutors();
    }
  }

  get counter => _counter;
  get divider => _divider;
}

// 主应用
class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return ScopeRegistrant(
      scopes: [
        CounterScope(),
      ],
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: MyHomePage('Flutter Demo Home Page'),
      ),
    );
  }
}

// 主页面
class MyHomePage extends StatefulWidget {
  MyHomePage(this.title);

  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

// 主页面状态
class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ScopeExecutor<CounterScope>(
        executor: (context, scope) {
          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(
              content: Text(
                "This number is divisible by " + scope.divider.toString(),
              ),
              duration: Duration(milliseconds: 510),
            ),
          );
        },
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'You have pushed the button this many times:',
              ),
              ScopeBuilder<CounterScope>(
                builder: (context, scope) {
                  return Text(
                    scope.counter.toString(),
                    style: Theme.of(context).textTheme.headline4,
                  );
                },
              ),
            ],
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => context.get<CounterScope>().increment(),
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}