Mobx Observer не работает с элементом ObservableList - PullRequest
Новая
       116

Mobx Observer не работает с элементом ObservableList

0 голосов
/ 17 февраля 2020

Я пытаюсь проверить и снять отметки с itens в моем списке, но я не могу изменить состояние флажка, он просто меняется, когда я добавляю другой элемент в список. если я добавляю метод setState в метод CheckBox Onloaded, он работает.

Я пробовал некоторые вещи, но ничего не изменилось

код, чтобы помочь:

Магазин: 

import 'package:mobx/mobx.dart';
import 'package:mobxlearn/TodoApp/models/todo.model.dart';
part 'todo.store.g.dart';

class TodoStore = _TodoStoreBase with _$TodoStore;

abstract class _TodoStoreBase with Store {

  @observable
  var todoList = ObservableList<TodoItem>();

   @action
   void addTask(TodoItem task){
     todoList.add(task);
   }

}

TodoItem: 

import 'package:mobx/mobx.dart';
part 'todo.model.g.dart';

class TodoItem = _TodoItemBase with _$TodoItem;

abstract class _TodoItemBase with Store {

  @observable
  String title;

  @observable
  bool checked;

  @action
  void check(bool checkValue){
    print("item checkado - $checkValue");
    checked = checkValue;
  }


}

Просмотр: 

import 'package:flutter/material.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:mobxlearn/TodoApp/models/todo.model.dart';
import 'package:mobxlearn/TodoApp/stores/todo.store.dart';

class TodoHome extends StatelessWidget {
  final todo = TodoStore();

  final todoController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Container(
        child: Column(
      children: <Widget>[
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Row(
            children: <Widget>[
              Expanded(
                child: TextField(
                  controller: todoController,
                  decoration: InputDecoration(
                    enabledBorder: OutlineInputBorder(),
                    focusedBorder: OutlineInputBorder(),
                    focusColor: Colors.purple,
                  ),
                  style: TextStyle(fontSize: 18, color: Colors.black),
                ),
              ),
              VerticalDivider(),
              MaterialButton(
                color: Colors.purple,
                child: Text(
                  "Add Task",
                  style: TextStyle(color: Colors.white),
                ),
                onPressed: () {
                  if (todoController.text.isNotEmpty) {
                    final todoItem = TodoItem();
                    todoItem.title = todoController.text;
                    todoItem.checked = true;
                    todo.addTask(todoItem);
                    todoController.text = "";
                    print(todo.todoList.toString());
                  }
                },
              )
            ],
          ),
        ),
        Divider(),
        Expanded(
          child: Observer(
            builder: (_) => ListView.builder(
                itemCount: todo.todoList.length,
                itemBuilder: (context, index) {
                  return ListTile(
                    leading: Checkbox(
                        value: todo.todoList[index].checked,
                        onChanged: (boolean) {
                          print(boolean);
                          todo.todoList[index].check(boolean);
                        }),
                    title: Text(todo.todoList[index].title),
                    onTap: () {},
                  );
                }),
          ),
        )
      ],
    ));
  }
}

спасибо !!!!

1 Ответ

1 голос
/ 17 февраля 2020

Итак, ребята, после просмотра видео у меня есть решение, когда мы используем Observablelist и хотим изменить состояние itens этого списка, мы не можем просто создать наблюдателя в списке, нам нужно создать наблюдателя для каждого элемента и для списка тоже:

мне нужно было создать пользовательский элемент и установить наблюдателя на это: 

class CustomItem extends StatelessWidget {
  final TodoItem item;
  CustomItem({this.item});

  @override
  Widget build(BuildContext context) {
    return Observer(
      builder: (_) {
        return ListTile(
          leading: Checkbox(value: item.checked, onChanged: item.setCheck),
          title: Text(item.title),
        );
      },
    );
  }
}

и, на мой взгляд, мне нужно было установить наблюдателя на список тоже: 

Expanded(
          child: Observer(
          builder: (_) {
            return ListView.builder(
                itemCount: controller.list.length,
                itemBuilder: (context, index) {
                  var item = controller.list[index];
                  return CustomItem(item: item);
                });
          },
        ))
...