Flutter插件tide_kit的使用_tide_kit通过提供一组预构建的小部件和服务来加速跨平台桌面和 Web 应用程序的开发,但也可以在移动设备上运行

发布于 1周前 作者 itying888 最后一次编辑是 5天前 来自 Flutter

Flutter插件tide_kit的使用_tide_kit通过提供一组预构建的小部件和服务来加速跨平台桌面和 Web 应用程序的开发,但也可以在移动设备上运行

概述

Tide Kit 是一个用于在所有平台上使用 Flutter 构建 IDE 和工作室类应用程序的工具包。它通过提供一组预构建的小部件和服务来加速跨平台桌面和 Web 应用程序的开发,但也可以在移动设备上运行。

关键概念

  • Action: 包含标题、菜单、快捷键,并且可以显示在 UI 中的命令。
  • Activity Bar: 位于工作区侧面的垂直条,包含各种图标按钮。
  • Command: 具有 ID 的可执行函数。
  • Console: 显示日志消息的面板。
  • Contribution: 扩展组件的类,使用命令、动作和服务。
  • Extension: 注册命令、动作、贡献、服务和小部件以构建功能特征的类。
  • Key Binding: 触发命令的一组键盘键(键集),相当于键盘快捷键。
  • Logging: 将消息记录到控制台中。
  • Notification: 短暂显示在工作区上的交互式消息。
  • Panel: 工作区的一部分,显示内容。
  • Registry: 可以通过类类型检索的对象集合。
  • Service: 提供系统功能但没有用户界面的类。
  • Status Bar: 显示在工作区底部的小部件,包含最少的内容项。
  • Tide ID: 动作、活动栏项、命令、扩展、面板、服务或状态栏项的唯一标识符。
  • Widget: Tide UI 的一部分 Flutter 小部件。
  • Window: 包含工作区的顶级小部件。
  • Workbench: 包含活动栏、面板和状态栏的主要小部件,是窗口的子级。

示例 Demo

以下是一个完整的示例 demo,展示了如何使用 Tide Kit 创建一个带有状态栏、活动栏和面板的应用程序:

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

void main() {
  final tide = Tide();

  // 使用时间服务
  tide.useServices(services: [Tide.ids.service.time]);

  // 获取工作区服务
  final workbenchService = Tide.get<TideWorkbenchService>();

  // 添加活动栏项
  workbenchService.layoutService.addActivityBarItems([
    TideActivityBarItem(title: 'Explorer', icon: Icons.file_copy_outlined),
    TideActivityBarItem(title: 'Search', icon: Icons.search_outlined),
    TideActivityBarItem(title: 'Share', icon: Icons.share_outlined),
    TideActivityBarItem(
        title: 'Settings',
        icon: Icons.settings_outlined,
        position: TideActivityBarItemPosition.end),
  ]);

  // 运行应用
  runApp(
    TideApp(
      home: TideWindow(
        workbench: TideWorkbench(
          activityBar: const TideActivityBar(),
          statusBar: TideStatusBar(
            items: [
              TideStatusBarItemTime(position: TideStatusBarItemPosition.right)
            ],
          ),
        ),
      ),
    ),
  );
}

更多复杂示例

示例 3:更复杂的示例,包括左右面板、活动栏和一些状态栏项

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

void main() {
  final tide = Tide();

  tide.useServices(services: [
    Tide.ids.service.notifications,
    Tide.ids.service.time,
  ]);

  final leftPanelId = TideId.uniqueId();
  final mainPanelId = TideId.uniqueId();

  final workbenchService = Tide.get<TideWorkbenchService>();
  workbenchService.layoutService.addPanels([
    TidePanel(panelId: leftPanelId),
    TidePanel(panelId: mainPanelId),
  ]);
  workbenchService.layoutService.addActivityBarItems([
    TideActivityBarItem(
      title: 'Calendar Day',
      icon: Icons.calendar_month,
    ),
  ]);

  final tideOS = TideOS();

  final statusBarColor = ValueNotifier<Color?>(null);

  TideNotification? timeNotification;

  // 添加状态栏项
  tide.workbenchService.layoutService.addStatusBarItem(TideStatusBarItem(
    position: TideStatusBarItemPosition.left,
    builder: (context, item) {
      return TideStatusBarItemContainer(
        item: item,
        onPressed: (TideStatusBarItem item) {
          statusBarColor.value =
              statusBarColor.value == null ? Colors.red : null;
        },
        tooltip: 'Click to toggle the status bar',
        child: const Row(
          children: [
            Icon(Icons.sync, size: 16.0, color: Colors.white),
            SizedBox(width: 4.0),
            Text('Toggle status bar', style: TideStatusBarItemTextWidget.style),
          ],
        ),
      );
    },
  ));

  num progressWorked = 0;
  final progressItem = TideStatusBarItemProgress(
    position: TideStatusBarItemPosition.center,
    infinite: false,
    progressTotal: 10.0,
    progressWorked: progressWorked,
    onPressedClose: (TideStatusBarItem item) {
      if (item is TideStatusBarItemProgress) {
        final newItem = item.copyWith(infinite: true);
        tide.workbenchService.layoutService.replaceStatusBarItem(newItem);
      }
    },
    tooltip: 'Click to restart the progress bar',
  );
  tide.workbenchService.layoutService.addStatusBarItem(progressItem);

  Timer.periodic(const Duration(milliseconds: 250), (timer) {
    final item = tide.workbenchService.layoutService.statusBarState.value
        .getItem(progressItem.itemId);
    if (item is TideStatusBarItemProgress) {
      if (!item.infinite) {
        progressWorked = progressWorked == 10 ? 0 : progressWorked + 1;
        final newItem = item.copyWith(progressWorked: progressWorked);
        tide.workbenchService.layoutService.replaceStatusBarItem(newItem);
      }
    }
  });

  // 添加状态栏项
  tide.workbenchService.layoutService.addStatusBarItem(TideStatusBarItem(
    position: TideStatusBarItemPosition.right,
    builder: (context, item) {
      return TideStatusBarItemContainer(
        item: item,
        tooltip: 'Account',
        child:
            const Icon(Icons.account_circle, size: 16.0, color: Colors.white),
      );
    },
  ));

  // 添加状态栏项
  tide.workbenchService.layoutService.addStatusBarItem(TideStatusBarItemText(
    position: TideStatusBarItemPosition.right,
    onPressed: (TideStatusBarItem item) {
      final notificationService = Tide.get<TideNotificationService>();
      final notification = TideNotification(
          message: 'Flutter: Hot reloading...',
          severity: TideNotificationSeverity.info,
          autoTimeout: true,
          progressInfinite: true);
      notificationService.notify(notification);
      final msg2 =
          '${tideOS.currentTypeFormatted} ${tideOS.operatingSystemVersion}';
      notificationService.warning(msg2, autoTimeout: true);
      final msg1 =
          '${tideOS.currentTypeFormatted} ${tideOS.operatingSystemVersion}'
          ' This is a very long message to test out lots of wrapping across this notification.';
      notificationService.error(msg1, autoTimeout: true);
      final msg =
          '${tideOS.currentTypeFormatted} ${tideOS.operatingSystemVersion}';
      notificationService.info(msg, autoTimeout: true, allowClose: false);
    },
    text: tideOS.currentTypeFormatted,
    tooltip: 'OS Type',
  ));

  // 添加状态栏项
  tide.workbenchService.layoutService.addStatusBarItem(TideStatusBarItemTime(
    position: TideStatusBarItemPosition.right,
    tooltip: 'The current time',
    onPressed: (TideStatusBarItem item) {
      final notificationService = Tide.get<TideNotificationService>();
      if (timeNotification == null ||
          !notificationService.notificationExists(timeNotification!.id)) {
        final timeService = Tide.get<TideTimeService>();
        final msg =
            'The time is: ${timeService.currentTimeState.timeFormatted()}';
        timeNotification =
            notificationService.info(msg, autoTimeout: true, allowClose: false);
      }
    },
  ));

  // 添加状态栏项
  tide.workbenchService.layoutService.addStatusBarItem(TideStatusBarItem(
    position: TideStatusBarItemPosition.right,
    builder: (context, item) {
      return TideStatusBarItemContainer(
        item: item,
        tooltip: 'Notifications',
        child: const Icon(Icons.notifications_none_outlined,
            size: 16.0, color: Colors.white),
      );
    },
  ));

  runApp(
    ValueListenableBuilder<Color?>(
      valueListenable: statusBarColor,
      builder: (context, colorValue, child) {
        return TideApp(
          home: TideWindow(
            workbench: TideWorkbench(
                activityBar: const TideActivityBar(),
                panelBuilder: (context, panel) {
                  if (panel.panelId.id == leftPanelId.id) {
                    return TidePanelWidget(
                      panelId: panel.panelId,
                      backgroundColor: const Color(0xFFF3F3F3),
                      position: TidePosition.left,
                      resizeSide: TidePosition.right,
                      minWidth: 100,
                      maxWidth: 450,
                      initialWidth: 220,
                      child: const Center(child: Text('Left Panel')),
                    );
                  } else if (panel.panelId.id == mainPanelId.id) {
                    return const TidePanelWidget(
                      backgroundColor: Colors.white,
                      expanded: true,
                      position: TidePosition.center,
                      child: Center(child: Text('Main Panel')),
                    );
                  }
                  return null;
                },
                statusBar: TideStatusBar(backgroundColor: colorValue)),
          ),
        );
      },
    ),
  );
}

更多关于Flutter插件tide_kit的使用_tide_kit通过提供一组预构建的小部件和服务来加速跨平台桌面和 Web 应用程序的开发,但也可以在移动设备上运行的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

2 回复

Tide Kit 是一个用于在所有平台上使用 Flutter 构建 IDE 和工作室类应用程序的工具包。它通过提供一组预构建的小部件和服务来加速跨平台桌面和 Web 应用程序的开发,但也可以在移动设备上运行。 image.png

更多关于Flutter插件tide_kit的使用_tide_kit通过提供一组预构建的小部件和服务来加速跨平台桌面和 Web 应用程序的开发,但也可以在移动设备上运行的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


回到顶部