Flutter实现：点击搜索图标展开无建议区的非全屏搜索栏

可以通过自定义SearchAnchor的viewBuilder来实现需求，完全控制展开后的视图结构，避免默认的建议区和分隔线问题。以下是可行的实现方案：

核心思路 #

放弃依赖默认的建议区布局，通过viewBuilder自定义展开后的视图，只保留搜索输入栏部分，同时绑定SearchController来控制视图的打开/关闭状态。

完整代码示例 #

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

  @override
  State<SearchIconToBar> createState() => _SearchIconToBarState();
}

class _SearchIconToBarState extends State<SearchIconToBar> {
  final SearchController _searchController = SearchController();

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Demo"),
        actions: [
          SearchAnchor(
            isFullScreen: false,
            searchController: _searchController,
            builder: (context, controller) {
              return IconButton(
                icon: const Icon(Icons.search),
                onPressed: () => controller.openView(),
              );
            },
            // 自定义展开后的视图，仅保留搜索栏
            viewBuilder: (context) {
              return Material(
                elevation: 4,
                child: Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
                  child: SearchBar(
                    controller: _searchController,
                    hintText: "输入搜索内容",
                    textInputAction: TextInputAction.search,
                    keyboardType: TextInputType.numberWithOptions(),
                    onSubmitted: (value) {
                      // 处理搜索逻辑
                      print("搜索内容：$value");
                      _searchController.closeView(value);
                    },
                    leading: const Icon(Icons.search),
                    trailing: [
                      IconButton(
                        icon: const Icon(Icons.clear),
                        onPressed: () {
                          _searchController.clear();
                        },
                      ),
                    ],
                  ),
                ),
              );
            },
          ),
        ],
      ),
      body: const Center(child: Text("主内容区域")),
    );
  }
}

关键说明 #

• viewBuilder：替代默认的建议区布局，直接返回包含SearchBar的自定义视图，完全避免了默认的分隔线和建议容器。
• SearchController绑定：将SearchController同时关联到SearchAnchor和SearchBar，确保视图状态和输入内容同步。
• 关闭逻辑：在SearchBar的onSubmitted中调用closeView，完成搜索后自动收起搜索栏。

这种方案不仅完全隐藏了建议区，还能自定义搜索栏的样式和布局，比通过viewConstraints强制限制高度的方案更可靠。

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