Question

我想我已经了解了自定义粘性标题的工作原理，但是我找不到在哪里可以添加功能来阻止粘性标题的标题重叠我想实现下图所示的功能，但标题不重叠，我希望每个标题都相互贴紧。对于在何处添加其他功能的任何帮助将是巨大的帮助，在此先感谢您！ image showing the overlapping sticky header

编辑：source link

Answer 1

好的，逻辑很简单。只需将标题添加到列表中，然后将标题的子项目添加到该列表中即可。

因此，您可以使用以下代码来实现您的要求：

    List<Widget> _buildStickySliverListTest(ListCount sliverList) {
    var widgetList = List<Widget>();
    for (int index = 0; index < sliverList.data.length; index++) {
      widgetList
        ..add(
          SliverAppBar(
            automaticallyImplyLeading: false,
            title: Text("Header $index"),
            pinned: true,
          ),
        )
        ..add(
          SliverFixedExtentList(
            itemExtent: 50.0,
            delegate:
            SliverChildBuilderDelegate((BuildContext context, int index) {
              return Container(
                alignment: Alignment.center,
                color: Colors.lightBlue[100 * (index % 9)],
                child: Text('Sublist item $index'),
              );
            }, childCount: sliverList.data[index].length),
          ),
        );
    }

    return widgetList;
  }

  @override
  Widget build(BuildContext context) {
    var list1=["a","b","c"];
    var list2=["a","b","c","d","e"];
    var list3=["a","b"];
    var list4=["a","b","c","d"];
    var data=[list1,list2,list3,list4];
    var sliverList=ListCount(data);

    return Scaffold(
      appBar: AppBar(
        title: Text("Sticky Sliver List"),
      ),
      body: CustomScrollView(
      slivers: _buildStickySliverListTest(sliverList),
      ),
    );
  }

此外，如下所示为ListCount创建一个类，

class ListCount{
  List<List<String>> data;

  ListCount(this.data);
}

这样，您可以轻松地构建标题和子列表。根据您的选择实施列出和标题的逻辑。

我希望这能满足您的要求。

我怎样才能使“自定义粘性标头”中的标头彼此紧贴，而不是相互重叠？

1 个答案: