Flutter自定义标题栏插件cbytitlebar的使用

概述

cbytitlebar 是一个用于在 Flutter 应用中实现自定义标题栏的插件。通过该插件，开发者可以轻松地为应用添加个性化的标题栏功能。

使用步骤

1. 添加依赖

在项目的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  cbytitlebar: ^版本号

然后运行以下命令以安装依赖：

flutter pub get

2. 初始化插件

在应用启动时初始化 cbytitlebar 插件。通常可以在 main.dart 文件中完成初始化。

示例代码

import 'package:flutter/material.dart';
import 'package:cbytitlebar/cbytitlebar.dart'; // 引入插件

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

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _platformVersion = 'Unknown'; // 存储平台版本信息
  final _titleBarPlugin = CbyTitleBar(); // 初始化插件实例

  [@override](/user/override)
  void initState() {
    super.initState();
    initPlatformState(); // 初始化平台状态
  }

  // 获取平台版本信息
  Future<void> initPlatformState() async {
    String platformVersion;
    try {
      platformVersion = await _titleBarPlugin.getPlatformVersion() ?? 'Unknown platform version';
    } on PlatformException {
      platformVersion = 'Failed to get platform version.';
    }

    if (!mounted) return;

    setState(() {
      _platformVersion = platformVersion;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('自定义标题栏示例'), // 设置默认标题
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
            // 显示平台版本信息
            Text('运行于平台版本: $_platformVersion\n'),
            ],
          ),
        ),
      ),
    );
  }
}

3. 自定义标题栏

通过 CbyTitleBar 插件，您可以自定义标题栏的样式和行为。例如，添加按钮、设置背景颜色等。

示例代码

// 自定义标题栏内容
Widget customTitleBar() {
  return Container(
    color: Colors.blue, // 设置背景颜色
    padding: EdgeInsets.all(10),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        IconButton(
          icon: Icon(Icons.menu), // 左侧菜单图标
          onPressed: () {
            print('菜单按钮点击');
          },
        ),
        Text(
          '自定义标题', // 标题文本
          style: TextStyle(color: Colors.white, fontSize: 18),
        ),
        IconButton(
          icon: Icon(Icons.search), // 右侧搜索图标
          onPressed: () {
            print('搜索按钮点击');
          },
        ),
      ],
    ),
  );
}

[@override](/user/override)
Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('默认标题栏'), // 默认标题栏
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('运行于平台版本: $_platformVersion\n'),
            ElevatedButton(
              onPressed: () {
                // 替换为自定义标题栏
                Navigator.of(context).push(MaterialPageRoute(
                  builder: (context) => Scaffold(
                    appBar: AppBar(
                      title: customTitleBar(), // 使用自定义标题栏
                    ),
                    body: Center(child: Text('自定义标题栏页面')),
                  ),
                ));
              },
              child: Text('打开自定义标题栏页面'),
            ),
          ],
        ),
      ),
    ),
  );
}