Flutter: 使用流来分离数据和UI

• video

"lib\main.dart"

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';
import 'package:flutter_demo/src/list.dart';

void main() {
  final list = ListService();
  runApp(MyApp(list: list));
}

class MyApp extends StatelessWidget {
  MyApp({Key key, this.list}) : super(key: key);

  ListService list;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHome(list: list),
    );
  }
}

class MyHome extends StatefulWidget {
  MyHome({Key key, this.list}) : super(key: key);

  final ListService list;

  @override
  _MyHomeState createState() => _MyHomeState();
}

class _MyHomeState extends State<MyHome> {
  @override
  void dispose() {
    widget.list.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo'),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () =>
            widget.list.addOneWord(generateWordPairs().take(1).elementAt(0)),
      ),
      body: StreamBuilder<Set<WordPair>>(
        stream: widget.list.lists,
        initialData: Set<WordPair>(),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return Center(
              child: CircularProgressIndicator(),
            );
          }

          return ListView(
            children: <Widget>[
              for (WordPair w in snapshot.data)
                ListTile(
                  title: Text(
                    w.asLowerCase,
                    style: TextStyle(fontSize: 28),
                  ),
                  trailing: IconButton(
                    onPressed: () => widget.list.delOneWord.add(w),
                    icon: Icon(Icons.close),
                  ),
                ),
            ],
          );
        },
      ),
    );
  }
}

"lib\src\list.dart"：

import 'dart:async';
import 'package:rxdart/rxdart.dart';
import 'package:english_words/english_words.dart';

class ListService {
  Stream<Set<WordPair>> get lists => _listsSubject.stream;
  // BehaviorSubject: Subject的变体，需要初始值并在订阅时发出其当前值。
  final _listsSubject = BehaviorSubject<Set<WordPair>>();
  var _lists = Set<WordPair>();

  Sink<WordPair> get delOneWord => _delOneWordController.sink;
  // StreamController: 该控制器允许在其流上发送数据
  final _delOneWordController = StreamController<WordPair>();

  ListService() {
    _getList().then((_) {
      _listsSubject.add(_lists);
    });

    _delOneWordController.stream.listen((WordPair w) {
      _lists.remove(w);
      _listsSubject.add(_lists);
    });
  }

  void dispose() {
    _delOneWordController.close();
  }

  // 模拟异步获取列个列表数据
  Future<Null> _getList() async {
    await Future.delayed(Duration(seconds: 4));
    _lists = generateWordPairs().take(5).toSet();
  }

  /// 向列表添加单个数据
  void addOneWord(WordPair w) {
    _lists.add(w);
    _listsSubject.add(_lists);
  }

  /// 删除列表的指定数据
  // void delOneWord(WordPair w) {
  //   _lists.remove(w);
  //   _listsSubject.add(_lists);
  // }
}