SwiftUI macOS教程之如何放置toolbar

实战需求

工具条是macOS App的重要组成部分,那么该如何放置工具条呢?我们来看看苹果的App是如何放置的


Safari 工具栏-左右两侧
地图程序-右侧
TV程序-右侧
iBooks- 左右两侧

通过上面典型的例子我们可以看出,工具栏和标题栏融合的方式。下面我们看看苹果对界面的要求.

macOS 11 界面要求

窗口和视图

在整个macOS 11中,窗口采用可视化的触摸方式来调用iOS界面。例如,窗口集成了侧边栏,工具栏和内容区域,使用了增大的拐角半径,并显示了轻巧的控件。


窗口和视图

工具栏和标题栏

默认情况下,工具栏更高,窗口标题可以与控件内联显示,并且工具栏项目不再包含边框。增加的高度和无边框的控件相结合,使macOS 11工具栏具有流线型外观。

工具栏和标题栏

为了匹配默认工具栏的增加的高度,工具栏项自动使用较大的控件大小。唯一的例外是集成的工具栏标题栏区域(例如Safari窗口中的区域),该区域继续使用常规控件大小。为了适应新的默认大小,您可能需要调整工具栏的布局。

工具栏

重要,继续使用minSize和maxSize API来设置工具栏项目的大小可以裁剪控件,因为当前值不占较大的默认大小。如果需要为工具栏控件指定最小或最大大小,请使用约束。

当水平空间有限时,工具栏可以显示“搜索”按钮代替搜索栏。人们单击“搜索”按钮时,该栏会展开;当他们单击窗口中的其他位置时,搜索栏将折叠,工具栏将再次显示该按钮。


工具栏可以显示“搜索”

在首选项窗口中,工具栏可以使用SF符号与主窗口的外观保持一致,但标题位置仍位于工具栏按钮上方。为了清晰起见,单个工具栏按钮可以包含颜色。为了指示活动的首选项窗格,该窗口将系统提供的选择外观应用于所选的工具栏按钮。

工具栏使用SF符号

如果窗口包含多个窗格,则可以将工具栏项的不同子集与每个窗格对齐,以便在人们调整窗口大小时,每组项都保持在其关联视图上方。

调整前
调整后

技术交流

QQ:3365059189 SwiftUI技术交流QQ群:518696470