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

Question

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

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

这是我店铺的代码

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),
        ),
      ),
    );
  }
}

节奏正在改变屏幕上第二个但不是 cello.value

的一切

声明 cello 可观察的正确方法是什么？

Answer 1

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

替换你的下一行

cello.value = cadence.toString();

使用以下代码：

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

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

How to declare observable in Mobx flutter to trigger when a field of a class is changed?

flutter

mobx