Flutter音乐APP如何实现搜索结果的条件化Widget展示？

你的核心问题是误解了onChanged回调的作用——它是用来响应输入框文本变化的逻辑处理函数，不是用来返回并渲染Widget的。你在里面创建Container只是生成了一个对象，根本没有把它加入到Widget树中，所以自然不会显示。

完全可以实现这种"仅在搜索时展示结果"的条件化UI，核心是遵循Flutter的声明式UI模型，用状态管理来控制Widget的显示/隐藏。下面是具体的实现方案：

正确实现思路 #

1. 用StatefulWidget维护关键状态：
   • 搜索输入文本
   • 当前选中的分类（艺术家/专辑/曲目）
   • 搜索结果数据
   • 加载状态（处理API请求中的等待状态）
2. 在输入框onChanged中更新搜索文本状态，并触发API搜索（建议加防抖避免频繁请求）
3. 在build方法中根据状态条件渲染搜索结果：仅当有搜索词+选中分类+有结果时，展示结果列表

完整代码示例 #

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

  @override
  State<MusicSearchScreen> createState() => _MusicSearchScreenState();
}

class _MusicSearchScreenState extends State<MusicSearchScreen> {
  final TextEditingController _searchController = TextEditingController();
  String? _selectedCategory;
  List<dynamic> _searchResults = [];
  bool _isLoading = false;
  late JioSaavn jiosaavn; // 你的API实例

  @override
  void initState() {
    super.initState();
    jiosaavn = JioSaavn(); // 初始化API客户端
  }

  // 封装搜索逻辑
  Future<void> _performSearch(String query) async {
    if (query.isEmpty || _selectedCategory == null) {
      setState(() {
        _searchResults = [];
        _isLoading = false;
      });
      return;
    }

    setState(() => _isLoading = true);

    try {
      final accessToken = await jiosaavn.getaccesstoken();
      List<dynamic> results;

      // 根据分类调用对应API
      switch (_selectedCategory) {
        case "Artists":
          results = await jiosaavn.searchArtists(query, accessToken);
          break;
        case "Albums":
          results = await jiosaavn.searchAlbums(query, accessToken);
          break;
        case "Tracks":
          results = await jiosaavn.searchTracks(query, accessToken);
          break;
        default:
          results = [];
      }

      // 只保留前5条结果
      setState(() => _searchResults = results.take(5).toList());
    } catch (e) {
      debugPrint("搜索失败: $e");
      setState(() => _searchResults = []);
    } finally {
      setState(() => _isLoading = false);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("音乐搜索"),
        // 分类选择下拉框
        actions: [
          DropdownButton<String>(
            value: _selectedCategory,
            items: const [
              DropdownMenuItem(value: "Artists", child: Text("艺术家")),
              DropdownMenuItem(value: "Albums", child: Text("专辑")),
              DropdownMenuItem(value: "Tracks", child: Text("曲目")),
            ],
            onChanged: (value) {
              setState(() => _selectedCategory = value);
              // 切换分类后自动重新搜索（如果已有输入）
              if (_searchController.text.isNotEmpty) {
                _performSearch(_searchController.text);
              }
            },
          ),
        ],
      ),
      body: Column(
        children: [
          // 搜索输入框
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: TextField(
              controller: _searchController,
              onChanged: (value) {
                // 防抖：延迟300ms再发起搜索，避免频繁请求
                Future.delayed(const Duration(milliseconds: 300), () {
                  if (_searchController.text == value) {
                    _performSearch(value);
                  }
                });
              },
              decoration: const InputDecoration(
                hintText: "输入关键词搜索",
                border: OutlineInputBorder(),
              ),
            ),
          ),
          // 条件化展示搜索结果
          if (_searchController.text.isNotEmpty && _selectedCategory != null)
            Expanded(
              child: _isLoading
                  ? const Center(child: CircularProgressIndicator())
                  : _searchResults.isEmpty
                      ? const Center(child: Text("没有找到相关内容"))
                      : ListView.builder(
                          itemCount: _searchResults.length,
                          itemBuilder: (context, index) {
                            final result = _searchResults[index];
                            // 根据分类渲染不同列表项
                            switch (_selectedCategory) {
                              case "Artists":
                                return ListTile(
                                  leading: Image.network(result.avatar),
                                  title: Text(result.name),
                                  subtitle: Text("粉丝数: ${result.fans}"),
                                );
                              case "Albums":
                                return ListTile(
                                  leading: Image.network(result.cover),
                                  title: Text(result.title),
                                  subtitle: Text(result.artist),
                                );
                              case "Tracks":
                                return ListTile(
                                  leading: Image.network(result.cover),
                                  title: Text(result.songName),
                                  subtitle: Text(result.artist),
                                  trailing: IconButton(
                                    icon: const Icon(Icons.play_arrow),
                                    onPressed: () { /* 播放逻辑 */ },
                                  ),
                                );
                              default:
                                return const SizedBox();
                            }
                          },
                        ),
            ),
        ],
      ),
    );
  }
}

关键要点说明 #

• 状态驱动UI：所有动态变化的内容（搜索词、分类、结果、加载状态）都存在State中，通过setState更新状态后，Flutter会自动重建对应的Widget。
• onChanged的正确用法：仅用来触发状态更新和搜索请求，不要在里面创建Widget。
• 防抖处理：避免用户每输入一个字符就发起一次API请求，提升性能和体验。
• 条件渲染：在build方法中用if判断状态，决定是否渲染结果列表，这是Flutter实现条件化UI的标准方式。

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