Question

我已使用下面的代码创建了此示例列表项粘性页脚，但是，我想将其扩展到同一屏幕上的多个项目，当下一个粘性项出现时，我希望它将当前项推开。

我不确定最好的方法是什么

因为我在这里使用了可见性技巧，当下一项出现时，当前项消失了，看起来很奇怪。
因为我必须维护n个全局密钥，而且我不确定这是否是正确的方法或它如何影响性能。

class ListScreen extends StatefulWidget {
  @override
  _ListScreenState createState() => _ListScreenState();
}

class _ListScreenState extends State<ListScreen> {
  ScrollController _controller;
  GlobalKey _key = GlobalKey();
  GlobalKey _listKey = GlobalKey();
  bool opacity = false;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  Widget _stickyItem() {
    return Container(
      height: 60,
      decoration: BoxDecoration(
        color: Color(0xFF444444),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    _controller = new ScrollController();

    _controller.addListener(() {
      final box = _key.currentContext.findRenderObject() as RenderBox;
      final listBox = _listKey.currentContext.findRenderObject() as RenderBox;

      final listPosition = listBox.localToGlobal(Offset.zero);
      final footerPosition = box.localToGlobal(Offset.zero);
      print(listPosition);
      print(footerPosition);

      if (listPosition >= footerPosition) {
        if (opacity == false) {
          setState(() => opacity = true);
        }
      } else if (opacity) {
        setState(() => opacity = false);
      }
    });

    return Scaffold(
      body: Container(
        child: SafeArea(
          child: Stack(
            children: <Widget>[
              ListView.builder(
                key: _listKey,
                itemCount: 1000,
                controller: _controller,
                physics: const AlwaysScrollableScrollPhysics(),
                itemBuilder: (context, index) {
                  if (index == 0) {
                    return Container(
                      child: Column(
                        children: <Widget>[
                          Container(
                            height: 400,
                          ),
                          Container(
                            key: _key,
                            height: 60,
                            color: Color(0xFF444444),
                          ),
                        ],
                      ),
                      decoration: BoxDecoration(
                        color: Color(0xFFFFFFee),
                      ),
                    );
                  }
                  return Container(
                      height: 60,
                      decoration: BoxDecoration(color: Colors.white),
                      child: Card());
                },
              ),
              Visibility(
                visible: opacity,
                child: _stickyItem(),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

这是运行时的样子。[！[Unpinned] [1]] [1]

[！[固定] [2]] [2]

我知道那里有一些图书馆，看了看它们之后，我发现不仅要实现我的特定需求案例还很困难，我也认为我

固定：https://i.stack.imgur.com/cIejy.png 取消固定：https://i.stack.imgur.com/MbC4L.png

Flutter粘性列表项小部件

0 个答案: