Flutter标题栏按钮管理插件titlebar_buttons的使用

发布于 1周前 作者 sinazl 来自 Flutter

Flutter标题栏按钮管理插件 titlebar_buttons 的使用

titlebar_buttons 是一个提供 Windows、Linux 和 macOS 平台上原生风格标题栏按钮的 Flutter 插件。通过这个插件，你可以轻松地在应用中添加最小化、最大化和关闭按钮，并且支持多种主题样式。

特性

  • 简单易用
  • 提供与操作系统相匹配的关闭、最小化和最大化按钮样式

使用方法

假设你想添加一个带有 Yaru 主题风格的最小化按钮，可以使用 DecoratedMinimizeButton 小部件，并通过 type 属性指定主题类型（默认为自动检测）：

DecoratedMinimizeButton(
    type: ThemeType.yaru,
    onPressed: () {},
),

同样地，你可以使用 DecoratedCloseButton 添加关闭按钮，使用 DecoratedMaximizeButton 添加最大化按钮。

示例代码

以下是一个完整的示例 Demo，展示了如何在应用中集成这些按钮，并允许用户切换不同的主题样式：

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Titlebar Buttons Demo',
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  ThemeType _currentThemeType = ThemeType.auto;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Get Started'),
        actions: [
          DecoratedMinimizeButton(
            type: _currentThemeType,
            onPressed: () => debugPrint('Minimize Window'),
          ),
          DecoratedMaximizeButton(
            type: _currentThemeType,
            onPressed: () => debugPrint('Maximize Window'),
          ),
          DecoratedCloseButton(
            type: _currentThemeType,
            onPressed: () => debugPrint('Close Window'),
          ),
          const SizedBox(width: 5),
        ],
      ),
      body: Center(
        child: DropdownButton<ThemeType>(
          value: _currentThemeType,
          items: ThemeType.values.map((e) {
            return DropdownMenuItem<ThemeType>(
              value: e,
              child: Text(e.toString().split('.').last.capitalize()),
            );
          }).toList(),
          onChanged: (thTy) {
            setState(() => _currentThemeType = thTy!);
          },
        ),
      ),
    );
  }
}

请注意，为了使 capitalize() 方法正常工作，你需要导入 change_case 包或手动实现字符串首字母大写的功能。上述代码示例简化了一些细节，实际使用时可能需要根据具体需求进行调整。

此外，确保你已经在 pubspec.yaml 文件中添加了对 titlebar_buttons 的依赖：

dependencies:
  flutter:
    sdk: flutter
  titlebar_buttons: ^latest_version

请替换 ^latest_version 为最新版本号。


更多关于Flutter标题栏按钮管理插件titlebar_buttons的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter标题栏按钮管理插件titlebar_buttons的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何在Flutter中使用titlebar_buttons插件来管理标题栏按钮的示例代码。这个插件允许你在应用的标题栏中添加自定义按钮，并进行相应的管理。

首先，你需要在你的pubspec.yaml文件中添加这个插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  titlebar_buttons: ^x.y.z  # 请替换为最新版本号

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

接下来是一个完整的示例代码，展示如何使用titlebar_buttons插件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'TitleBar Buttons Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // 定义一个变量来管理按钮的点击状态
  bool isButtonPressed = false;

  // 按钮点击事件处理函数
  void onButtonPressed() {
    setState(() {
      isButtonPressed = !isButtonPressed;
    });
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text('Button Pressed: ${isButtonPressed ? 'Yes' : 'No'}')),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('TitleBar Buttons Demo'),
        actions: [
          // 使用TitleBarButton创建自定义按钮
          TitleBarButton(
            icon: Icon(Icons.add),
            onPressed: onButtonPressed,
            tooltip: 'Add Button',
          ),
          TitleBarButton(
            icon: Icon(Icons.edit),
            onPressed: () {
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(content: Text('Edit Button Pressed')),
              );
            },
            tooltip: 'Edit Button',
          ),
          // 可以添加更多按钮
        ],
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '${isButtonPressed ? 'Yes' : 'No'}',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们做了以下几件事情：

  1. 在pubspec.yaml中添加了titlebar_buttons插件的依赖。
  2. 在MyApp类中定义了应用的主题和主页。
  3. 在MyHomePage类中，使用StatefulWidget来管理按钮的点击状态。
  4. 在build方法中，使用Scaffold和AppBar来构建应用的标题栏，并通过actions属性添加了自定义的按钮。
  5. 使用TitleBarButton来创建自定义按钮，并指定了按钮的图标、点击事件处理函数和提示文本。
  6. 在按钮点击事件处理函数中，使用setState方法来更新按钮的点击状态，并使用ScaffoldMessenger.of(context).showSnackBar来显示一个SnackBar。

请注意，titlebar_buttons插件的具体用法可能会根据版本的不同而有所变化，因此请参考插件的官方文档以获取最新的用法和示例。

回到顶部