fix(flutter): 增加剧场搜索清空按钮

lib/pages/discover/widgets/discover_search_field.dart

@@ -10,6 +10,10 @@ const double _searchRadius = 22;
 const double _searchPadding = 14;
 const double _iconSize = 18;
 const double _iconGap = 8;
+const double _trailingWidth = 42;
+const double _trailingGap = 6;
+const double _clearSize = 18;
+const double _clearIconSize = 12;
 const Duration _focusTransition = Duration(milliseconds: 160);
 
 /// 剧场顶部整行搜索框：浅灰胶囊，聚焦时变白并显示主题色描边。
@@ -40,6 +44,7 @@ class _DiscoverSearchFieldState extends State<DiscoverSearchField> {
   void initState() {
     super.initState();
     widget.focusNode.addListener(_onFocusChanged);
+    widget.controller.addListener(_onTextChanged);
   }
 
   @override
@@ -50,11 +55,16 @@ class _DiscoverSearchFieldState extends State<DiscoverSearchField> {
       widget.focusNode.addListener(_onFocusChanged);
       _focused = widget.focusNode.hasFocus;
     }
+    if (oldWidget.controller != widget.controller) {
+      oldWidget.controller.removeListener(_onTextChanged);
+      widget.controller.addListener(_onTextChanged);
+    }
   }
 
   @override
   void dispose() {
     widget.focusNode.removeListener(_onFocusChanged);
+    widget.controller.removeListener(_onTextChanged);
     super.dispose();
   }
 
@@ -63,6 +73,16 @@ class _DiscoverSearchFieldState extends State<DiscoverSearchField> {
     if (focused != _focused) setState(() => _focused = focused);
   }
 
+  void _onTextChanged() {
+    if (mounted) setState(() {});
+  }
+
+  void _clear() {
+    widget.controller.clear();
+    widget.onChanged('');
+    widget.focusNode.requestFocus();
+  }
+
   @override
   Widget build(BuildContext context) {
     return Padding(
@@ -112,14 +132,7 @@ class _DiscoverSearchFieldState extends State<DiscoverSearchField> {
                   enabledBorder: InputBorder.none,
                   focusedBorder: InputBorder.none,
                   contentPadding: EdgeInsets.zero,
-                  suffixIcon: widget.loading
-                      ? const SizedBox.square(
-                          dimension: 18,
-                          child: Center(
-                            child: CircularProgressIndicator(strokeWidth: 2),
-                          ),
-                        )
-                      : null,
+                  suffixIcon: _trailing(),
                   suffixIconConstraints: const BoxConstraints(
                     minWidth: 0,
                     minHeight: 0,
@@ -132,4 +145,41 @@ class _DiscoverSearchFieldState extends State<DiscoverSearchField> {
       ),
     );
   }
+
+  Widget _trailing() {
+    final hasText = widget.controller.text.isNotEmpty;
+    return SizedBox(
+      width: _trailingWidth,
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.end,
+        children: [
+          if (widget.loading)
+            const SizedBox.square(
+              key: Key('discover-search-loading'),
+              dimension: _iconSize,
+              child: CircularProgressIndicator(strokeWidth: 2),
+            ),
+          if (widget.loading && hasText) const SizedBox(width: _trailingGap),
+          if (hasText)
+            SizedBox.square(
+              key: const Key('discover-search-clear'),
+              dimension: _clearSize,
+              child: Material(
+                color: AppColors.raised,
+                shape: const CircleBorder(),
+                clipBehavior: Clip.antiAlias,
+                child: InkWell(
+                  onTap: _clear,
+                  child: const Icon(
+                    Icons.close_rounded,
+                    size: _clearIconSize,
+                    color: AppColors.muted,
+                  ),
+                ),
+              ),
+            ),
+        ],
+      ),
+    );
+  }
 }

test/discover/discover_search_field_test.dart

@@ -0,0 +1,57 @@
+// Author: fruit.com.cn
+
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:fruitshorts/l10n/app_localizations.dart';
+import 'package:fruitshorts/pages/discover/widgets/discover_search_field.dart';
+
+void main() {
+  testWidgets('should_clear_text_and_keep_focus_when_clear_is_tapped', (
+    tester,
+  ) async {
+    final controller = TextEditingController();
+    final focusNode = FocusNode();
+    final changes = <String>[];
+    addTearDown(controller.dispose);
+    addTearDown(focusNode.dispose);
+
+    await tester.pumpWidget(
+      MaterialApp(
+        locale: const Locale('en'),
+        localizationsDelegates: AppLocalizations.localizationsDelegates,
+        supportedLocales: AppLocalizations.supportedLocales,
+        home: Scaffold(
+          body: DiscoverSearchField(
+            controller: controller,
+            focusNode: focusNode,
+            onChanged: changes.add,
+            loading: true,
+          ),
+        ),
+      ),
+    );
+
+    final search = find.byKey(const Key('discover-search'));
+    expect(find.byKey(const Key('discover-search-clear')), findsNothing);
+
+    await tester.tap(search);
+    await tester.enterText(search, 'velvet');
+    await tester.pump();
+    changes.clear();
+
+    final clear = find.byKey(const Key('discover-search-clear'));
+    final loading = find.byKey(const Key('discover-search-loading'));
+    expect(clear, findsOneWidget);
+    expect(loading, findsOneWidget);
+    expect(tester.getSize(clear), const Size(18, 18));
+    expect(tester.getRect(loading).right, lessThan(tester.getRect(clear).left));
+
+    await tester.tap(clear);
+    await tester.pump();
+
+    expect(controller.text, isEmpty);
+    expect(changes, ['']);
+    expect(find.byKey(const Key('discover-search-clear')), findsNothing);
+    expect(focusNode.hasFocus, isTrue);
+  });
+}