如何在颤动中显示 ListView 下拉动作上的搜索栏？

Question

我想实现一个搜索栏，当用户在ListView 中执行下拉操作时显示它，并在用户滚动ListView 时隐藏它（就像在 iOS 中一样）。但是找不到任何有关如何实现这一点的相关信息。 This answer wasn't helpful at all as RefreshIndicator 只返回一个刷新指示器。没有可显示的代码，因为我不知道如何在 Flutter 中做到这一点。

编辑：

代码：

NestedScrollView(
                  headerSliverBuilder:
                      (BuildContext context, bool innerBoxIsScrolled) =>
                          <Widget>[
                    SliverOverlapAbsorber(
                        handle: NestedScrollView.sliverOverlapAbsorberHandleFor(
                            context),
                        sliver: SliverAppBar(
                          collapsedHeight: 100,
                          expandedHeight: 100,
                          toolbarHeight: 100,
                          leadingWidth: 0,
                          leading: Container(),
                          backgroundColor: Colors.red,
                          title: TextField(),
                        )),
                  ],
                  body: ListView.builder(
                      itemCount: _itemCount,
                      itemBuilder: (BuildContext context, int index) {
                        return Text('Item $index');
                      }),
                ),

谢谢！

Answer 1

我找到了一个很好的方法来使用颤振的原生材料showSearch 函数。 showSearch + 它的委托处理搜索显示部分，因此您必须使用这条路线的物质处理方式（下图）

然后，要执行“拖动”功能，您可以在此类中包装一个可滚动的小部件：

注意下面的代码使用了flutter hooks包，如果你不使用钩子，只需使用一个有状态的小部件来管理isDragFromEdge

import 'package:flutter/widgets.dart';
import 'package:flutter_hooks/flutter_hooks.dart';

// The drag delta needed to trigger the onPull function
const kDragTriggerDelta = 15;

class PullScrollable extends HookWidget {
  final Widget child;
  final Function onPull;

  const PullScrollable({
    Key? key,
    required this.child,
    required this.onPull,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final isDragFromEdge = useState(false);

    // Detects if the drag started from the top of the scrollable
    bool getIsDragFromEdge(ScrollStartNotification notification) {
      return notification.metrics.extentBefore == 0.0 &&
          isDragFromEdge.value == false;
    }

    bool handleDragFromEdge() {
      isDragFromEdge.value = true;

      return false;
    }

    bool handleDragEnd() {
      isDragFromEdge.value = false;

      return false;
    }

    // Detects if the drag is in an upwards motion exceeding the trigger delta
    bool getIsOverscroll(ScrollNotification notification) {
      if (!isDragFromEdge.value) return false;

      if ((notification is ScrollUpdateNotification &&
              (notification.dragDetails?.primaryDelta ?? 0) >
                  kDragTriggerDelta) ||
          (notification is OverscrollNotification &&
              (notification.dragDetails?.primaryDelta ?? 0) >
                  kDragTriggerDelta)) {
        return true;
      }

      return false;
    }

    // On overscroll, trigger the onPull function
    bool handleOverscroll() {
      onPull();

      isDragFromEdge.value = false;

      return false;
    }

    return NotificationListener<ScrollNotification>(
      child: child,
      onNotification: (notification) {
        if (notification is ScrollStartNotification &&
            getIsDragFromEdge(notification)) handleDragFromEdge();

        if (notification is ScrollEndNotification) handleDragEnd();

        if (getIsOverscroll(notification)) handleOverscroll();

        return false;
      },
    );
  }
}

将两者结合起来，您就有了类似的东西

class ListView extends StatelessWidget {
  const ListView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return PullScrollable(
      onPull: () {
        showSearch(context: context, delegate: YourDelegate());
      },
      child: ListView(),
    );
  }
}