Question

使用ListView.separated，我们可以在列表项之间添加Divider（），但是，一旦我过渡到SliverList，就无法看到我的分隔线。

delegate: SliverChildBuilderDelegate(
            // displays the index of the current item.
            (context, index) => new ListTile(
              title: Text(_sagItems[index].manufacturer, style: TextStyle(fontSize: 18),),
              subtitle: Text(_sagItems[index].model, style: TextStyle(fontSize: 16)),
                onTap: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => DetailScreen(sagitem: _sagItems[index]),
                    ),
                  );
                },
              ),
              //DIVIDER NOT WORKING HERE
              Divider(color: Colors.blueGrey),
              childCount: _sagItems.length,
          ),

用SliverList添加分隔线的关键是什么？

Answer 1

您可以这样做：

      delegate: SliverChildBuilderDelegate(
            (BuildContext context,int index){
              if(index.isOdd){
                return Divider(color: Colors.blueGrey);
              }
              return ListTile(
              title: Text(_sagItems[index~/2].manufacturer, style: TextStyle(fontSize: 18),),
              subtitle: Text(_sagItems[index~/2].model, style: TextStyle(fontSize: 16)),
                onTap: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => DetailScreen(sagitem: _sagItems[index~/2]),
                    ),
                  );
                },
              );

              },
             childCount: (_sagItems.length * 2)-1,
          ),

Answer 2

我确定先前的回答可以正常工作，但是我不喜欢其他计算。它给代码带来了更多的复杂性，后来又变得更加难以维护。

相反，我建议您考虑将ListTile放置在Column内，并且仅当索引到达最后一条记录时才隐藏Divider。

delegate: SliverChildBuilderDelegate(
    // displays the index of the current item.
    (context, index) => Column(
      children: <Widget>[
        new ListTile(
          title: Text(
            _sagItems[index].manufacturer,
            style: TextStyle(fontSize: 18),
          ),
          subtitle: Text(_sagItems[index].model, style: TextStyle(fontSize: 16)),
          onTap: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => DetailScreen(sagitem: _sagItems[index]),
              ),
            );
          },
        ),
        index < _sagItems.length - 1 ? Divider(color: Colors.blueGrey) : Container(),
      ],
    ),
    childCount: _sagItems.length,
  ),

Flutter SilverList列表项之间的分隔符/分隔符

2 个答案: