Flutter 实现类似 Vue的计算属性

使用 StreamBuilder：

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  StreamController<int> _controller = StreamController<int>.broadcast();

  int _counter = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: StreamBuilder<int>(
        stream: _controller.stream,
        builder: (context, snapshot) {
          return Text('Computed value: ${_counter + 5}');
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _counter++;
            _controller.add(_counter);
          });
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

使用 ValueNotifier：

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  ValueNotifier<int> _notifier = ValueNotifier(0);

  int get counter => _notifier.value;

  void setCounter(int value) => _notifier.value = value;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ValueListenableBuilder(
        valueListenable: _notifier,
        builder: (context, value, child) {
          return Text('Computed value: ${counter + 5}');
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setCounter(counter + 1);
        },
        child: Icon(Icons.add),
      ),
    );
  }
}