Flutter如何将搜索结果列表展示在搜索栏下方？

要把搜索逻辑和UI展示打通，只需对HomePage的状态和布局做几点修改，具体步骤如下：

1. 添加状态变量存储搜索结果 #

在_HomePageState类中新增变量，用来保存搜索返回的位置数据：

List<LocationEntity> _searchResults = [];

2. 修改搜索回调更新状态 #

在TextField的onChanged方法中，获取到搜索结果后调用setState更新状态，触发UI重建：

onChanged: (text) async {
  if (text.isEmpty || text.length < 3) {
    // 输入过短或清空时清空搜索结果
    setState(() {
      _searchResults = [];
    });
    return;
  }
  LatLng pos = await _locationService.currentLocation;
  var locations = await _locationSearch.searchNearCurrentPosition(text, pos);
  // 更新搜索结果状态
  setState(() {
    _searchResults = locations;
  });
},

3. 在搜索栏下方添加结果列表组件 #

在包含搜索栏的Card组件之后，添加你的HomePageNotesListView（你提到组件名为HomePageSearchListView，注意代码中类名是否需要统一），并根据搜索结果长度决定是否显示：

Card(
  // 原搜索栏代码...
),
// 搜索结果列表：仅当有结果时显示
if (_searchResults.isNotEmpty)
  HomePageNotesListView(
    locations: _searchResults,
    onTap: (location) {
      // 处理列表项点击事件，比如更新地图标记
      setState(() {
        markerPoint = location.point;
      });
      // 可选：点击后清空搜索结果，收起列表
      setState(() {
        _searchResults = [];
      });
    },
  ),

修改后的完整HomePage代码 #

import 'package:flutter/material.dart';
import 'dart:developer' as devtools show log;
// 导入LocationEntity相关依赖
import 'package:geoalarm/services/location_search/location_entities.dart';
...

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  // 初始标记位置
  LatLng markerPoint = LatLng(12.9716, 77.5946);
  final LocationService _locationService = getIt<LocationService>();
  // 新增：存储搜索结果的状态变量
  List<LocationEntity> _searchResults = [];
  ...

  LatLng get currentMarkerPoint => markerPoint;

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        FlutterMap(
          ...
        ),
        SafeArea(
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 16.0),
            child: Column(
              // 原spaceBetween会挤走列表空间，改为start让内容从上到下排列
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                // 搜索栏卡片
                Card(
                  child: TextField(
                    decoration: const InputDecoration(
                      prefixIcon: Icon(Icons.location_on_outlined),
                      hintText: "搜索地点",
                      contentPadding: EdgeInsets.all(16.0),
                    ),
                    onChanged: (text) async {
                      if (text.isEmpty || text.length < 3) {
                        setState(() {
                          _searchResults = [];
                        });
                        return;
                      }
                      LatLng pos = await _locationService.currentLocation;
                      var locations = await _locationSearch.searchNearCurrentPosition(text, pos);
                      setState(() {
                        _searchResults = locations;
                      });
                    },
                  ),
                ),
                // 搜索结果列表
                if (_searchResults.isNotEmpty)
                  HomePageNotesListView(
                    locations: _searchResults,
                    onTap: (location) {
                      // 示例：点击后更新地图标记位置
                      setState(() {
                        markerPoint = location.point;
                      });
                      // 可选：点击后清空搜索结果隐藏列表
                      setState(() {
                        _searchResults = [];
                      });
                    },
                  ),
              ],
            ),
          ),
        ),
      ],
    );
  }
}

关键说明 #

• 原Column的mainAxisAlignment设为spaceBetween会导致列表被挤到屏幕底部，改为MainAxisAlignment.start才能让搜索栏和列表从上到下正常排列。
• 输入内容过短或清空时清空搜索结果，避免显示无效内容。
• 列表项的onTap逻辑可根据需求自定义，比如跳转到详情页、更新地图视角等。

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