Flutter作用域隔离插件scoped的使用

Flutter作用域隔离插件scoped的使用

标题

scoped

内容

一个非常实用的方式来访问 你的服务和状态，目标只有一个：

简单性

scoped 包含了三个主要组件：

• Store - 一个简单的的服务定位器
• Scope - 一个继承自 widget 来帮助获取到你的 store
• Reactive - 一个简单的方式来为你的模型添加响应性
• Ref<T> - 可响应的值
• Refs<T> - 可响应的列表

希望你喜欢它。

示例

dependencies:
  scoped: ^2.0.0

import 'package:scoped/scoped.dart';
import 'package:scoped/material.dart';

class Service {
  final Ref<String> foo = Ref();
  final Refs<String> foos = Refs();

  final String name;
  Service(this.name);

  change() {
    foo.value = 'bar';
  }
}

void main() => runApp(Scope(
  store: Store()
    ..add(Service('a great service')),
  child: YourApp()));
  
class YourApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text(context.get<Service>().name),
        FlatButton(
          child: Text("Change"),
          onPressed: () => context.get<Service>().change(),
        ),
        context.get<Service>().foo.bindValue((_, v) => Text(v))
      ],
    );
  }
}

示例代码

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

void main() => runApp(Scope(store: Store()..add(AppState()), child: MyApp()));

class AppState {
  final Refs<int> lines = Ref();
  final Ref ref<int> counter = Ref(0);

  save() {
    lines.add(counter.value);
    counter.value = 0;
  }
}

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

class MyHomePage extends StatelessWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: ListView(
          padding: EdgeInsets.only(left: 12, top: 8, right: 24),
          children: [
            Text(
              'You have pushed the button this many times:',
            ),
            context
                .get<AppState>()
                .counter
                .bindValue((context, counter) =&gt; Text(
                      '$counter',
                      style: Theme.of(context).textTheme.bodyText1,
                    )),
            Divider(),
            context.get<AppState>().lines.bind((context, lines) =&gt; ListBody(
                  children: &lt;Widget&gt;[
                    if (lines.isNotEmpty) Text('History'),
                    ListView.builder(
                      itemBuilder: (context, index) =&gt; Text('${lines[index]}'),
                      itemCount: lines.length,
                      shrinkWrap: true,
                      physics: ClampingScrollPhysics(),
                    )
                  ],
                ))
          ]),
      bottomNavigationBar: Material(
        elevation: 1,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: &lt;Widget&gt;[
            TextButton(
                child: Icon(Icons.add),
                onPressed: () =&gt; context.get<AppState>().counter.value++),
            TextButton(
              child: Icon(Icons.save),
              onPressed: context.get<AppState>().save,
            ),
          ],
        ),
      ),
    );
  }
}