搜索应用栏工具
搜索应用栏工具为您的固定搜索栏提供了简单的组件。此工具为您提供可自定义的小部件。
入门
搜索应用栏工具包含四个可自定义的小部件。这些小部件
-SearchAppBar()
-DefaultBody()
-defaultBody
-normalSearchBody:
-defaultSearchBody:
SearchAppBar() 小部件
此小部件应位于 Scaffold 的 appBar 部分。
Scaffold(
appBar: SearchAppBar(
controller: controller,
callBack: (value) {},
),
正如您所见，您需要提供 TextFieldController 和 TextField onChange 方法。这足以让应用栏正常工作，但您可以自定义此小部件，例如…
SearchAppBar(
//customize features
suffixIconColor: Colors.red,
textFieldHeight: 36,
contentPadding: const EdgeInsets.all(8),
leadingIconBtnColor: Colors.blue,
prefixIconColor: Colors.green,
fillColor: Colors.purple,
hintText: 'Hello again!',
prefixIcon: Icons.not_started,
suffixIcon: Icons.not_started,
inputBorder: InputBorder.none,
hintTextStyle: const TextStyle(),
//required
controller: controller,
callBack: (value) => ,
)
DefaultBody() 小部件
此小部件应位于 Scaffold 的 body 部分。
Scaffold(
body: DefaultBody(
defaultBody: const Center(
child: Text('Default body'),
),
),
);
DefaultBody 小部件需要 defaultBody 小部件。此外，appBar 需要 body 来进行响应。您可以将所有类型的小部件添加到 defaultBody 部分。但请记住，defaultBody 是您的主应用程序主体。
normalSearchBody、defaultSearchBody 小部件特性
您不能添加这些小部件，但如果您添加它们，您可以更轻松地编写项目。让我们看看…
Scaffold(
body: DefaultBody(
defaultBody: const Center(
child: Text('Default body'),
),
),
defaultSearchBody: const Center(
child: Text('Default Search Body'),
),
normalSearchBody: const Center(
child: Text('Normal Search Body'),
),
);
首先，我说 defaultBody 特性是您应用中的主要主体。其他特性与 textField 的 onTap 和 onChange 方法相关。
如果用户点击 textField 部分，defaultSearchBody 将工作。此小部件类似于 defaultBody，仅通过按下激活。您可以在此处添加“建议”或“过去搜索”页面。
如果用户在 textField 中键入，normalSearchBody 将工作。此小部件类似于 defaultBody，仅通过更改 textField 而更改。您可以在此处添加“搜索结果”、“找到”或“未找到”页面。
结果
defaultBody 视图
defaultSearchBody 视图
normalSearchBody 视图
