Flutter搜索栏插件search_appbar_tool的使用

Search Appbar Tool 提供了一些易于使用的组件，用于固定搜索栏。此工具提供了可自定义的小部件。

开始使用

Search Appbar Tool 提供了四个可自定义的小部件：

• SearchAppBar()
• DefaultBody()
  • defaultBody
  • normalSearchBody
  • defaultSearchBody

SearchAppBar() 小部件

该小部件应该在 Scaffold 的 appBar 部分使用。

Scaffold(
  appBar: SearchAppBar(
    controller: controller,
    callBack: (value) {},
  ),
);

如上所示，你需要提供一个 TextField 控制器和 TextField 的 onChange 方法。这是让 AppBar 运行所需的全部内容，但你也可以自定义这个小部件。例如：

SearchAppBar(
  // 自定义功能
  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(),

  // 必需参数
  controller: controller,
  callBack: (value) {},
)

DefaultBody() 小部件

该小部件应该在 Scaffold 的 body 部分使用。

Scaffold(
  body: DefaultBody(
    defaultBody: const Center(
      child: Text('默认主体'),
    ),
  ),
);

DefaultBody 小部件需要一个默认主体。同时，AppBar 需要与主体进行交互。你可以在 defaultBody 部分添加任何类型的组件，但请记住，默认主体是你应用程序的主要部分。

normalSearchBody 和 defaultSearchBody 小部件的功能

虽然你不能直接添加这些小部件，但如果添加它们，可以让你的项目更容易编写。让我们看看如何使用它们：

Scaffold(
  body: DefaultBody(
    defaultBody: const Center(
      child: Text('默认主体'),
    ),
    defaultSearchBody: const Center(
      child: Text('默认搜索主体'),
    ),
    normalSearchBody: const Center(
      child: Text('正常搜索主体'),
    ),
  ),
);

首先，我说过默认主体是你应用的主要部分。其他功能与 textField 的 onTap 和 onChange 方法有关。

如果用户点击 textField 部分，defaultSearchBody 将工作。这个小部件类似于默认主体，只有在按下时才会激活。你可以在这里添加“建议”或“过去的搜索”页面。

如果用户在 textField 中输入，normalSearchBody 将工作。这个小部件类似于默认主体，只有在改变 textField 时才会变化。你可以在“搜索结果”、“找到的结果”或“未找到的结果”页面中添加内容。

结果

默认主体视图

默认搜索主体视图

正常搜索主体视图

完整示例代码

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final controller = TextEditingController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        appBarTheme: const AppBarTheme(),
      ),
      home: Scaffold(
        appBar: SearchAppBar(
          fillColor: Colors.green,
          prefixIconColor: Colors.black,
          suffixIconColor: Colors.black,
          leadingIconBtnColor: Colors.black,
          inputBorder: const OutlineInputBorder(
            borderRadius: BorderRadius.all(Radius.circular(20)),
          ),
          controller: controller,
          callBack: (value) {},
        ),
        body: DefaultBody(
          defaultSearchBody: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: const [
                Text(
                  '最近',
                  style: TextStyle(fontSize: 30, color: Colors.black),
                ),
                Divider(),
                Text(
                  '建议',
                  style: TextStyle(fontSize: 30, color: Colors.black),
                ),
              ],
            ),
          ),
          normalSearchBody: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: const [
                Text(
                  '搜索结果',
                  style: TextStyle(fontSize: 30, color: Colors.black),
                ),
                Divider(),
                Text(
                  '找到结果',
                  style: TextStyle(fontSize: 30, color: Colors.black),
                ),
                Divider(),
                Text(
                  '未找到结果',
                  style: TextStyle(fontSize: 30, color: Colors.black),
                ),
              ],
            ),
          ),
          defaultBody: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: const [
                Text(
                  '主页面',
                  style: TextStyle(fontSize: 30, color: Colors.black),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}