Flutter中如何为CupertinoSearchTextField添加Cancel按钮？

Flutter 的 CupertinoSearchTextField 默认没有内置原生 iOS 样式的「Cancel」按钮（用于移除输入框焦点），但可以通过自定义布局结合焦点管理轻松实现该功能，完全贴合原生交互逻辑。

实现代码示例 #

import 'package:flutter/cupertino.dart';

class CustomSearchBar extends StatefulWidget {
  const CustomSearchBar({super.key});

  @override
  State<CustomSearchBar> createState() => _CustomSearchBarState();
}

class _CustomSearchBarState extends State<CustomSearchBar> {
  final FocusNode _searchFocusNode = FocusNode();
  final TextEditingController _searchController = TextEditingController();

  @override
  void dispose() {
    _searchFocusNode.dispose();
    _searchController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(
          child: CupertinoSearchTextField(
            focusNode: _searchFocusNode,
            controller: _searchController,
            placeholder: '搜索',
            onChanged: (value) {
              // 你的搜索逻辑
            },
          ),
        ),
        // 仅在输入框获焦时显示Cancel按钮
        Visibility(
          visible: _searchFocusNode.hasFocus,
          child: Padding(
            padding: const EdgeInsets.only(left: 8.0),
            child: CupertinoButton(
              padding: EdgeInsets.zero,
              onPressed: () {
                // 移除输入框焦点
                _searchFocusNode.unfocus();
                // 可选：清空输入内容
                _searchController.clear();
              },
              child: const Text('Cancel', style: TextStyle(color: CupertinoColors.systemBlue)),
            ),
          ),
        ),
      ],
    );
  }
}

关键细节说明 #

• 使用 FocusNode 管理输入框焦点，通过 unfocus() 方法实现点击「Cancel」移除焦点的核心需求
• 借助 Visibility 组件让按钮仅在输入框获得焦点时显示，和原生 iOS 行为保持一致
• 搭配 TextEditingController 可实现点击「Cancel」时同时清空输入内容的额外功能（可选）

内容的提问来源于stack exchange，提问作者Chris