|美团积木Sketch插件进阶开发指南( 六 )

html, body, #root { height: 100%; overflow: hidden; user-select: none; background: transparent; -webkit-user-select: none; }除此之外在正式环境中（NODE_ENV为production），我们并不希望当前界面响应右键菜单，需要通过给document添加EventListener监听将相关事件处理方法屏蔽。
document.addEventListener('contextmenu', e => { if (process.env.NODE_ENV === 'production') { e.preventDefault(); } });工具栏优化
Sketch对于设计师的意义，就像代码编辑器对于程序员一样，工作中几乎无时无刻也离不开。在积木Sketch插件走出美团外卖，被越来越多的设计团队采用后，为了让它更加赏心悦目， UI同学决定对工具条进行一次全新的视觉升级。原生界面开发指的是通过macOS的AppKit进行用户界面开发，在插件开发中一些需要嵌入Sketch面板的UI模块就需要进行原生界面开发，比如吸附式工具条就属于通过macOS原生API开发的界面。
原生开发既可以使用Objective-C语言，也可以使用CocoaScript通过写JavaScript的方式进行开发。 CocoaScript 通过Mocha实现JS到Objective-C的映射，可以让我们通过JS调用Sketch内部API以及macOS的Framework 。在通过CocoaScript原生开发前需要了解一些基础知识：

在使用相关框架前需要通过framework()方法进行引入，而Foundation以及CoreGraphics是默认内置的，无需再单独操作。
一些Objective-C的selectors选择器需要指针参数，由于JavaScript不支持通过引用传递对象，因此CocoaScript提供了MOPointer作为变量引用的代理对象。

UI调整一般分为三个部分：布局调整、动效调整、图片替换。下面的章节会进行逐一介绍。

本文插图

新版积木工具栏效果图
布局调整
这里UI的需求是NSButton的宽度填充满整个NSStackView ，高度自定义。由于此功能看起来过于简单，当时认为估时0.5天绰绰有余，可是没想到搭进去了1个工作日加上2天周末的时间，因为无论如何设置NSStackView中子View尺寸都无法生效。
在顶住了周围人“UI问题不影响功能使用，以后有时间再优化吧”的“舆论压力”后，终于在官方文档里面发现了线索：“NSStackView A stack view employs Auto Layout (the system’s constraint-based layout feature) to arrange and align an array of views according to your specification. To use a stack view effectively, you need to understand the basics of Auto Layout constraints as described in Auto Layout Guide.”
简而言之， NSStackView使用constraints的方式进行自动布局（可以类比Android中的ConstraintLayout），在进行尺寸修改时，是需要添加锚点的，因此需要通过Anchor的方式进行尺寸修改。
// 创建工具条 const toolbar = NSStackView.alloc().initWithFrame(NSMakeRect(0, 0, 45, 400)); toolbar.setSpacing(7); // 创建NSButton const button = NSButton.alloc().initWithFrame(rect) // 设置NSButton宽高 button .widthAnchor() .constraintEqualToConstant(rect.size.width) .setActive(1); button .heightAnchor() .constraintEqualToConstant(rect.size.height) .setActive(1); button.setBordered(false); // 设置回调点击事件 button.setCOSJSTargetFunction(onClickListener); button.setAction('onClickListener:'); // 添加NSButton至NSStackView中 toolbar.addView_inGravity(button, inGravityType);动效调整
NSButton内置的点击效果大约15种，可以通过NSBezelStyle进行设置。积木插件工具栏并没有采用点击后icon反色的通用处理方式，而是点击后将背景色置为浅灰。如果想要自定义一些点击效果，只需在NSButton点击事件的回调中设置即可。