如何在 Mobx Flutter 中声明 observable 以在类的字段更改时触发？

Question

我正在学习 Mobx Flutter，并希望有一个观察者显示对类中字段的修改。

当使用 int 而不是自定义类时，它正在工作。 所以我怀疑我没有正确声明商店中的课程

这是我店的代码

import 'package:mobx/mobx.dart';

// generated file
part 'bikeModel.g.dart';

class Cell {
  String description;
  String value;
  String unit;

  Cell({this.description, this.value, this.unit});
}

class BikeData = _BikeData with _$BikeData;

abstract class _BikeData with Store {
  Timer _timerSimu;

  @observable
  int cadence = 0;

  @observable
  Cell cello = Cell(description: 'desc', value: 'oo', unit: 'km/h');

  @action
  startSimul() {
    int _tick = 0;
    cadence++;
    cello.value = cadence.toString();
    _timerSimu = Timer.periodic(Duration(seconds: 1), (timer) {
      print('Screen simu is ticking...$_tick');
      _tick++;
      cadence++;
    });
  }

  @action
  stopSimu() {
    _timerSimu.cancel();
  }
}

这里是主要代码

import 'package:flutter/material.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:mobx_first/bikeModel.dart';

import 'globals.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MobX',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage();

  @override
  Widget build(BuildContext context) {
    BikeData store = BikeData();

    return GestureDetector(
      onPanUpdate: (details) {
        if (details.delta.dx > 0) {
          // Right swipe
          print('this is a right swipe');
        } else {
          // left swipe
          print('this is a left swipe');
        }
      },
      child: Scaffold(
        appBar: AppBar(
          title: Text('MobX Test'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Observer(
                  builder: (_) => Text('cello.value ${store.cello.value}')),
              Observer(builder: (_) => Text('cadence ${store.cadence}')),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: store.startSimul,
          tooltip: 'Change',
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

cadence 正在改变屏幕上的所有内容，但不是 cello.value

声明大提琴可观察的正确方法是什么？

Answer 1

问题是您只是在更改对象项（值）的值。你必须完全改变对象，然后只有 mobx 找到的值是改变的。

替换下一行

cello.value = cadence.toString();

使用以下代码：

cello = Cell(
    description: cello.description,
    value: cadence.toString(),
    unit: cello.unit);