有问题 w/ flutter mobx RadioListTile

Having problem w/ flutter mobx RadioListTile

我在使用 mobx 和 radiobox 时遇到问题:选择时屏幕不更新。我认为这是一个愚蠢的错误,这是我的 main.dart、teste_store.dart 和 pubspec.yaml。部分文件 .g 是用 build_runner 和 mobx_codegen.

生成的

当我 运行 它时会出现一条消息:“在 Observer 的构建方法中未检测到可观察对象”。我认为 testeStore.selected 是一个可观察对象,当更改触发观察者重建时。

main.dart

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

import 'package:teste_flutter/teste_store.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  TesteStore testeStore = TesteStore();

  @override
  Widget build(BuildContext context) {

    List<String> options = ["Option 1", "Option 2", "Option 3"];

    return Scaffold(
      appBar: AppBar(
        title: Text("Test Flutter"),
      ),
      body: Center(
        child: Observer(
          builder: (_){
            return ListView.builder(
              itemCount: options.length,
              itemBuilder: (context, index) {
                return RadioListTile<int>(
                  title: Text(options[index]),
                  value: index,
                  groupValue: testeStore.selected,
                  onChanged: testeStore.changeSelected,
                );
              },
            );
          }
        )
      ),
    );
  }
}

teste_store.dart

import 'package:mobx/mobx.dart';

part 'teste_store.g.dart';

class TesteStore = _TesteStore with _$TesteStore;

abstract class _TesteStore with Store {

  @observable
  int selected = 0;

  @action
  void changeSelected(int newSelected) {
    selected = newSelected;
  }

}

pubspec.yaml

name: teste_flutter
description: A new Flutter application.

publish_to: 'none'

version: 1.0.0+1

environment:
  sdk: ">=2.7.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.0
  mobx: ^1.2.1+2
  flutter_mobx: ^1.1.0+2
  provider: ^4.3.2+2

dev_dependencies:
  flutter_test:
    sdk: flutter

  build_resolvers: ^1.3.10
  mobx_codegen: ^1.1.0+1
  build_runner: ^1.10.2

flutter:
  uses-material-design: true

编辑 1 和 2: 我把我找到的解决方案放在这里,我不应该。写在答案框中。

我看到你的 TesteStore class 来自 private _TesteStore class。也许是这样?错误信息看起来很合理。尝试用 @observable public 制作 class 并重新构建零件文件。

更新

  • 尝试在 Observer builder
  • 中做中间作业
final selected = testeStore.selected;

然后使用在内部构建器中选择的新局部变量。

  • 尝试使用 ListView 而不是 ListView.builder
  • 尝试用 Observer 换行,而不是 List,而是 RadioListTile

通过与@BambinoUA 交谈,我们找到了一个解决方案,只是为了进一步了解他的解决方案为何有效。

我确实将列表视图放在一个带有同级文本小部件的列中,testeStore.selected 就像一个文本,现在一切都更新了。

child: Observer(
          builder: (_){
            return Column(
              children: [
                Text(testeStore.selected.toString()),
                ListView.builder(
                      itemCount: options.length,
                      itemBuilder: (context, index) {
                        return RadioListTile<int>(
                          title: Text(options[index]),
                          value: index,
                          groupValue: testeStore.selected,
                          onChanged: testeStore.changeSelected,
                        );
                      },
                ),
              ],
            );
          }
        )

回到原来的代码我试着只使用 print(testeStore.selected);在 return 之前在 Observer 的构建器中并且它起作用了:

child: Observer(
          builder: (_){

            print(testeStore.selected);

            return ListView.builder(

当我从 RadioListTile 放入 itemBuilder 时不起作用。

child: Observer(
  builder: (_){
    return ListView.builder(
          itemCount: options.length,
          itemBuilder: (context, index) {

            print(testeStore.selected);

            return RadioListTile<int>(

我假设 Observer 不会查看其他小部件生成器中的更改。