Flutter如何实现EasyRefresh顶部搜索框的联动

在Flutter中使用EasyRefresh组件时，如何实现顶部搜索框与下拉刷新的联动效果？具体需求是：当下拉刷新时，顶部的搜索框能跟随列表内容一起向下滑动，而不是固定在顶部不动。尝试过NestedScrollView和SliverAppBar，但容易出现滑动冲突或抖动问题。请问有没有更稳定的实现方案或示例代码？

2 回复

使用EasyRefresh与CustomScrollView和SliverAppBar联动。设置SliverAppBar的pinned为true，floating为true，结合ScrollController监听滚动，控制搜索框的显示与隐藏。

更多关于Flutter如何实现EasyRefresh顶部搜索框的联动的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 中，可以通过 EasyRefresh 和 ScrollController 实现顶部搜索框与下拉刷新的联动效果，使搜索框随下拉操作显示或隐藏。以下是实现步骤：

1. 添加依赖

在 pubspec.yaml 中添加：

dependencies:
  easy_refresh: ^3.0.0

2. 实现核心代码

import 'package:flutter/material.dart';
import 'package:easy_refresh/easy_refresh.dart';

class SearchWithRefresh extends StatefulWidget {
  @override
  _SearchWithRefreshState createState() => _SearchWithRefreshState();
}

class _SearchWithRefreshState extends State<SearchWithRefresh> {
  final EasyRefreshController _refreshController = EasyRefreshController();
  final ScrollController _scrollController = ScrollController();
  bool _showSearchBar = true;
  double _lastOffset = 0;

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

  void _scrollListener() {
    final currentOffset = _scrollController.offset;
    // 根据滚动方向显示/隐藏搜索框
    if (currentOffset > _lastOffset && currentOffset > 50) {
      setState(() => _showSearchBar = false); // 向下滚动隐藏
    } else if (currentOffset < _lastOffset) {
      setState(() => _showSearchBar = true); // 向上滚动显示
    }
    _lastOffset = currentOffset;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: EasyRefresh(
        controller: _refreshController,
        scrollController: _scrollController,
        onRefresh: () async {
          // 模拟刷新数据
          await Future.delayed(Duration(seconds: 2));
          _refreshController.finishRefresh();
        },
        child: CustomScrollView(
          slivers: [
            // 顶部搜索框
            SliverAppBar(
              pinned: true,
              expandedHeight: 100,
              flexibleSpace: _showSearchBar
                  ? FlexibleSpaceBar(
                      background: Container(
                        color: Colors.white,
                        child: TextField(
                          decoration: InputDecoration(
                            hintText: '搜索...',
                            prefixIcon: Icon(Icons.search),
                            border: OutlineInputBorder(),
                          ),
                        ),
                      ),
                    )
                  : null,
            ),
            // 列表内容
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (context, index) => ListTile(title: Text('项目 $index')),
                childCount: 20,
              ),
            ),
          ],
        ),
      ),
    );
  }

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

关键点说明：

  1. 联动逻辑：通过 ScrollController 监听滚动位置，根据偏移量变化显示/隐藏搜索框。
  2. 状态管理：使用 _showSearchBar 布尔值控制搜索框的显隐。
  3. SliverAppBar：结合 FlexibleSpaceBar 实现可折叠的搜索栏效果。
  4. EasyRefresh 配置：通过 scrollController 属性关联滚动控制，确保下拉刷新与滚动监听共存。

效果：

  • 用户向下滑动时，搜索框隐藏
  • 向上滑动或返回顶部时，搜索框显示
  • 下拉触发刷新功能正常

可根据实际需求调整滚动阈值（示例中为 50）和动画效果。

回到顶部