Flutter macOS风格UI组件插件macos_ui_widgets的使用

Flutter macOS风格UI组件插件macos_ui_widgets的使用

macos_ui_widgets

macos_ui_widgets 是一个用于在Flutter应用中添加macOS风格UI组件的库。它基于macos_ui库，并提供了额外的组件。

特性

macos_ui_widgets 目前包含以下组件：

• MacosTabView2
• MacosPopupButton2
• MacosPulldownButton2

安装

要将 macos_ui_widgets 添加到你的项目中，请在 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  macos_ui_widgets: ^x.x.x

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

flutter pub get

使用

为了更好地了解如何使用这些组件，你可以查看示例文件夹中的示例代码。以下是一个完整的示例，展示了如何在Flutter应用中使用macos_ui_widgets。

示例代码

import 'dart:io';
import 'package:example/pages/popup_page.dart';
import 'package:example/pages/tab2_page.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/foundation.dart';
import 'package:macos_ui/macos_ui.dart';
import 'package:provider/provider.dart';

import 'theme.dart';

/// 这个方法初始化macos_window_utils并设置窗口样式。
Future<void> _configureMacosWindowUtils() async {
  const config = MacosWindowUtilsConfig();
  await config.apply();
}

Future<void> main() async {
  if (!kIsWeb) {
    if (Platform.isMacOS) {
      await _configureMacosWindowUtils();
    }
  }

  runApp(const MacosUIGalleryApp());
}

class MacosUIGalleryApp extends StatelessWidget {
  const MacosUIGalleryApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (_) => AppTheme(),
      builder: (context, _) {
        final appTheme = context.watch<AppTheme>();
        return MacosApp(
          title: 'macos_ui Widget Gallery',
          themeMode: appTheme.mode,
          debugShowCheckedModeBanner: false,
          home: const WidgetGallery(),
        );
      },
    );
  }
}

class WidgetGallery extends StatefulWidget {
  const WidgetGallery({super.key});

  [@override](/user/override)
  State<WidgetGallery> createState() => _WidgetGalleryState();
}

class _WidgetGalleryState extends State<WidgetGallery> {
  int pageIndex = 0;

  late final searchFieldController = TextEditingController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return PlatformMenuBar(
      menus: const [],
      child: MacosWindow(
        sidebar: Sidebar(
          minWidth: 200,
          builder: (context, scrollController) {
            return SidebarItems(
              currentIndex: pageIndex,
              onChanged: (i) {
                setState(() => pageIndex = i);
              },
              scrollController: scrollController,
              itemSize: SidebarItemSize.large,
              items: const [
                SidebarItem(label: Text('Tab2')),
                SidebarItem(label: Text('Buttons2')),
              ],
            );
          },
          bottom: const MacosListTile(
            leading: MacosIcon(CupertinoIcons.profile_circled),
            title: Text('Tim Apple'),
            subtitle: Text('tim@apple.com'),
          ),
        ),
        endSidebar: Sidebar(
          startWidth: 200,
          minWidth: 200,
          maxWidth: 300,
          shownByDefault: false,
          builder: (context, _) {
            return const Center(
              child: Text('End Sidebar'),
            );
          },
        ),
        child: [
          CupertinoTabView(builder: (_) => const TabView2Page()),
          const PopupButton2Page(),
        ][pageIndex],
      ),
    );
  }
}