如何在Flutter中实现截图所示的非跳转式搜索栏？

你不需要用SearchDelegate，它的设计逻辑就是全屏跳转页面。可以通过状态管理+条件渲染实现当前页面内的搜索交互，同时保留BottomNavigationBar、隐藏筛选按钮，具体实现方案如下：

核心思路 #

用StatefulWidget维护搜索状态（是否处于搜索模式），通过布尔变量控制搜索框、筛选按钮、搜索结果的显示/隐藏；BottomNavigationBar直接绑定到Scaffold的bottomNavigationBar属性，默认始终可见。

具体实现代码示例 #

import 'package:flutter/material.dart';

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

  @override
  State<MapSearchPage> createState() => _MapSearchPageState();
}

class _MapSearchPageState extends State<MapSearchPage> {
  // 控制是否进入搜索模式
  bool _isSearching = false;
  // 搜索输入控制器
  final TextEditingController _searchController = TextEditingController();
  // 模拟搜索结果列表
  List<String> _searchResults = [];

  // 执行搜索逻辑（替换为你的实际接口调用）
  void _performSearch(String query) {
    setState(() {
      _searchResults = query.isEmpty 
          ? [] 
          : ['停车场A', '卫生间B', '展馆C']
              .where((item) => item.toLowerCase().contains(query.toLowerCase()))
              .toList();
    });
  }

  // 切换搜索模式
  void _toggleSearch() {
    setState(() {
      _isSearching = !_isSearching;
      if (!_isSearching) {
        _searchController.clear();
        _searchResults.clear();
      }
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: _isSearching
            ? TextField(
                controller: _searchController,
                autofocus: true,
                decoration: const InputDecoration(
                  hintText: '搜索地点...',
                  border: InputBorder.none,
                ),
                onChanged: _performSearch,
              )
            : const Text('地图页面'),
        actions: [
          IconButton(
            icon: Icon(_isSearching ? Icons.close : Icons.search),
            onPressed: _toggleSearch,
          ),
        ],
      ),
      body: Stack(
        children: [
          // 底层显示地图组件（此处用文本模拟）
          const Expanded(
            child: Center(
              child: Text('地图组件'),
            ),
          ),
          // 搜索模式下显示搜索结果列表
          if (_isSearching)
            Container(
              color: Theme.of(context).scaffoldBackgroundColor,
              child: ListView.builder(
                itemCount: _searchResults.length,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text(_searchResults[index]),
                    onTap: () {
                      // 点击搜索结果后的逻辑：比如定位到地图对应位置
                      _toggleSearch(); // 退出搜索模式
                    },
                  );
                },
              ),
            ),
          // 非搜索模式下显示筛选按钮
          if (!_isSearching)
            Positioned(
              bottom: 80, // 避开BottomNavigationBar的位置
              right: 16,
              child: Row(
                children: [
                  ElevatedButton(onPressed: () {}, child: const Text('Pavilony')),
                  const SizedBox(width: 8),
                  ElevatedButton(onPressed: () {}, child: const Text('WC')),
                ],
              ),
            ),
        ],
      ),
      // 始终保持可见的底部导航栏
      bottomNavigationBar: BottomNavigationBar(
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
          BottomNavigationBarItem(icon: Icon(Icons.settings), label: '设置'),
        ],
      ),
    );
  }
}

关键细节说明 #

• 状态切换：通过_isSearching布尔值，一键切换AppBar显示标题/搜索框、控制筛选按钮和搜索结果的显示状态。
• 布局层级：用Stack让地图始终处于底层，搜索结果和筛选按钮作为上层元素，避免页面结构跳转。
• 搜索交互：TextField的onChanged事件实时触发搜索逻辑，点击搜索结果后可直接退出搜索模式并回到地图界面。
• 底部导航栏：直接绑定到Scaffold的专属属性，不受搜索模式影响，全程保持可见。

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