如何清除搜索栏 - 在 null 上调用了“clear”方法

Question

我正在使用这个包：https://pub.dev/packages/material_floating_search_bar/example

我不想在操作中使用 .searchToClear() 方法。

我想添加我的自定义图标，所以我试图在调用 onPressed 时清除搜索栏。但我明白了：

The following NoSuchMethodError was thrown while handling a gesture:
The method 'clear' was called on null.
Receiver: null
Tried calling: clear()

这是我的代码

_searchBar() {
    return FloatingSearchBar(
      backdropColor: Colors.transparent,
      hint: 'Search...',
      scrollPadding: const EdgeInsets.only(top: 16, bottom: 56),
      transitionDuration: const Duration(milliseconds: 800),
      transitionCurve: Curves.easeInOut,
      physics: const BouncingScrollPhysics(),
      openAxisAlignment: 0.0,
      debounceDelay: const Duration(milliseconds: 500),
      onQueryChanged: (query) {
        // Call your model, bloc, controller here.
      },
      // Specify a custom transition to be used for
      // animating between opened and closed stated.
      transition: CircularFloatingSearchBarTransition(),
      actions: [
        // FloatingSearchBarAction.searchToClear(
        //   showIfClosed: false,
        // ),
        FloatingSearchBarAction.icon(
            showIfClosed: false,
            showIfOpened: true,
            icon: Icon(Icons.clear),
            onTap: () {
              final bar = FloatingSearchAppBar.of(context);
              bar.clear();
              print(bar);
            }),
      ],
      builder: (context, transition) {
        return ClipRRect(
          borderRadius: BorderRadius.circular(8),
          child: Material(
            color: Colors.white,
            elevation: 4.0,
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: Colors.accents.map((color) {
                return Container(height: 112, color: color);
              }).toList(),
            ),
          ),
        );
      },
    );
  }

Answer 1

更新：

如果你在函数内部使用任何相关的上下文，你只需要接受BuildContext作为参数。

从文档本身，您需要声明一个控制器，以便能够控制搜索栏的close 和clear。这意味着它必须在 statefulWidget 内，因为它有一些变化。

1. 首先，我们要声明FloatingSearchBarController _floatingSearchBarController = FloatingSearchBarController();
2. 在按钮内部，我们可以使用_floatingSearchBarController.clear() 或_floatingSearchBarController.close()

使用您的代码进行演示的示例如下：

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

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  FloatingSearchBarController _floatingSearchBarController = FloatingSearchBarController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      appBar: AppBar(title: Text('Hello Floating'),),
      body: Stack(
        children: [
          Center(
            child: Text('World'),
          ), 
          _searchBar(),
        ]
      ),
    );
  }

  Widget _searchBar() {
    return FloatingSearchBar(
      controller: _floatingSearchBarController,
      backdropColor: Colors.transparent,
      hint: 'Search...',
      clearQueryOnClose: true, // INSERT THIS
      scrollPadding: const EdgeInsets.only(top: 16, bottom: 56),
      transitionDuration: const Duration(milliseconds: 800),
      transitionCurve: Curves.easeInOut,
      physics: const BouncingScrollPhysics(),
      openAxisAlignment: 0.0,
      debounceDelay: const Duration(milliseconds: 500),
      onQueryChanged: (query) {
        // Call your model, bloc, controller here.
      },
      // Specify a custom transition to be used for
      // animating between opened and closed stated.
      transition: CircularFloatingSearchBarTransition(),
      actions: [
        FloatingSearchBarAction.icon(
              showIfClosed: false,
              showIfOpened: true,
              icon: Icon(Icons.clear),
              onTap: () {
                // FloatingSearchBar.of(context)
                _floatingSearchBarController.clear();
                _floatingSearchBarController.close();
                // FloatingSearchBar.of(context).close();
                // final bar = FloatingSearchAppBar.of(context);
                // bar.clear();
                // print(bar);
        }),
        
      ],
      builder: (context, transition) {
        return ClipRRect(
          borderRadius: BorderRadius.circular(8),
          child: Material(
            color: Colors.white,
            elevation: 4.0,
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: Colors.accents.map((color) {
                return Container(height: 112, color: color);
              }).toList(),
            ),
          ),
        );
      },
    );
  }
}