Flutter因其为各种程序提供的灵活性而闻名，从电子商务到教育到银行应用程序，以及更多。所有这些都是通过使用小部件来实现的，这些小部件作为复杂应用程序的简单构建块。你可以将每个应用程序分解成各种组件，其中一些组件对所有应用程序都是通用的，而另一些则是特定的。
这篇文章是基于在各种应用程序中使用的一个更通用的组件：搜索栏。搜索栏用于查询数据库中的某项数据。
在这篇文章中，我们将从头开始建立一个搜索栏，使用Flutter的container widget和盒子装饰所提供的各种属性。
包含搜索栏的应用程序将是一个原始的日记应用程序。它将由一个textField 类组成，在点击 "搜索 "图标时出现，并在样本应用程序中 "取消 "时消失。
在我们开始之前，请注意本文假设你已经设置了Flutter开发环境，并且熟悉Flutter部件和开发的基本知识。
设置一个Flutter示例应用程序
第一步是使用Flutter创建命令创建一个新项目。
flutter create search_bar
接下来，我们需要清除main.dart 文件中的内容，并创建一个新的MaterialApp 。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Material App',
home: HomeScreen(),
);
}
}
我们在这个应用中使用Material Design，以使其更容易设置；我们的主要重点将是创建搜索栏，而不是设计应用本身。
现在让我们创建一个新的有状态的小部件，命名为HomeScreen ，并将其传递给MaterialApp 的主页属性。
class HomeScreen extends StatefulWidget {
const HomeScreen({Key? key}) : super(key: key);
@override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('My Personal Journal'),
automaticallyImplyLeading: false,
centerTitle: true,
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Center(
child: Text('Hi'),
),
],
),
);
}
}
你会注意到我在上面的代码中给这个应用程序添加了一些细节，包括一个appBar 和一个title 。再一次，这些都是不太重要的添加物，我们可以忽略，而专注于创建搜索栏，但如果你在本教程中练习你的应用程序构建技能，可能会派上用场。
创建一个搜索按钮
下一步是创建搜索按钮。AppBar 为我们提供了一个名为actions 的属性，我们可以用这个集合来列出各种活动。
appBar: AppBar(
title: const Text('My Personal Journal'),
automaticallyImplyLeading: false,
actions: [
IconButton(
onPressed: () {},
icon: const Icon(Icons.search),
)
],
centerTitle: true,
),
因为我们正在制作一个按钮，当它被点击时显示一些东西（搜索栏），我们将使用IconButton 小部件。这个部件在被按下时将产生一个小动画，表明用户的选择被应用注册了。我们向icon 参数传递名称；你可以在下面的图片中看到，我选择了放大镜的图标来代表 "搜索"。
下面的图片描述了我们的应用程序的当前状态。
我们需要实现onPressed 功能，以触发状态重建，显示文本字段。我们还必须使当前的放大镜搜索图标在显示文本字段后变成一个 "取消 "图标。取消按钮将被用来取消搜索操作，正如其名称所暗示的那样。
下一步是在HomeScreen widget里面创建两个变量：第一个是一个图标，第二个是一个widget。它们将保存默认的搜索按钮以及AppBar 的标题。
我们将把它们传递到变量中，然后把变量传递到任何需要它们的地方，而不是像之前那样硬编码。
@override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
Icon customIcon = const Icon(Icons.search);
Widget customSearchBar = const Text('My Personal Journal');
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: customSearchBar,
automaticallyImplyLeading: false,
actions: [
IconButton(
onPressed: () {},
icon: customIcon,
)
],
centerTitle: true,
),
管理状态
因为我们想在搜索按钮被按下时显示应用栏中的文本字段，所以我们必须更新应用的状态。在这篇文章中，我们将使用setState({}) 函数来更新状态。
在IconButton 的onPressed 函数中，我们调用setState 函数来更新我们先前声明的变量的状态（即customIcon 变量和customSearchBar 变量）。
然后，我们运行一个if-else条件来检查当前的图标并做出正确的决定。
onPressed: () {
setState(() {
if (customIcon.icon == Icons.search) {
// Perform set of instructions.
} else {
customIcon = const Icon(Icons.search);
customSearchBar = const Text('My Personal Journal');
}
});
},
目前，它检查customIcon 是否是一个searchIcon ，然后根据结果执行一些指令。如果它不是一个搜索图标，它就会将变量更新为它们的defaults/original 值。
if (customIcon.icon == Icons.search) {
customIcon = const Icon(Icons.cancel);
customSearchBar = const ListTile(
leading: Icon(
Icons.search,
color: Colors.white,
size: 28,
),
title: TextField(
decoration: InputDecoration(
hintText: 'type in journal name...',
hintStyle: TextStyle(
color: Colors.white,
fontSize: 18,
fontStyle: FontStyle.italic,
),
border: InputBorder.none,
),
style: TextStyle(
color: Colors.white,
),
),
);
}
在if-else逻辑块里面，我们传入我们想要调用的新的状态值：customIcon 被分配到取消图标(Icon.cancel)，而customSearchBar 被分配到包含TextField 的ListTile 。
在上面的代码中，搜索图标被传递给应用程序的主导参数，而TextField 被赋予了title widget。hintText 和样式通过InputDecoration widget进行调整，而InputBorder 则通过InputBorder.none 属性进行删除。
最后，我们的搜索栏已经完全实现了!
总结
不管是什么类型的应用程序，有些组件是Flutter应用程序所共有的，其中之一就是搜索栏。为某一特定信息查询数据库是大量移动应用程序需要的工具。通过本文的学习，你现在可以在你的Flutter应用程序中建立和定制搜索栏。
The postHow to create a search bar in Flutterappeared first onLogRocket Blog.
