像 Whatsapp 的 LockedChats 一样通过滚动/滑动显示容器

Question

我想在聊天列表顶部有一个搜索栏，但该搜索栏仅应在用户向下滑动/滚动时出现，然后在向上滚动时再次隐藏，与我们在 flutter 中看到的 LockedChats 选项相同的行为。主要问题是当聊天列表不够长而无法滚动时，我们如何获取滚动事件并隐藏或显示搜索栏。这是一些示例代码，当列表足够长可以滚动时可以工作，但当列表不可滚动时则不起作用，在这种情况下我该如何处理。

class YourWidget extends StatefulWidget {
  @override
  _YourWidgetState createState() => _YourWidgetState();
}

class _YourWidgetState extends State<YourWidget> {
  bool showSliverToBoxAdapter = false;
  final ScrollController _scrollController = ScrollController();

  @override
  void initState() {
    super.initState();
    _scrollController.addListener(_scrollListener);
  }

  @override
  void dispose() {
    _scrollController.removeListener(_scrollListener);
    _scrollController.dispose();
    super.dispose();
  }

  void _scrollListener() {
    if (_scrollController.offset >= 50 && !showSliverToBoxAdapter) {
      setState(() {
        showSliverToBoxAdapter = true;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      backgroundColor: Colors.white,
      body: LazyLoadScrollView(
        isLoading: controller.isLoading,
        scrollOffset: 50,
        onEndOfPage: () {},
        child: RefreshIndicator(
          onRefresh: () async {},
          child: CustomScrollView(
            cacheExtent: 2000,
            controller: _scrollController,
            physics: BouncingScrollPhysics(),
            slivers: [
              if (showSliverToBoxAdapter)
                SliverToBoxAdapter(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          SizedBox(width: 12),
                          Expanded(
                            child: Container(
                              margin: EdgeInsets.only(top: 8, bottom: 8),
                              decoration: BoxDecoration(
                                color: Color.fromRGBO(243, 242, 248, 1),
                                border: Border.all(
                                  color: Colors.grey.shade400,
                                ),
                                borderRadius: BorderRadius.circular(8),
                              ),
                              height: 34,
                              padding: EdgeInsets.only(left: 4, right: 8),
                            ),
                          ),
                          SizedBox(width: 17),
                        ],
                      ),
                      Container(
                        width: double.infinity,
                        height: 0.4,
                        color: Colors.grey.shade300,
                      ),
                    ],
                  ),
                ),
              SliverList(
                delegate: SliverChildBuilderDelegate(
                  (BuildContext context, int index) {
                    return Container(
                      margin: EdgeInsets.all(4),
                      height: 70,
                      width: 300,
                      color: Colors.green,
                    );
                  },
                  childCount: 17,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 1

看起来这可以解决您的问题？ https://pub.dev/packages/sliver_tools#sliverpinnedheader