ListView Flutter 中的 ListView

Question

試圖復制谷歌 MyTasks 應用程序，但無法提出任務列表的解決方案。

基本上嘗試做這個布局： ListsView

如果我理解正確的話，這是兩個列表視圖：一個待處理的任務，另一個已完成的任務。 已完成的任務在 ExpansionTile 內。 待處理的任務按日期分隔。

目前，我有這個 listView 構建器：

顯示項目的主要列表：

  Widget build(BuildContext context) {
    final dao = Provider.of<TodoDao>(context);

    return ListView(
      shrinkWrap: true,
      children: <Widget>[
        _buildTaskList(context),
        ExpansionTile(
          title: Text('Completed tasks'),
          children: <Widget>[_buildCompletedTodoList(context)],
        )
      ],
    );
  }

建築待定清單

  StreamBuilder<List<Task>> _buildTaskList(BuildContext context) {
    final dao = Provider.of<TodoDao>(context);

    return StreamBuilder(
      stream: dao.watchAllTasks(),
      builder: (context, AsyncSnapshot<List<Task>> snapshot) {
        final tasks = snapshot.data ?? List();

        return ListView.builder(
          itemCount: tasks.length,
          itemBuilder: (_, index) {
            final itemTask = tasks[index];

            return _buildListItem(itemTask, dao);
          },
        );
      },
    );
  }


  Widget _buildListItem(Task itemTask, TodoDao dao) {
    return Dismissible(
      direction: DismissDirection.horizontal,
      key: Key(itemTask.id.toString()),
      onDismissed: (direction) {
        dao.deleteTask(itemTask);
      },
      background: Container(
        color: Colors.blue,
        child: Align(
          alignment: Alignment.centerLeft,
          child: Padding(
            padding: const EdgeInsets.only(left: 16.0),
            child: Icon(
              Icons.check,
              color: Colors.white,
              size: 32.0,
            ),
          ),
        ),
      ),
      secondaryBackground: Container(
        color: Colors.red,
        child: Align(
          alignment: Alignment.centerRight,
          child: Icon(
            Icons.delete,
            color: Colors.white,
            size: 32.0,
          ),
        ),
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          _buildCheckboxListTile(itemTask, dao),
          Divider(
            height: 8.0,
            color: Color.fromRGBO(150, 150, 150, 0.8),
          ),
        ],
      ),
    );

  }

完成列表的代碼幾乎相同，只是流和列表項 UI 不同。

使用此代碼，我將掛起的 listView 和 ExpansionTile 放在一個列表中，但它們就像在單獨的塊中一樣

此外，如果我在待處理列表中添加了很多項目，則無法向下滾動，因為我使用了 srinkWrap，否則，我會收到一堆錯誤。

所以是的，我不知道這是否正確表述，是否有人理解我在說什么，但我只需要想法我應該如何創建類似於 MyTasks 應用程序所擁有的任務列表。

Answer 1

您需要的是一個帶有ExpansionTile小部件的ListView 。 基本上，在移動設備上進行多個滾動是一個壞主意。 （查看 Android / iOS 指南）