Flobter Mobx @observable не восстанавливает - PullRequest
Новая
       6

Flobter Mobx @observable не восстанавливает

0 голосов
/ 23 марта 2020

Я новичок в трепетании и пытаюсь создать простое приложение todo, используя mobx. всякий раз, когда я добавляю новую задачу, я вижу новые обновленные данные задач в моей @action, но они не отражаются на интерфейсе пользователя.

main.dart 

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Provider<TaskList>(
      create: (content) => TaskList(),
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: MyHomePage(),
      ),
    );
  }
}

taskList 

@observable
  List<Task> tasksList = [
    Task(name: 'buy milk'),
    Task(name: 'buy sugar'),
    Task(name: 'buy bread'),
  ];

@action
  void addTask(String title) {
    final task = Task(name: title);
    tasksList.add(task);
    print(tasksList);
  }

Класс TodoApp 

class TodoApp extends StatelessWidget {
  Widget buildBottomSheet(BuildContext context) {
    return AddTaskScreen();
  }

  @override
  Widget build(BuildContext context) => Provider<TaskList>(
    create: (_) => TaskList(),
    child: Scaffold(
      appBar: AppBar(
        title: const Text('Todos'),
      ),
      floatingActionButton: FloatingActionButton(
        backgroundColor: Colors.lightBlueAccent,
        child: Icon(Icons.add),
        onPressed: () {
          showModalBottomSheet(
            context: context,
            //isScrollControlled: true,
            builder: buildBottomSheet,
          );
        },
      ),
      body: Column(
        children: <Widget>[
          TodoListView(),
        ],
      ),
    ),
  );
}

Класс TodoListView 

class TodoListView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final list = Provider.of<TaskList>(context);

    return Observer(
      builder: (_) => Expanded(
        child: ListView.builder(
          itemBuilder: (content, index) {
            return Observer(
              builder: (_) => TaskTile(
                taskTitle: list.tasksList[index].name,
                isChecked: list.tasksList[index].isDone,
                checkBoxCallback: (checkBoxState) {
                  // taskData.updateTask(task);
                },
                longPressCallBack: () {
                  list.deleteTask(index);
                },
              ),
            );
          },
          itemCount: list.tasksList.length,
        ),
      ),
    );
  }
}

Класс TaskTile 

class TaskTile extends StatelessWidget {
  final String taskTitle;
  final bool isChecked;
  final Function checkBoxCallback;
  final Function longPressCallBack;

  TaskTile(
      {this.taskTitle,
      this.isChecked,
      this.checkBoxCallback,
      this.longPressCallBack});

  @override
  Widget build(BuildContext context) {
    print('task tile');
    print(taskTitle);
    return ListTile(
      title: Text(
        taskTitle,
        style: TextStyle(
          decoration: isChecked ? TextDecoration.lineThrough : null,
        ),
      ),
      trailing: Checkbox(
        activeColor: Colors.lightBlueAccent,
        value: isChecked,
        onChanged: checkBoxCallback,
      ),
      onLongPress: longPressCallBack,
    );
  }
}

Класс AddTaskScreen 

class AddTaskScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    String newTaskTitle;
    final list = Provider.of<TaskList>(context);

    return Container(
      child: Container(
        padding: EdgeInsets.only(left: 20.0, top: 20.0, right: 20.0),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.only(
              topRight: Radius.circular(20.0), topLeft: Radius.circular(20.0)),
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            Text(
              'Add a Task',
              style: TextStyle(
                fontSize: 30.0,
                color: Colors.lightBlueAccent,
              ),
              textAlign: TextAlign.center,
            ),
            TextField(
              autofocus: true,
              textAlign: TextAlign.center,
              onChanged: (newTask) {
                newTaskTitle = newTask;
              },
            ),
            SizedBox(
              height: 20.0,
            ),
            FlatButton(
              child: Text(
                'Add',
                style: TextStyle(color: Colors.white, fontSize: 20.0),
              ),
              padding: EdgeInsets.symmetric(vertical: 10.0),
              onPressed: () {
                list.addTask(newTaskTitle);
                Navigator.pop(context);
//                print('piyuhs');
//                print(list);
              },
              color: Colors.lightBlueAccent,
            ),
          ],
        ),
      ),
    );
  }
}

in addTask значение действия обновляется, но не отражается на пользовательском интерфейсе. Я знаю, что я делаю глупую ошибку здесь. У меня есть поиск в Google, но все еще не работает.

Заранее спасибо

1 Ответ

0 голосов
/ 14 апреля 2020

Это действительно частный случай mobx.

На самом деле уведомление запускается в пользовательском интерфейсе при изменении instance не только параметра.

Здесь список является тем же экземпляром и не вызывает пользовательский интерфейс.

Чтобы обойти эту проблему, вы должны сделать свой список ObservableList: 

  @observable
  ObservableList<Task> tasksList = ObservableList<Task>([  //Change here
    Task(name: 'buy milk'),
    Task(name: 'buy sugar'),
    Task(name: 'buy bread'),
  ]);

  @action
  void addTask(String title) {
    final task = Task(name: title);
    tasksList.add(task);
    print(tasksList);
  }

Это должно сделать работу;)

...