Flutter怎么实现自定义搜索框AppBar

在移动应用开发中，搜索功能是一个非常重要的功能。无论是电商应用、社交应用还是新闻应用，搜索功能都能帮助用户快速找到他们需要的内容。在Flutter中，我们可以通过自定义AppBar来实现一个带有搜索框的AppBar。本文将详细介绍如何在Flutter中实现一个自定义搜索框AppBar，并探讨一些相关的进阶技巧。

1. 理解AppBar和SearchBar

在开始之前，我们需要先理解Flutter中的AppBar和SearchBar的基本概念。

1.1 AppBar

AppBar是Flutter中常用的一个组件，通常用于显示应用的标题、导航按钮、操作按钮等。AppBar通常位于屏幕的顶部，并且可以包含多个子组件，如Text、IconButton等。

1.2 SearchBar

SearchBar是一个用于输入搜索关键词的组件。在Flutter中，我们可以使用TextField来实现一个简单的搜索框。TextField允许用户输入文本，并且可以通过设置不同的属性来定制其外观和行为。

2. 实现一个简单的搜索框AppBar

接下来，我们将通过一个简单的例子来演示如何在Flutter中实现一个带有搜索框的AppBar。

2.1 创建Flutter项目

首先，我们需要创建一个新的Flutter项目。如果你已经有一个项目，可以跳过这一步。

flutter create custom_search_appbar
cd custom_search_appbar

2.2 修改main.dart文件

接下来，我们需要修改lib/main.dart文件，添加一个带有搜索框的AppBar。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Custom Search AppBar',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SearchAppBarDemo(),
    );
  }
}

class SearchAppBarDemo extends StatefulWidget {
  @override
  _SearchAppBarDemoState createState() => _SearchAppBarDemoState();
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: _isSearching
            ? TextField(
                controller: _searchController,
                decoration: InputDecoration(
                  hintText: 'Search...',
                  border: InputBorder.none,
                  hintStyle: TextStyle(color: Colors.white70),
                ),
                style: TextStyle(color: Colors.white),
                autofocus: true,
              )
            : Text('Custom Search AppBar'),
        actions: [
          IconButton(
            icon: Icon(_isSearching ? Icons.close : Icons.search),
            onPressed: () {
              setState(() {
                _isSearching = !_isSearching;
                if (!_isSearching) {
                  _searchController.clear();
                }
              });
            },
          ),
        ],
      ),
      body: Center(
        child: Text('Search results will appear here'),
      ),
    );
  }
}

2.3 代码解析

在这个例子中，我们创建了一个SearchAppBarDemo类，它继承自StatefulWidget。在_SearchAppBarDemoState类中，我们定义了一个TextEditingController用于控制搜索框的输入内容，以及一个_isSearching布尔变量用于控制是否显示搜索框。

在AppBar的title属性中，我们使用了一个条件语句来判断是否显示搜索框。如果_isSearching为true，则显示一个TextField作为搜索框；否则，显示一个普通的Text作为标题。

在AppBar的actions属性中，我们添加了一个IconButton，用于切换搜索框的显示状态。当用户点击这个按钮时，_isSearching的值会被切换，并且如果搜索框被关闭，搜索框中的内容会被清空。

2.4 运行项目

现在，我们可以运行这个项目，看看效果如何。

flutter run

运行后，你会看到一个带有搜索框的AppBar。点击右上角的搜索图标，搜索框会显示出来，再次点击则会关闭搜索框。

3. 进阶：实现搜索功能

在上面的例子中，我们只是实现了一个简单的搜索框AppBar，但并没有实现实际的搜索功能。接下来，我们将进一步完善这个例子，添加搜索功能。

3.1 添加搜索数据

首先，我们需要一些数据来进行搜索。我们可以创建一个简单的列表来模拟数据。

final List<String> _data = [
  'Apple',
  'Banana',
  'Orange',
  'Mango',
  'Pineapple',
  'Strawberry',
  'Blueberry',
  'Raspberry',
  'Watermelon',
  'Grape',
];

3.2 过滤数据

接下来，我们需要根据用户输入的关键词来过滤数据。我们可以使用List的where方法来实现这一点。

List<String> _searchResults = [];

void _search(String query) {
  setState(() {
    _searchResults = _data
        .where((item) => item.toLowerCase().contains(query.toLowerCase()))
        .toList();
  });
}

在这个方法中，我们遍历_data列表，并使用contains方法来判断每个元素是否包含用户输入的关键词。如果包含，则将该元素添加到_searchResults列表中。

3.3 显示搜索结果

接下来，我们需要在UI中显示搜索结果。我们可以使用ListView来显示搜索结果。

body: Column(
  children: [
    Expanded(
      child: ListView.builder(
        itemCount: _searchResults.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(_searchResults[index]),
          );
        },
      ),
    ),
  ],
),

在这个例子中，我们使用ListView.builder来动态生成搜索结果列表。itemCount属性指定了列表的长度，itemBuilder属性则用于生成每个列表项。

3.4 更新搜索逻辑

最后，我们需要在用户输入关键词时调用_search方法来更新搜索结果。我们可以在TextField的onChanged回调中调用_search方法。

TextField(
  controller: _searchController,
  decoration: InputDecoration(
    hintText: 'Search...',
    border: InputBorder.none,
    hintStyle: TextStyle(color: Colors.white70),
  ),
  style: TextStyle(color: Colors.white),
  autofocus: true,
  onChanged: _search,
),

3.5 完整代码

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Custom Search AppBar',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SearchAppBarDemo(),
    );
  }
}

class SearchAppBarDemo extends StatefulWidget {
  @override
  _SearchAppBarDemoState createState() => _SearchAppBarDemoState();
}

class _SearchAppBarDemoState extends State<SearchAppBarDemo> {
  final TextEditingController _searchController = TextEditingController();
  bool _isSearching = false;
  final List<String> _data = [
    'Apple',
    'Banana',
    'Orange',
    'Mango',
    'Pineapple',
    'Strawberry',
    'Blueberry',
    'Raspberry',
    'Watermelon',
    'Grape',
  ];
  List<String> _searchResults = [];

  void _search(String query) {
    setState(() {
      _searchResults = _data
          .where((item) => item.toLowerCase().contains(query.toLowerCase()))
          .toList();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: _isSearching
            ? TextField(
                controller: _searchController,
                decoration: InputDecoration(
                  hintText: 'Search...',
                  border: InputBorder.none,
                  hintStyle: TextStyle(color: Colors.white70),
                ),
                style: TextStyle(color: Colors.white),
                autofocus: true,
                onChanged: _search,
              )
            : Text('Custom Search AppBar'),
        actions: [
          IconButton(
            icon: Icon(_isSearching ? Icons.close : Icons.search),
            onPressed: () {
              setState(() {
                _isSearching = !_isSearching;
                if (!_isSearching) {
                  _searchController.clear();
                  _searchResults.clear();
                }
              });
            },
          ),
        ],
      ),
      body: Column(
        children: [
          Expanded(
            child: ListView.builder(
              itemCount: _searchResults.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(_searchResults[index]),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

3.6 运行项目

现在，我们可以运行这个项目，看看效果如何。

flutter run

运行后，你会看到一个带有搜索框的AppBar。当你在搜索框中输入关键词时，搜索结果会实时更新并显示在屏幕上。

4. 进一步优化

在上面的例子中，我们已经实现了一个基本的搜索功能。接下来，我们将进一步优化这个例子，使其更加完善。

4.1 添加搜索历史

我们可以添加一个搜索历史功能，记录用户最近搜索的关键词，并在用户点击搜索框时显示这些历史记录。

4.1.1 添加搜索历史列表

首先，我们需要一个列表来存储搜索历史。

final List<String> _searchHistory = [];

4.1.2 更新搜索逻辑

接下来，我们需要在用户搜索时更新搜索历史。

void _search(String query) {
  setState(() {
    _searchResults = _data
        .where((item) => item.toLowerCase().contains(query.toLowerCase()))
        .toList();
    if (query.isNotEmpty && !_searchHistory.contains(query)) {
      _searchHistory.add(query);
    }
  });
}

在这个方法中，我们在用户搜索时检查搜索历史中是否已经存在该关键词。如果不存在，则将其添加到搜索历史中。

4.1.3 显示搜索历史

接下来，我们需要在用户点击搜索框时显示搜索历史。我们可以使用一个ListView来显示搜索历史。

body: Column(
  children: [
    Expanded(
      child: _isSearching && _searchController.text.isEmpty
          ? ListView.builder(
              itemCount: _searchHistory.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(_searchHistory[index]),
                  onTap: () {
                    setState(() {
                      _searchController.text = _searchHistory[index];
                      _search(_searchHistory[index]);
                    });
                  },
                );
              },
            )
          : ListView.builder(
              itemCount: _searchResults.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(_searchResults[index]),
                );
              },
            ),
    ),
  ],
),

在这个例子中，我们使用了一个条件语句来判断是否显示搜索历史。如果_isSearching为true且搜索框为空，则显示搜索历史；否则，显示搜索结果。

4.1.4 完整代码

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Custom Search AppBar',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SearchAppBarDemo(),
    );
  }
}

class SearchAppBarDemo extends StatefulWidget {
  @override
  _SearchAppBarDemoState createState() => _SearchAppBarDemoState();
}

class _SearchAppBarDemoState extends State<SearchAppBarDemo> {
  final TextEditingController _searchController = TextEditingController();
  bool _isSearching = false;
  final List<String> _data = [
    'Apple',
    'Banana',
    'Orange',
    'Mango',
    'Pineapple',
    'Strawberry',
    'Blueberry',
    'Raspberry',
    'Watermelon',
    'Grape',
  ];
  List<String> _searchResults = [];
  final List<String> _searchHistory = [];

  void _search(String query) {
    setState(() {
      _searchResults = _data
          .where((item) => item.toLowerCase().contains(query.toLowerCase()))
          .toList();
      if (query.isNotEmpty && !_searchHistory.contains(query)) {
        _searchHistory.add(query);
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: _isSearching
            ? TextField(
                controller: _searchController,
                decoration: InputDecoration(
                  hintText: 'Search...',
                  border: InputBorder.none,
                  hintStyle: TextStyle(color: Colors.white70),
                ),
                style: TextStyle(color: Colors.white),
                autofocus: true,
                onChanged: _search,
              )
            : Text('Custom Search AppBar'),
        actions: [
          IconButton(
            icon: Icon(_isSearching ? Icons.close : Icons.search),
            onPressed: () {
              setState(() {
                _isSearching = !_isSearching;
                if (!_isSearching) {
                  _searchController.clear();
                  _searchResults.clear();
                }
              });
            },
          ),
        ],
      ),
      body: Column(
        children: [
          Expanded(
            child: _isSearching && _searchController.text.isEmpty
                ? ListView.builder(
                    itemCount: _searchHistory.length,
                    itemBuilder: (context, index) {
                      return ListTile(
                        title: Text(_searchHistory[index]),
                        onTap: () {
                          setState(() {
                            _searchController.text = _searchHistory[index];
                            _search(_searchHistory[index]);
                          });
                        },
                      );
                    },
                  )
                : ListView.builder(
                    itemCount: _searchResults.length,
                    itemBuilder: (context, index) {
                      return ListTile(
                        title: Text(_searchResults[index]),
                      );
                    },
                  ),
          ),
        ],
      ),
    );
  }
}

4.2 添加清除搜索历史功能

我们可以添加一个清除搜索历史的功能，允许用户清除所有的搜索历史。

4.2.1 添加清除按钮

首先，我们需要在搜索历史列表的顶部添加一个清除按钮。

ListView.builder(
  itemCount: _searchHistory.length + 1,
  itemBuilder: (context, index) {
    if (index == 0) {
      return ListTile(
        title: Text('Clear History'),
        onTap: () {
          setState(() {
            _searchHistory.clear();
          });
        },
      );
    }
    return ListTile(
      title: Text(_searchHistory[index - 1]),
      onTap: () {
        setState(() {
          _searchController.text = _searchHistory[index - 1];
          _search(_searchHistory[index - 1]);
        });
      },
    );
  },
),

在这个例子中，我们在搜索历史列表的顶部添加了一个ListTile，用于清除搜索历史。当用户点击这个ListTile时，_searchHistory列表会被清空。

4.2.2 完整代码

”`dart import ‘package:flutter/material.dart’;

void main() { runApp(MyApp()); }

class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: ‘Custom Search AppBar’, theme: ThemeData( primarySwatch: Colors.blue, ), home: SearchAppBarDemo(), ); } }

class SearchAppBarDemo extends StatefulWidget { @override _SearchAppBarDemoState createState() => _SearchAppBarDemoState(); }

class _SearchAppBarDemoState extends State { final TextEditingController _searchController = TextEditingController(); bool _isSearching = false; final List _data = [ ‘Apple’, ‘Banana’, ‘Orange’, ‘Mango’, ‘Pineapple’, ‘Strawberry’, ‘Blueberry’, ‘Raspberry’, ‘Watermelon’, ‘Grape’, ]; List _searchResults = []; final List _searchHistory = [];

void _search(String query) { setState(() { _searchResults = _data .where((item) => item.toLowerCase().contains(query.toLowerCase())) .toList(); if (query.isNotEmpty && !_searchHistory.contains(query)) { _searchHistory.add(query); } }); }

@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: _isSearching ? TextField( controller: _searchController, decoration: InputDecoration( hintText: ‘Search…’, border: InputBorder.none, hintStyle: TextStyle(color: Colors.white70), ), style: TextStyle(color: Colors.white), autofocus: true, onChanged: _search, ) : Text(‘Custom Search AppBar’), actions: [ IconButton( icon: Icon(_isSearching ? Icons.close : Icons.search), onPressed: () { setState(() { _isSearching = !_isSearching; if (!_isSearching) { _searchController.clear(); _searchResults.clear(); } }); }, ), ], ), body: Column( children: [ Expanded( child: _isSearching && _searchController.text.isEmpty ? ListView.builder( itemCount: _searchHistory.length + 1, itemBuilder: (context, index) { if (index == 0) { return ListTile( title: Text(‘Clear History’), onTap: () { setState(() { _searchHistory.clear(); }); }, ); } return ListTile( title: Text(_searchHistory[index - 1]), onTap: () { setState(() { _search