feat: add clear button to search box (#190)

* feat: add clear button to search box * Refactor search functionality * Revert "feat: add clear button to search box" This reverts commit f2ad0d1. * Fix search bar clear button behavior * Fix search appbar behavior
miru-project · Feb 7, 2024 · e1a857d · e1a857d
1 parent 8b5ae1c
commit e1a857d
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 11 deletions.
diff --git a/lib/views/pages/search/extension_searcher_page.dart b/lib/views/pages/search/extension_searcher_page.dart
@@ -42,7 +42,8 @@ class _ExtensionSearcherPageState extends fluent.State<ExtensionSearcherPage> {
   Map<String, ExtensionFilter>? _filters;
   // 初始化一开始选择的选项
   Map<String, List<String>> _selectedFilters = {};
-  // 缓存的选项
+
+  late final _textEditingController = TextEditingController(text: _keyWord);
 
   @override
   void initState() {
@@ -52,6 +53,12 @@ class _ExtensionSearcherPageState extends fluent.State<ExtensionSearcherPage> {
     });
   }
 
+  @override
+  void dispose() {
+    _textEditingController.dispose();
+    super.dispose();
+  }
+
   _initFilters() async {
     _filters = await _runtime.createFilter();
     _filters!.forEach((key, value) {
@@ -200,7 +207,7 @@ class _ExtensionSearcherPageState extends fluent.State<ExtensionSearcherPage> {
     return Scaffold(
       appBar: SearchAppBar(
         title: _runtime.extension.name,
-        textEditingController: TextEditingController(text: _keyWord),
+        textEditingController: _textEditingController,
         onChanged: (value) {
           if (value.isEmpty) {
             _onSearch(value);
@@ -247,6 +254,18 @@ class _ExtensionSearcherPageState extends fluent.State<ExtensionSearcherPage> {
   }
 
   Widget _buildDesktop(BuildContext context) {
+    final suffix = Row(mainAxisSize: MainAxisSize.min, children: [
+      Padding(
+        padding: const EdgeInsetsDirectional.only(start: 2.0),
+        child: fluent.IconButton(
+          icon: const Icon(fluent.FluentIcons.chrome_close, size: 9.0),
+          onPressed: () {
+            _textEditingController.clear();
+            _onSearch("");
+          },
+        ),
+      ),
+    ]);
     return Column(
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [
@@ -287,6 +306,8 @@ class _ExtensionSearcherPageState extends fluent.State<ExtensionSearcherPage> {
                       _onSearch(value);
                     }
                   },
+                  suffix: suffix,
+                  suffixMode: fluent.OverlayVisibilityMode.editing,
                   onSubmitted: _onSearch,
                   placeholder: 'search.hint-text'.i18n,
                 ),

diff --git a/lib/views/pages/search/search_page.dart b/lib/views/pages/search/search_page.dart
@@ -117,6 +117,18 @@ class _SearchPageState extends State<SearchPage> {
   }
 
   Widget _buildDesktopSearch(BuildContext context) {
+    final suffix = Row(mainAxisSize: MainAxisSize.min, children: [
+      Padding(
+        padding: const EdgeInsetsDirectional.only(start: 2.0),
+        child: fluent.IconButton(
+          icon: const Icon(fluent.FluentIcons.chrome_close, size: 9.0),
+          onPressed: () {
+            c.search.value = '';
+            setState(() {});
+          },
+        ),
+      ),
+    ]);
     return Obx(
       () => Column(
         children: [
@@ -210,6 +222,8 @@ class _SearchPageState extends State<SearchPage> {
                           controller:
                               TextEditingController(text: c.search.value),
                           placeholder: "search.hint-text".i18n,
+                          suffix: suffix,
+                          suffixMode: fluent.OverlayVisibilityMode.editing,
                           onChanged: (value) {
                             if (value.isEmpty) {
                               c.search.value = '';

diff --git a/lib/views/widgets/search_appbar.dart b/lib/views/widgets/search_appbar.dart
@@ -37,24 +37,53 @@ class _SearchAppBarState extends State<SearchAppBar> {
   @override
   Widget build(BuildContext context) {
     return AppBar(
+      leading: _showSearch
+          ? IconButton(
+              onPressed: () {
+                setState(() {
+                  widget.textEditingController.clear();
+                  widget.onSubmitted?.call('');
+                  _showSearch = false;
+                });
+              },
+              icon: const Icon(Icons.arrow_back),
+            )
+          : null,
       title: _showSearch
-          ? TextField(
-              controller: widget.textEditingController,
-              decoration: InputDecoration(
-                hintText: widget.hintText ?? widget.title,
-                border: InputBorder.none,
+          ? PopScope(
+              canPop: false,
+              onPopInvoked: (_) async {
+                if (_showSearch) {
+                  setState(() {
+                    widget.textEditingController.clear();
+                    widget.onSubmitted?.call('');
+                    _showSearch = false;
+                  });
+                  return;
+                }
+              },
+              child: TextField(
+                controller: widget.textEditingController,
+                decoration: InputDecoration(
+                  hintText: widget.hintText ?? widget.title,
+                  border: InputBorder.none,
+                ),
+                autofocus: true,
+                onChanged: widget.onChanged,
+                onSubmitted: widget.onSubmitted,
               ),
-              autofocus: true,
-              onChanged: widget.onChanged,
-              onSubmitted: widget.onSubmitted,
             )
           : Text(widget.title),
       actions: [
         IconButton(
           onPressed: () {
             setState(() {
+              if (_showSearch) {
+                widget.textEditingController.clear();
+                widget.onSubmitted?.call('');
+                return;
+              }
               _showSearch = !_showSearch;
-              if (!_showSearch) widget.onSubmitted?.call("");
             });
           },
           icon: Icon(_showSearch ? Icons.close : Icons.search),