Flutter搜索结果无法在原页面显示问题求助

问题背景 #

在Flutter项目中设置了搜索功能，希望执行搜索后在原页面直接展示结果，但现有实现存在问题：

• 初始代码里，performSearch返回的UI无法渲染到页面
• 使用SearchDelegate会跳转到新页面，不符合需求

用户初始代码：

class SearchResultPage extends StatefulWidget {
  SearchResultPage();

  @override
  State<SearchResultPage> createState() => _SearchResultPageState();
}

class _SearchResultPageState extends State<SearchResultPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: MyAppBar(),
      body: SafeArea(
        child: Column(
          children: [
            SearchBox(),
          ],
        ),
      ),
    );
  }
}

class SearchBox extends StatefulWidget {
  const SearchBox({Key? key}) : super(key: key);

  @override
  State<SearchBox> createState() => _SearchBoxState();
}

class _SearchBoxState extends State<SearchBox> {
  
  @override
  Widget build(BuildContext context) {
    return Container(
        margin: EdgeInsets.fromLTRB(10, 5, 10, 0),
        child: Row(
          children: [
            Expanded(
              child: TextField(
                textInputAction: TextInputAction.search,
                onSubmitted: (value) {
                  performSearch(context);
                },
              ),
            ),
          ],
        )
    );
  }

  SafeArea performSearch(BuildContext context) {
    return SafeArea(
      child: Column(
        children: [
          WordDetails(),
          const SizedBox(height: 5),
          DictionaryUsersList(),
          const SizedBox(height: 10),
          Expanded(
            child: SingleChildScrollView(
              child: WordMeaning(),
            ),
          ),
          const SizedBox(height: 10),
        ],
      ),
    );
  }
}

用户尝试的SearchDelegate实现：

// SearchBox中的onSubmitted修改为：
onSubmitted: (value) {
  showSearch(context: context, delegate: CustomSearchDelegate());
}

class CustomSearchDelegate extends SearchDelegate{
  @override
  List<Widget> buildActions(BuildContext context) {
    return [
      IconButton(
        icon: Icon(Icons.clear),
        onPressed: () {
          query = '';
        },
      ),
    ];
  }

  @override
  Widget buildLeading(BuildContext context) {
    return IconButton(
      icon: Icon(Icons.arrow_back),
      onPressed: () {
        close(context, null);
      },
    );
  }

  @override
  Widget buildResults(BuildContext context) {
    return SafeArea(
      child: Column(
        children: [
          WordDetails(),
          const SizedBox(height: 5),
          DictionaryUsersList(),
          const SizedBox(height: 10),
          Expanded(
            child: SingleChildScrollView(
              child: WordMeaning(),
            ),
          ),
          const SizedBox(height: 10),
        ],
      ),
    );
  }

  @override
  Widget buildSuggestions(BuildContext context) {
    return Container();
  }
}

解决方案：状态管理+条件渲染 #

核心是在页面状态中维护搜索状态，通过setState更新，再根据状态动态渲染搜索结果。

1. 重构页面状态类 #

在_SearchResultPageState中添加状态变量，统一管理搜索逻辑：

class _SearchResultPageState extends State<SearchResultPage> {
  String _searchQuery = '';
  bool _showSearchResults = false;

  // 执行搜索，更新状态
  void _handleSearch(String query) {
    setState(() {
      _searchQuery = query;
      _showSearchResults = true;
      // 这里可以添加实际的API请求，获取搜索结果后更新状态
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: MyAppBar(),
      body: SafeArea(
        child: Column(
          children: [
            // 传递搜索回调给SearchBox
            SearchBox(onSearchSubmitted: _handleSearch),
            // 条件渲染：只有搜索后才显示结果区域
            if (_showSearchResults)
              Expanded(
                child: SingleChildScrollView(
                  child: Column(
                    children: [
                      // 把搜索关键词传递给结果组件（如果需要）
                      WordDetails(query: _searchQuery),
                      const SizedBox(height: 5),
                      DictionaryUsersList(),
                      const SizedBox(height: 10),
                      WordMeaning(),
                      const SizedBox(height: 10),
                    ],
                  ),
                ),
              ),
          ],
        ),
      ),
    );
  }
}

2. 修改SearchBox组件 #

让SearchBox接收父组件的回调，将搜索关键词传递出去：

class SearchBox extends StatefulWidget {
  // 定义搜索提交的回调函数
  final Function(String) onSearchSubmitted;

  const SearchBox({
    Key? key,
    required this.onSearchSubmitted,
  }) : super(key: key);

  @override
  State<SearchBox> createState() => _SearchBoxState();
}

class _SearchBoxState extends State<SearchBox> {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.fromLTRB(10, 5, 10, 0),
      child: Row(
        children: [
          Expanded(
            child: TextField(
              textInputAction: TextInputAction.search,
              onSubmitted: widget.onSearchSubmitted, // 直接调用父组件的回调
              // 保留原有的样式设置
            ),
          ),
        ],
      ),
    );
  }
}

3. 适配结果组件（可选） #

如果WordDetails等组件需要根据搜索关键词展示对应内容，需要给它们添加参数接收_searchQuery，确保数据和UI关联。

为什么之前的方法失效？ #

• 初始代码中，performSearch只是返回了Widget，但没有将其插入到页面的Widget树中，自然无法显示
• SearchDelegate是Flutter官方提供的新页面搜索组件，设计初衷就是跳转页面，不符合原页面展示的需求

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