如何在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

问题是你只是改变了对象 item(value)的值。你必须完全改变对象，然后只改变mobx查找值。

替换你下面的一行

cello.value = cadence.toString();

有以下代码：

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