ListView Flutter 中的 ListViews

Posted

技术标签:

【中文标题】ListView Flutter 中的 ListViews【英文标题】:ListViews inside ListView Flutter 【发布时间】:2020-03-21 03:49:59 【问题描述】:

试图复制 google 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),
          ),
        ],
      ),
    );

  

完成列表的代码几乎相同,只是流和 listItem UI 不同。

使用此代码,我在一个列表中同时获得了待处理的 listView 和 ExpansionTile,但它们就像在 separate blocks 中一样

另外,如果我在待处理列表中添加很多项目,我无法向下滚动,因为我使用 srinkWrap,否则,我会收到一堆错误。

所以是的,我不知道这是否正确表述,是否有人理解我在说什么,但我只需要知道我应该如何创建类似于 MyTasks 应用程序的任务列表。

【问题讨论】:

【参考方案1】:

您需要的是一个带有 ExpansionTile 小部件的单个 ListView。 基本上,在移动设备上进行多次滚动是个坏主意。 (查看 android / ios 指南)

【讨论】:

以上是关于ListView Flutter 中的 ListViews的主要内容,如果未能解决你的问题,请参考以下文章

Flutter ListVİew 总是在向上或向下滚动时重新渲染

为每个页面创建具有动态高度的 Flutter Carousel Slider

从ArrayAdapter每毫秒更新Android ListView中的一行

Flutter - 另一个 Listview 中的 Listview.builder

Flutter中的ListView动态排序

Flutter 中的 ListView 居中