0

Estou a usar Mobx e pretendo criar uma lista de checkbox, essa lista já está criada, no entanto não consigo fazer com que os valores mudem quando clicamos na checkbox, embora a logica esteja a ser executada e adiciona items à lista a alteração não é detetada, mas se fizer refresh já aparece a chekbox marcada.

Tenho a seguinte store:

ObservableList<Category> categoryCheck = ObservableList<Category>();
ObservableList<Category> categoriesTree = ObservableList<Category>();

@action
  void removeCategoryCheck(Category category) {
    categoryCheck.remove(category);

    categoryCheck = categoryCheck;
  }

  @action
  void addCategoryCheck(Category category) {
    categoryCheck.add(category);

    categoryCheck = categoryCheck;
  }

@action
  Future<void> getCategoriesTree() async {
    setLoading(true);
    clearCategoriesTree();
    final response = await repository.getCategoriesTree();
    response.map((category) {
      addToCategoriesTree(Category.fromJson(category));
    }).toList();
    categoriesTree = categoriesTree;
    setLoading(false);
  }

Na minha Screen onde mostro a lista de checkbox, tenho o seguinte:

Widget _buildScreen(context) {
    return Observer(
      builder: (context) {
        return ListView(
          shrinkWrap: true,
          //padding: EdgeInsets.all(15.0),
          children: [                
            _buildCategories(context),
          ],
        );
      },
    );
  }


Widget _buildCategories(context) {
    if (_storeCategories.isLoading) {
      return Container(
        child: Text('A carregar Categorias'),
      );
    } else {
      return Container(
          padding: EdgeInsets.only(top: 10),
          height: 300,
          child: ListView(
            shrinkWrap: false,
            children: [
              TreeView(
                indent: 44,
                iconSize: 30,
                treeController: _controller,
                nodes: [
                  for (var item in _storeCategories.categoriesTree)
                    TreeNode(
                        content: Row(
                          children: [
                            Text(item.name,
                                style: TextStyle(color: Colors.black)),
                            Theme(
                              data: ThemeData(
                                unselectedWidgetColor: Colors.grey,
                              ),
                              child: Checkbox(
                                  value: _storeCategories.inCheckList(item),
                                  activeColor: Colors.green,
                                  onChanged: (bool newValue) {
                                    if (newValue) {
                                      _storeCategories.addCategoryCheck(item);
                                    } else {
                                      _storeCategories
                                          .removeCategoryCheck(item);
                                    }
                                  }),
                            )
                          ],
                        ),
                        children: item.childs.length > 0
                            ? [
                                for (var itemChild in item.childs)
                                  TreeNode(
                                      content: Row(
                                        children: [
                                          Text(itemChild.name,
                                              style: TextStyle(
                                                  color: Colors.black)),
                                          Theme(
                                            data: ThemeData(
                                              unselectedWidgetColor:
                                                  Colors.grey,
                                            ),
                                            child: Checkbox(
                                                value: _storeCategories
                                                    .inCheckList(itemChild),
                                                activeColor: Colors.green,
                                                onChanged: (bool newValue) {
                                                  if (newValue) {
                                                    _storeCategories
                                                        .addCategoryCheck(
                                                            itemChild);
                                                  } else {
                                                    _storeCategories
                                                        .removeCategoryCheck(
                                                            itemChild);
                                                  }
                                                }),
                                          )
                                        ],
                                      ),
                                      children: itemChild.childs.length > 0
                                          ? [
                                              for (var itemChildChild
                                                  in itemChild.childs)
                                                TreeNode(
                                                    content: Row(
                                                  children: [
                                                    Text(itemChildChild.name,
                                                        style: TextStyle(
                                                            color:
                                                                Colors.white)),
                                                    Theme(
                                                      data: ThemeData(
                                                        unselectedWidgetColor:
                                                            Colors.grey,
                                                      ),
                                                      child: Checkbox(
                                                          value: _storeCategories
                                                              .inCheckList(
                                                                  itemChildChild),
                                                          activeColor:
                                                              Colors.green,
                                                          onChanged:
                                                              (bool newValue) {
                                                            if (newValue) {
                                                              _storeCategories
                                                                  .addCategoryCheck(
                                                                      itemChildChild);
                                                            } else {
                                                              _storeCategories
                                                                  .removeCategoryCheck(
                                                                      itemChildChild);
                                                            }
                                                          }),
                                                    )
                                                  ],
                                                )),
                                            ]
                                          : []),
                              ]
                            : []),
                ],
              )
            ],
          ));
    }
  }
2
  • A sua pergunta é um pouco complexa, podendo ser resolvida de algumas diversas formas... Mas para resumir, para que sua lista "escute" as modificações de Checkado é preciso que você construa a lista a partir da ObservableList que recebe estas mudanças. Que no seu caso é o categoryCheck. Commented 10/12/2020 às 18:36
  • De uma olhada no meu github Desafio_campominado lá você encontra um exemplo que pode te ajudar bastante. Segue alguns arquivos úteis: MinesWeeperController; FieldModel; MineField. Commented 10/12/2020 às 18:39

1 Resposta 1

0

Acabei por conseguir resolver, criei uma nova lista apenas com os id's das categorias, ou seja, sempre que adiciono um novo objecto à lista de categorias selecionadas, também adiciono o id a uma lista de strings, depois no "value" do checkbox verifico se o id existe nessa lista de ids.

CheckBox:

                                              child: Checkbox(
                                                  value: _storeCategories
                                                      .trueChecks
                                                      .contains(
                                                          itemChildChild
                                                              .id),
                                                  activeColor:
                                                      Colors.green,
                                                  onChanged: (bool
                                                      newValue) async {
                                                    if (newValue) {
                                                      _storeCategories
                                                          .addCategoryCheck(
                                                              itemChildChild);
                                                    } else {
                                                      _storeCategories
                                                          .removeCategoryCheck(
                                                              itemChildChild);
                                                    }
                                                  }),

Store Com nova lista:

ObservableList<String> arrayIds = ObservableList<String>().asObservable();

Assim com uma lista de strings o elemento fica reativo.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .