时间戳

首页 > 解决方案 > 如何让两个 ListView.builder 在同一个滚动条上颤动？

flutter - 如何让两个 ListView.builder 在同一个滚动条上颤动？

问题描述

我正在构建一个非常简单的待办事项列表，我想将其分为两组：上面的待处理任务和下面的已完成任务，通过标记清楚地将它们分开的标题。

然后，我生成了两个列表（_pendientesList 和 _completasList）并在每个列表上放置了一个 ListView.builder，但是当我显示列时，观察到第一个 _completasList 滚动，然后是“完成”的文本，然后是第二个 _pendientesList 滚动. 我想要实现的是这三个组件是同一个 Scroll 的一部分。

从 StreamBuilder 生成列表的代码如下：

Widget _crearListado(BuildContext context, AlarmaBloc alarmaBloc) {

    final _size = MediaQuery.of(context).size;
    List<AlarmaModel> _completasList = new List();
    List<AlarmaModel> _pendientesList = new List();

    return Column(
      children: <Widget>[
        Container(
          height: _size.height * 0.5,
          child: Padding(
            padding: const EdgeInsets.only(bottom: 70.0/2, left: 10.0, right: 10.0, top:0.0), //fondo gris del listado. Bottom
            child: StreamBuilder(
                stream: alarmaBloc.alarmasStream,
                builder: (BuildContext context, AsyncSnapshot<List<AlarmaModel>> snapshot){
                  if (snapshot.hasData) {
                    final tareasList = snapshot.data;
                    if (tareasList.length == 0) return _imagenInicial(context);
                    tareasList.sort((a, b) => a.fechaVencimiento.compareTo(b.fechaVencimiento));
                    _completasList = tareasList.where((element) => element.completa==true).toList();
                    _pendientesList = tareasList.where((element) => element.completa==false).toList();


                    return Column(
                      children: <Widget>[
                        Expanded(


                          child: ListView.builder(
                              itemCount: _pendientesList.length,
                              itemBuilder: (context, i) =>_crearItem(context, alarmaBloc, _pendientesList[i]),
                              padding: EdgeInsets.only(left: 10.0, right: 10.0, top: 10.0, bottom: 20.0),
                            ),
                        ),
                        SizedBox(height: 10.0,),

                        Text('Completas  '),

                        Expanded(


                          child: ListView.builder(
                              itemCount: _completasList.length,
                              itemBuilder: (context, i) =>_crearItem(context, alarmaBloc, _completasList[i]),
                              padding: EdgeInsets.only(left: 10.0, right: 10.0, top: 10.0, bottom: 20.0),
                            ),
                        ),
                      ],
                    );
                  } else if (snapshot.hasError) {
                    return Text(snapshot.error.toString());
                  } 
                    return Center (child: Image(image: AssetImage('Preloader.gif'), height: 200.0,));
                },
            ),
          ),
        ),
      ],
    );
  }

我尝试将 Column 包装在 SingleChildScrollView 中，但没有成功。

如何在同一个 Scroll 中同时拥有 ListView.builder 和文本（或将来的按钮）？

标签： flutterlistview

解决方案

而不是两个ListView.builder，你可以这样做。两者都在同一个滚动列表视图上，所有挂件都在小部件completas之上。

ListView(
      children: [
        for (var itemPendiente in _pendientesList)
          _crearItem(context, alarmaBloc, itemPendiente),
        for (var itemCompletas in _completasList)
          _crearItem(context, alarmaBloc, itemCompletas),
      ],
    );

推荐阅读