Flutter Mobx多个存储未更新观察者中的值

如何解决Flutter Mobx多个存储未更新观察者中的值

我在Flutter应用程序中使用Mobx。我有多家商店。当我尝试更新商店中的某些值时，它正在更新但未反映在UI上。

main.dart

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        Provider<LocationStore>(create: (_) => LocationStore()),Provider<UserStore>(create: (_) => UserStore()),Provider<RideStore>(create: (_) => RideStore()),],child: MaterialApp(
        title: 'Flutter APp',theme: myTheme(),debugShowCheckedModeBanner: false,//        home: HomePage(
//          title: 'Live Location'
//        ),initialRoute:  WelcomeScreen.id,routes: {
          HomePage.id: (context) => HomePage(title: 'Home',),ProfileScreen.id: (context) => ProfileScreen(),WelcomeScreen.id: (context) => WelcomeScreen(),RegistrationScreen.id: (context) => RegistrationScreen(),LoginScreen.id: (context) => LoginScreen(),FeedScreen.id: (context) => FeedScreen(),RecordTrackScreen.id: (context) => RecordTrackScreen(),SaveActivityScreen.id: (context) => SaveActivityScreen(),UserProfileScreen.id: (context) => UserProfileScreen(),RideDetailsScreen.id: (context) => RideDetailsScreen(),StatsScreen.id: (context) => StatsScreen(),FindInviteScreen.id: (context) => FindInviteScreen(),CommentsScreen.id: (context) => CommentsScreen(),},);
  }
}

屏幕

@override
  Widget build(BuildContext context) {
    final store = Provider.of<LocationStore>(context);
    final rideStore = Provider.of<RideStore>(context);
    final userStore = Provider.of<UserStore>(context);


    return Scaffold(
      appBar: AppBar(
        title: Text('Record'),actions: <Widget>[
          IconButton(
            icon: Icon(Icons.info_outline),onpressed: () {},)
        ],body: Observer(
        builder: (_) => SingleChildScrollView(
          child: Center(
              child: Column(
                children: <Widget>[
                  // Text('isPermitted - ${isPermitted}'),Container(
                    child: isPermitted != null && isPermitted ? WeatherMainWidget() : Text(''),height: (MediaQuery.of(context).size.height - 50.0) * 0.4,Container(
                    height: (MediaQuery.of(context).size.height - 50.0) * 0.45,child: Column(
                      mainAxisAlignment: MainAxisAlignment.end,children: <Widget>[
                        // Text('rideStore.getIsstarted - ${rideStore.getIsstarted} - $_isRunning'),// if (rideStore.isstarted)
                        Divider(
                          indent: 10.0,endindent: 10.0,thickness: 1.0,color: color8,Observer(
                            builder: (_) => Row(
                            children: [
                              Text('${rideStore.getSport.name}'),Expanded(
                                flex: 1,child: CustomIconButton(
                                    iconData: rideStore.getSport.icon,iconColor: Theme.of(context).primaryColor,bgColor: Colors.transparent,onPress: () {
                                      SportBottomSheet(context,rideStore);
                                    },Container(
                          child: Visibility(
                            child: RecordTrackScreen(),visible: rideStore.isstarted,if (!rideStore.isstarted)
                        Container(
                          width: 70.0,height: 70.0,decoration: Boxdecoration(
                            borderRadius: BorderRadius.all(Radius.circular(50.0),color: Theme.of(context).primaryColor,child: Visibility(
                            visible: !rideStore.isstarted,child: CustomIconButton(
                              iconData: Icons.play_arrow,iconColor: Colors.white,iconSize: 35.0,onPress: () {
                                print('dsdsadsadsad');
                                startTrip(store,rideStore,userStore);
                              },// ListenLocationWidget()
                ],);
  }


  Widget SportBottomSheet(BuildContext context,RideStore rideStore) {
    showModalBottomSheet(context: context,builder: (BuildContext bc) {
      return Container(
        color: Colors.white,child: ListView.builder(itemCount: 2,itemBuilder: (ctx,index) {
          final sport = rideStore.sports[index];
          return GestureDetector(
            child: ListTile(
              leading: Icon(sport.icon,size: 30.0,color: Colors.black,title: Text(sport.name,style: TextStyle(
                fontSize: 20.0,color: Colors.black
              ),onTap: () {
                print('SportBottomSheet $sport');
                rideStore.selectedSport = new Sport(
                    sport.icon,sport.name
                );
                rideStore.recentSport = rideStore.recentSport;
                Navigator.pop(context);
                print('sport ${rideStore.getSport.name}');
              },);
        }),);
    });
  }

骑行商店

class Sport{
  final IconData icon;
  final String name;

  Sport(this.icon,this.name);
}

  List<Sport> sports = [
    new Sport(Icons.directions_walk_outlined,'Walk'),new Sport(Icons.motorcycle,'Ride'),];

  @observable
  Sport recentSport;

  @observable
  Sport selectedSport;

  @computed
  Sport get getSport {
    if (selectedSport != null)
      return selectedSport;
    if (recentSport != null)
      return recentSport;

    return sports[0];
  }

当我在onTap方法中检查getSport值时，它会显示选定的值，但不会在UI上更新。

谢谢

解决方法

尝试将您的@ 计算更改为@ 操作

> # check results 
> dt1 %>% group_by(date1) %>% summarise(count = n(),+                                       minHour = min(hour1),+                                       maxHour = max(hour1))
`summarise()` ungrouping output (override with `.groups` argument)
# A tibble: 3 x 4
  date1      count minHour maxHour
  <date>     <int>   <dbl>   <dbl>
1 2020-01-04    17       7      23
2 2020-01-05    24       0      23
3 2020-01-06    17       0      16

}

或者可以使用 ObservableList 或 ObservableFuture

,

像这样使用 ObservableList

@observable
ObservableList<Sport> sports =[Sport(Icons.directions_walk_outlined,'Walk'),new Sport(Icons.motorcycle,'Ride'),];