Flutter中如何使用searchbar组件

在Flutter中如何实现一个SearchBar组件？我想在应用中添加搜索功能，但不太清楚具体步骤。能否提供详细的代码示例，包括如何监听用户输入、触发搜索以及显示搜索结果？另外，SearchBar的样式该如何自定义，比如修改颜色、圆角等？最好能支持类似自动补全的功能。谢谢！

2 回复

在Flutter中实现搜索栏，主要有以下几种方式：

  1. 使用AppBar的actions属性（最常用）：
AppBar(
  title: Text('搜索示例'),
  actions: [
    IconButton(
      icon: Icon(Icons.search),
      onPressed: () {
        showSearch(
          context: context,
          delegate: CustomSearchDelegate(),
        );
      },
    ),
  ],
)
  1. 自定义SearchDelegate：
class CustomSearchDelegate extends SearchDelegate {
  @override
  List<Widget> buildActions(BuildContext context) {
    return [
      IconButton(
        icon: Icon(Icons.clear),
        onPressed: () => query = '',
      )
    ];
  }
  
  @override
  Widget buildResults(BuildContext context) {
    // 返回搜索结果
    return Center(child: Text(query));
  }
}
  1. 使用第三方包：
  • flutter_search_bar
  • search_widget
  1. 自定义TextField： 最简单的做法是直接使用TextField配合装饰：
TextField(
  decoration: InputDecoration(
    hintText: '搜索...',
    prefixIcon: Icon(Icons.search),
    border: OutlineInputBorder(),
  ),
)

推荐使用第一种方式，体验最接近原生，功能也最完整。

更多关于Flutter中如何使用searchbar组件的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 中，可以通过多种方式实现搜索栏功能。常见的方法是使用 AppBar 的 actions 属性或自定义 TextField。以下是两种简单实现：

1. 使用 AppBar 的 actions 属性

在 AppBar 中添加搜索图标，点击后展开搜索栏：

import 'package:flutter/material.dart';

class SearchBarExample extends StatefulWidget {
  @override
  _SearchBarExampleState createState() => _SearchBarExampleState();
}

class _SearchBarExampleState extends State<SearchBarExample> {
  bool _isSearching = false;
  final TextEditingController _searchController = TextEditingController();

  void _startSearch() {
    setState(() {
      _isSearching = true;
    });
  }

  void _stopSearch() {
    setState(() {
      _isSearching = false;
      _searchController.clear();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: _isSearching
            ? TextField(
                controller: _searchController,
                autofocus: true,
                decoration: InputDecoration(
                  hintText: '搜索...',
                  border: InputBorder.none,
                  hintStyle: TextStyle(color: Colors.white70),
                ),
                style: TextStyle(color: Colors.white),
                onChanged: (value) {
                  // 处理搜索逻辑
                  print('搜索内容: $value');
                },
              )
            : Text('搜索栏示例'),
        actions: [
          _isSearching
              ? IconButton(
                  icon: Icon(Icons.close),
                  onPressed: _stopSearch,
                )
              : IconButton(
                  icon: Icon(Icons.search),
                  onPressed: _startSearch,
                ),
        ],
      ),
      body: Container(),
    );
  }
}

2. 使用第三方包

安装 flutter_search_bar 包（需在 pubspec.yaml 中添加依赖）：

dependencies:
  flutter_search_bar: ^2.0.0

示例代码：

import 'package:flutter/material.dart';
import 'package:flutter_search_bar/flutter_search_bar.dart';

class ThirdPartySearchExample extends StatefulWidget {
  @override
  _ThirdPartySearchExampleState createState() => _ThirdPartySearchExampleState();
}

class _ThirdPartySearchExampleState extends State<ThirdPartySearchExample> {
  SearchBar searchBar;

  @override
  void initState() {
    super.initState();
    searchBar = SearchBar(
      inBar: false,
      setState: setState,
      onSubmitted: (value) {
        print('搜索: $value');
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('第三方搜索栏'),
        actions: [searchBar.getSearchAction(context)],
      ),
      body: Container(),
    );
  }
}

注意事项：

  • 第一种方法灵活且无需额外依赖，适合简单需求。
  • 第三方包可能提供更多功能（如搜索历史），但需注意包维护状态。
  • 可根据需求添加搜索逻辑，如过滤列表数据。

以上代码可直接复制使用，根据实际需求调整样式和功能。

回到顶部