我如何在 Flutter 中制作像 google tasks ui 这样的可滚动列表？

Question

当你到达列表的末尾我卡与进行滚动列表像谷歌应用程序的任务，如果任何任务完成后与自定义标题另一个列表中显示它，你可以看到这里，我使用棉条

Widget showTaskList() {
  final todos = Hive.box('todos');

  return ValueListenableBuilder(
      valueListenable: Hive.box('todos').listenable(),
      builder: (context, todoData, _) {
        int dataLen = todos.length;
        return CustomScrollView(
          slivers: <Widget>[
            SliverAppBar(
              floating: true,
              expandedHeight: 100,
              flexibleSpace: Container(
                padding: EdgeInsets.only(
                    left: MediaQuery.of(context).size.width / 10,
                    top: MediaQuery.of(context).size.height / 17),
                height: 100,
                color: Colors.white,
                child: Text(
                  'My Task',
                  style: TextStyle(fontSize: 30.0, fontWeight: FontWeight.w600),
                ),
              ),
            ),
            SliverList(
              delegate:
                  SliverChildBuilderDelegate((BuildContext context, int index) {
                final todoData = todos.getAt(index);
                Map todoJson = jsonDecode(todoData);
                final data = Todo.fromJson(todoJson);
                return MaterialButton(
                  padding: EdgeInsets.zero,
                  onPressed: () {},
                  child: Container(
                    color: Colors.white,
                    child: ListTile(
                      leading: IconButton(
                          icon: data.done
                              ? Icon(
                                  Icons.done,
                                  color: Colors.red,
                                )
                              : Icon(
                                  Icons.done,
                                ),
                          onPressed: () {
                            final todoData = Todo(
                                details: data.details,
                                title: data.title,
                                done: data.done ? false : true);
                            updataTodo(todoData, index);
                          }),
                      title: Text(
                        data.title,
                        style: TextStyle(
                            decoration: data.done
                                ? TextDecoration.lineThrough
                                : TextDecoration.none),
                      ),
                      subtitle: Text(data.details),
                      trailing: IconButton(
                          icon: Icon(Icons.delete_forever),
                          onPressed: () {
                            todos.deleteAt(index);
                          }),
                    ),
                  ),
                );
              }, childCount: dataLen),
            ),
          ],
        );
      });
}

ShowTaskList 被调用

Scaffold(
        body: SafeArea(
          child: Column(children: <Widget>[
            Expanded(
              
              child: showTaskList()
            ),
            
          ]),
        ),

如果没有完整的待办事项，我尝试OffStageSliver使小部件消失，但这不起作用，也不能在 CustomScrollView 上使用任何其他小部件，因为这与视口冲突，因为它只接受条子小部件。 在这里我都取得了迄今

Answer 1

您可以尝试使用ScrollController将它放在CustomScrollView并在 initState 中听它的控制器，如下所示：

  @override
  void initState() {
    super.initState();
    _scrollController.addListener(() {
      if (_scrollController.position.pixels ==
          _scrollController.position.maxScrollExtent) {
        // If it reach end do something here...
      }
    });
  }

我建议你制作 bool 变量来显示你的小部件，用 false 初始化它，然后在它到达控制器结束后调用 setState 并使你的变量为真，你不能在 initState 中调用 setState 所以你必须制作另一个函数来制作它像这样工作：

  reachEnd() {
    setState(() {
      end = true;
    });
  }

将该函数放在 initState 中。 并根据您的小部件中的 bool 变量创建条件

if(end) _yourWidget()

就这样。 我希望你能理解并希望这是你想要的方式。