macos_ui

实现了当前 macOS 设计语言的 Flutter 小部件和主题。

布局

MacosWindow

MacosWindow 是 macOS 布局的基本框架。

它左侧有一个 Sidebar，窗口的其余部分通常用
MacosScaffold 填充。MacosWindowScope 提供了 MacosWindow 的作用域。
可以通过 MacosWindowScope.of(context).toggleSidebar() 来切换侧边栏。

MacosScaffold

MacosScaffold 可以称之为“页面”。

该框架具有 TitleBar 属性和 children 属性，该属性接受一个 ContentArea 小部件和多个 ResizablePane 小部件。要捕获框架下方的导航或路由，请考虑将 MacosScaffold 包装在 CupertinoTabView 中。这样，框架内的导航将在框架区域内显示，而不是覆盖整个窗口。要在包装在 CupertinoTabView 中的框架外部推送路由，请使用根导航器 Navigator.of(context, rootNavigator: true)。

有关自定义，请参阅文档。

现代窗口外观

Big Sur (macOS 11) 中引入了 macOS 应用的新外观。要在 Flutter 应用中匹配此外观，例如我们的屏幕截图，您的 macos/Runner/MainFlutterWindow.swift 文件应如下所示。

import Cocoa
import FlutterMacOS

class MainFlutterWindow: NSWindow {
  override func awakeFromNib() {
    let flutterViewController = FlutterViewController.init()
    let windowFrame = self.frame
    self.contentViewController = flutterViewController
    self.setFrame(windowFrame, display: true)

    if #available(macOS 10.13, *) {
      let customToolbar = NSToolbar()
      customToolbar.showsBaselineSeparator = false
      self.toolbar = customToolbar
    }
    self.titleVisibility = .hidden
    self.titlebarAppearsTransparent = true
    if #available(macOS 11.0, *) {
      self.toolbarStyle = .unified
    }

    self.isMovableByWindowBackground = true
    self.styleMask.insert(NSWindow.StyleMask.fullSizeContentView)

    RegisterGeneratedPlugins(registry: flutterViewController)

    super.awakeFromNib()
  }
}

按钮

MacosCheckbox

复选框是一种按钮，允许用户在两个相反的状态、操作或值之间进行选择。选中的复选框包含一个复选标记时视为“开启”，为空时视为“关闭”。除非出现在复选列表中，否则复选框几乎总会跟随一个标题。 了解更多

关闭 开启 混合
Off Checkbox On Checkbox Mixed Checkbox

这是一个创建基本复选框的示例

bool selected = false;

MacosCheckbox(
  value: selected,
  onChanged: (value) {
    setState(() => selected = value);
  },
)

要使复选框处于 mixed 状态，请将 value 设置为 null。

HelpButton

帮助按钮显示在视图中，点击时会打开应用特定的帮助文档。所有帮助按钮都是圆形、大小一致的按钮，包含一个问号图标。 了解更多

HelpButton Example

这是一个创建帮助按钮的示例

HelpButton(
  onPressed: () {
    print('pressed help button'),
  },
)

您可以使用 HelpButtonTheme 自定义帮助按钮的外观和行为，但 Apple 不建议更改帮助按钮的外观。

RadioButton

单选按钮是一个小的圆形按钮，后面跟着一个标题。单选按钮通常成组出现，每组两个到五个，为用户提供一组相关但互斥的选择。单选按钮的状态要么是开启（填充的圆圈），要么是关闭（空圆圈）。 了解更多

RadioButton Preview

这是一个创建基本单选按钮的示例

bool selected = false;

MacosRadioButton(
  value: selected,
  onChanged: (value) {
    setState(() => selected = value);
  },
),

PushButton

推送按钮显示在视图中，并触发即时的特定于应用程序的操作，例如打印文档或删除文件。推送按钮包含文本，而不是图标，并且通常会打开一个单独的窗口、对话框或应用程序，以便用户可以完成任务。 了解更多

深色主题 浅色主题

这是一个创建基本推送按钮的示例

PushButton(
  child: Text('button'),
  buttonSize: ButtonSize.large,
  onPressed: () {
    print('button pressed');
  },
),

MacosSwitch

开关是在两个互斥状态（开和关）之间的视觉切换。当可见重点颜色时，开关显示为开启状态；当开关显示为无色时，表示关闭状态。 了解更多

开启 关闭

这是一个创建基本切换开关的示例

bool selected = false;

MacosSwitch(
  value: selected,
  onChanged: (value) {
    setState(() => selected = value);
  },
),

对话框

MacosAlertDialog

用法

showDialog(
  context: context,
  builder: (_) => MacosAlertDialog(
    appIcon: FlutterLogo(
      size: 56,
    ),
    title: Text(
      'Alert Dialog with Primary Action',
      style: MacosTheme.of(context).typography.headline,
    ),
    message: Text(
      'This is an alert dialog with a primary action and no secondary action',
      textAlign: TextAlign.center,
      style: MacosTheme.of(context).typography.headline,
    ),
    primaryButton: PushButton(
      buttonSize: ButtonSize.large,
      child: Text('Primary'),
      onPressed: () {},
    ),
  ),
);



字段

MacosTextField

文本字段是一个矩形区域，用户可以在其中输入或编辑一行或多行文本。文本字段可以包含纯文本或样式化文本。

这是一个创建基本文本字段的示例

MacosTextField(),

标签

标签是屏幕上元素的简短描述。

MacosTooltip

工具提示简洁地描述了如何使用控件，而不会将人们的注意力从主要界面移开。帮助标签在用户将指针放在控件上几秒钟后出现。工具提示会显示 10 秒钟，或者直到指针移开控件。

Tooltip Example

要创建工具提示，请将任何小部件包装在 Tooltip 中。

MacosTooltip(
  message: 'This is a tooltip',
  child: Text('Hover or long press to show a tooltip'),
),

您可以使用 style 属性以您想要的方式自定义工具提示。工具提示会自动适应其环境，响应触摸和指针事件。

指示器

进度指示器

不要让人们盯着静态屏幕等待应用程序加载内容或执行耗时的操作。使用进度指示器让人们知道您的应用程序没有停滞，并让他们了解他们将等待多长时间。

进度指示器有两种不同的样式

  • 条形指示器，更通俗地说就是进度条，在水平条中显示进度。
  • 旋转指示器以圆形形式显示进度，可以是旋转器，也可以是随着进度继续填充的圆。

人们不与进度指示器交互；但是，它们通常伴随一个取消相应操作的按钮。 了解更多

Progress Indicator Example

ProgressCircle

ProgressCircle 可以是确定的，也可以是不确定的。

确定的进度圆 不确定的进度圆

这是一个创建不确定进度圆的示例

ProgressCircle(
  value: null,
),

您可以为 value 提供非空值，以使进度圆变为确定。

ProgressBar

ProgressBar 只能是确定的。

这是一个创建确定进度条的示例

ProgressBar(
  value: 30,
)

级别指示器

级别指示器以图形方式表示特定范围内的特定值。它在目的上与滑块相似，但更具视觉效果，并且不包含用于选择值的显式控件——但支持通过单击和拖动级别指示器本身来选择值。级别指示器还可以包含刻度标记，方便用户精确定位范围内的特定值。有三种不同的级别指示器样式，每种样式都有不同的外观，用于传达容量、评级和相关性。

CapacityIndicator

容量指示器说明了与有限容量相关的当前级别。容量指示器通常用于传达磁盘和电池使用情况等因素。 了解更多

连续 离散
Continuous CapacityIndicator Example Discrete CapacityIndicator Example
一个水平半透明轨道，用彩色条填充以指示当前值。通常会显示刻度标记以提供上下文。 一排水平的独立、大小相等的矩形段。段数与总容量匹配，并且段完全填充——从不部分填充——颜色以指示当前值。

这是一个创建交互式连续容量指示器的示例

double value = 30;

CapacityIndicator(
  value: value,
  discrete: false,
  onChanged: (v) {
    setState(() => value = v);
  },
),

您可以将 discrete 设置为 true 以使其成为离散容量指示器。

RatingIndicator

评级指示器使用一系列水平排列的图形符号来传达排名级别。默认符号是星形。

RatingIndicator Example

评级指示器不显示部分符号——其值被四舍五入以仅显示完整符号。在评级指示器内，符号的距离始终相同，并且不会扩展或收缩以适应控件。 了解更多

这是一个创建交互式评级指示器的示例

double value = 3;

RatingIndicator(
  amount: 5,
  value: value,
  onChanged: (v) {
    setState(() => value = v);
  }
)

RelevanceIndicator

相关性指示器使用一系列垂直条来传达相关性。它通常出现在搜索结果列表中，用于对多个项目进行排序和比较。 了解更多

RelevanceIndicator Example

这是一个创建相关性指示器的示例

RelevanceIndicator(
  value: 15,
  amount: 20,
)

GitHub

https://github.com/GroovinChip/macos_ui