在Flutter中使用提供程序包的问题

时间:2020-08-03 16:14:02

标签: flutter flutter-provider

main.dart

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

class ToDo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(
          create: (context) => TaskList(),
        ),
      ],
      child: MaterialApp(
        debugShowCheckedModeBanner: false,
        home: TaskPage(),
        theme: ThemeData.dark().copyWith(
          canvasColor: Colors.transparent,
        ),
      ),
    );
  }
}

我正在使用两个 Consumer 小部件,一个返回一个 Text 小部件,另一个返回一个 ListView

class TaskPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xff212121),
      body: Container(
        padding: EdgeInsets.only(top: 50),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            ListTile(
              leading: CircleAvatar(
                radius: 25,
                backgroundColor: Colors.white,
                child: Icon(
                  Icons.check,
                  color: Colors.black,
                  size: 40,
                ),
              ),
              title: Text(
                'ToDo',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 50,
                  fontWeight: FontWeight.w900,
                ),
              ),
            ),
            SizedBox(
              height: 40,
            ),
            Center(
              child: Consumer<TaskList>(
                builder: (context, list, child) {
                  print('making new text');
                  return Text(
                    '${list.length} Tasks  Remaining',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 20,
                    ),
                  );
                },
              ),
            ),
            Expanded(
              child: Container(
                child: Consumer<TaskList>(
                  builder: (context, list, child) {
                    return ListView(
                      children: list.taskList,
                    );
                  },
                ),
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(30.0),
                    topRight: Radius.circular(30.0),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(
          Icons.add,
          color: Colors.white,
        ),
        backgroundColor: Colors.blueGrey,
        onPressed: () {
          showModalBottomSheet(
            context: context,
            builder: (context) => AddTaskSheet(),
          );
        },
      ),
    );
  }
}

我要提供给这些小部件的对象是包含列表的TaskList。

class TaskList with ChangeNotifier {
  List<TaskTile> taskList = [
    TaskTile(taskData: TaskData(task: 'Code')),
    TaskTile(taskData: TaskData(task: 'Code Again')),
    TaskTile(taskData: TaskData(task: 'Keep Coding')),
  ];

  int get length => taskList.length;

  void addTask(TaskTile newTaskTile) {
    taskList.add(newTaskTile);
    notifyListeners();
  }

}

为了添加任务,我正在使用ModalBottomSheet,其中包含:

class AddTaskSheet extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    String newTask;
    return Container(
      color: Colors.transparent,
      child: Container(
        padding: EdgeInsets.all(20),
        decoration: BoxDecoration(
          color: Color(0xff212121),
          borderRadius: BorderRadius.only(
            topRight: Radius.circular(40.0),
            topLeft: Radius.circular(40.0),
          ),
        ),
        child: Column(
          children: <Widget>[
            TextField(
              onChanged: (value) {
                newTask = value;
              },
              decoration: InputDecoration(
                hintText: 'Describe Your Task',
                hintStyle: TextStyle(
                  color: Colors.white38,
                ),
                fillColor: Colors.black,
                filled: true,
                enabledBorder: OutlineInputBorder(
                  borderSide: BorderSide(color: Colors.white),
                  borderRadius: BorderRadius.all(Radius.circular(30)),
                ),
                focusedBorder: OutlineInputBorder(
                  borderSide: BorderSide(color: Colors.white, width: 2.5),
                  borderRadius: BorderRadius.all(Radius.circular(30)),
                ),
              ),
            ),
            SizedBox(height: 30),
            AddButton(
              onTap: () {
                print(newTask);
                Provider.of<TaskList>(context, listen: false).addTask(
                  TaskTile(
                    taskData: TaskData(task: newTask),
                  ),
                );
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),
    );
  }
}

在这里,我向 AddTaskSheet 添加了一个名为 AddButton 的按钮:

import 'package:flutter/material.dart';

class AddButton extends StatelessWidget {
  final Function onTap;
  AddButton({this.onTap});
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        child: ListTile(
          contentPadding: EdgeInsets.symmetric(horizontal: 60),
          title: Text(
            'ADD NEW TASK',
            style: TextStyle(
              color: Colors.white70,
              fontWeight: FontWeight.bold,
            ),
          ),
          leading: Icon(
            Icons.add,
            color: Colors.white70,
          ),
        ),
        decoration: BoxDecoration(
          color: Colors.black,
          borderRadius: BorderRadius.all(
            Radius.circular(30),
          ),
          boxShadow: <BoxShadow>[
            BoxShadow(
              color: Colors.black38,
              blurRadius: 5.0,
              offset: Offset(-5.0, 15.0),
            )
          ],
        ),
      ),
    );
  }
}

现在,每当我将新任务添加到列表中时,即使在调用notifyListener后, ListView 也不会使用新任务进行更新,但是另一方面,文本小部件会更新具有新的列表大小。

我不知道怎么了。 有人可以帮忙吗。

0 个答案:

没有答案