dghub_appbar 是一个用于 Flutter 的自定义 AppBar 插件，允许开发者快速创建和定制化的 AppBar。使用这个插件，你可以轻松地添加各种功能，如标题、图标、按钮、搜索栏等，并且可以根据需要进行样式定制。

以下是如何在 Flutter 项目中使用 dghub_appbar 的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 dghub_appbar 依赖：

dependencies:
  flutter:
    sdk: flutter
  dghub_appbar: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装依赖。

2. 导入包

在你的 Dart 文件中导入 dghub_appbar：

import 'package:dghub_appbar/dghub_appbar.dart';

3. 使用 DghubAppBar

你可以在 Scaffold 的 appBar 属性中使用 DghubAppBar。以下是一个简单的示例：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'DghubAppBar Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: DghubAppBar(
        title: Text('My Custom AppBar'),
        actions: [
          IconButton(
            icon: Icon(Icons.search),
            onPressed: () {
              // 搜索按钮点击事件
            },
          ),
          IconButton(
            icon: Icon(Icons.more_vert),
            onPressed: () {
              // 更多选项按钮点击事件
            },
          ),
        ],
        leading: IconButton(
          icon: Icon(Icons.menu),
          onPressed: () {
            // 菜单按钮点击事件
          },
        ),
        backgroundColor: Colors.blue,
        elevation: 4.0,
      ),
      body: Center(
        child: Text('Hello, DghubAppBar!'),
      ),
    );
  }
}

4. 自定义 DghubAppBar

DghubAppBar 提供了多种自定义选项，以下是一些常用的属性：

• title: AppBar 的标题，通常是一个 Text 组件。
• actions: 右侧的操作按钮列表，通常是一个或多个 IconButton。
• leading: 左侧的按钮，通常是一个 IconButton 或者后退按钮。
• backgroundColor: AppBar 的背景颜色。
• elevation: AppBar 的阴影效果。
• centerTitle: 是否将标题居中显示。
• flexibleSpace: AppBar 的灵活空间，通常用于放置 FlexibleSpaceBar。
• bottom: AppBar 的底部区域，通常是一个 TabBar 或 PreferredSize 组件。

5. 进一步定制

你可以通过使用 DghubAppBar 提供的更多属性和方法来进一步定制 AppBar 的外观和行为。例如，你可以添加搜索栏、切换主题、动态改变标题等。

6. 示例代码

以下是一个更复杂的示例，展示了如何使用 DghubAppBar 的更多特性：

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: DghubAppBar(
        title: Text('My Custom AppBar'),
        actions: [
          IconButton(
            icon: Icon(Icons.search),
            onPressed: () {
              // 搜索按钮点击事件
            },
          ),
          PopupMenuButton<String>(
            onSelected: (String result) {
              // 弹出菜单项选择事件
            },
            itemBuilder: (BuildContext context) => <PopupMenuEntry<String>>[
              const PopupMenuItem<String>(
                value: 'Settings',
                child: Text('Settings'),
              ),
              const PopupMenuItem<String>(
                value: 'Help',
                child: Text('Help'),
              ),
            ],
          ),
        ],
        leading: IconButton(
          icon: Icon(Icons.menu),
          onPressed: () {
            // 菜单按钮点击事件
          },
        ),
        backgroundColor: Colors.blue,
        elevation: 4.0,
        centerTitle: true,
        flexibleSpace: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              colors: [Colors.blue, Colors.lightBlueAccent],
            ),
          ),
        ),
      ),
      body: Center(
        child: Text('Hello, DghubAppBar!'),
      ),
    );
  }
}