TransWikia.com

Problema ObserverList + Mobx

Stack Overflow em Português Asked by Alex Anderson on February 11, 2021

Olá,

Estou tentando fazer uma lista de checkbox (CheckboxListTile) usando o mobx, porém, sempre que clico na caixinha para marcar ou desmarcar tenho que usar o flutter reload ou o setState para atualizar os dados.

O mobx não está atualizando automaticamente utilizando o observer, não sei porque. Poderiam me ajudar?

Meu model ficou assim:

abstract class _ItemComplementoModel with Store{

  @observable
  ObservableList<ItemComplemento> listaItens = ObservableList<ItemComplemento>();

  @action
  void addItem(ItemComplemento novoItem){
    listaItens.add(novoItem);
  }

  @action
  void marcarItem(int indice, bool marcou, CarrinhoModel carrinhoModel){

    ItemComplemento itemComplemento = listaItens[indice];
    print(itemComplemento.nome);
    itemComplemento.marcado = marcou;

  }

}

E meu observer:

_parteItemComplemento(int indice, ItemComplemento itemComplemento){
    return Observer(
      builder: (_){
        return CheckboxListTile(
          onChanged: (marcou){
            itemComplementoModel.marcarItem(indice, marcou, carrinhoModel);
            print("marcou ${marcou}");
          },
          title: Text(itemComplemento.nome),
          value: itemComplementoModel.listaItens[indice].marcado,
          secondary: CircleAvatar(
            child: Icon(
                itemComplementoModel.listaItens[indice].marcado
                    ? Icons.check
                    : Icons.error
            ),
          ),
        );
      },
    );
  }

One Answer

Eu dei como exemplo um projeto meu do GitHub e é nele que vou me basear Campo Minado.

Para que seu código fique organizado de uma melhor forma e tenha toda a reatividade que deseja, você precisa que as informações tratadas no CheckBox sejam também uma Store do MobX.

Classe de controle do CheckBox

É necessário que você crie uma classe para controlar os dados do mesmo, faça o seguinte:

class ItemModel = _FieldModel with _$FieldModel;

abstract class _ItemModel with Store {
  
  _FieldModel({
    this.checked
  });

  @observable
  bool checked = false;
  
}

Então modifique teu método existente:

abstract class _ItemComplementoModel with Store{

  @observable
  ObservableList<ItemModel> listaItens = ObservableList<ItemModel>();

  @action
  void addItem(ItemModel novoItem){
    listaItens.add(novoItem);
  }

  @action
  void marcarItem(int indice, bool marcou, CarrinhoModel carrinhoModel){

    ItemModel itemModel = listaItens[indice];
    print(itemModel.nome);
    itemModel.marcado = marcou;

  }

}

Explicação

O Widget Observer vai ficar escutando todo e qualquer Observable que estiver sendo utilizado dentro dele, dessa forma assim que um deles sofrer alterações, as mesmas serão aplicadas no layout.

Por isso que é necessário que a simples classe ItemComplemento vire um Store, o ItemModel. E dessa forma, não é necessário ficar realizando alterações na referência dos objetos da lista.

Answered by Matheus Ribeiro on February 11, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP