跳至主要內容

原生组件

原生组件

原生组件是指由 C++ 实现的组件。这些组件的主要设计目标是实现某种界面元素，例如按钮或列表效果，但不承载业务逻辑。和 Web 技术不同的是，原生组件本身不提供 DOM 接口，只提供响应式的组件接口。

Glyphix 中的原生组件提供大量配置接口，可以实现丰富的显示效果。此外，内置组件还有针对嵌入式平台设计的优化功能。

本文档中使用原生组件表示由 C++ 实现的组件；内置组件一词指代由 WearOS 所提供的组件包，不过这些组件则不一定是由 C++ 实现的。

提示

本文档在描述中会区分原生组件和内置组件，但读者一般不用不考虑二者的差别。

界面功能机制

大部分和界面相关的机制是只有原生组件才具备的，这些机制包括：

  • CSS 样式表、布局等机制
  • 手势和触摸事件
  • 渲染和绘制机制

通过组件间的参数/事件传递可以在自定义组件中模拟某些原生组件机制的接口，但这些能力本质上还是由原生组件来实现的。

界面渲染

组件快照

快照是一种帧率优化的技术，为复杂的组件开启快照可以加快绘制速度从而提高帧率。快照实本质是对组件进行“截图”，并通过直接绘制这些截图来加速。因此对于内容复杂但更新不频繁的组件而言，快照是一种有效的技术。对于另一些更新频繁，但是能够容忍不刷新的场景，也有对应的 API 来禁用快照更新。

原生组件对象

通过组件的 $element() 方法可以获取原生组件对象，它可以访问原生组件的属性或调用其方法，例如：

let el = this.$element('scroll-id')
console.log(`width: ${el.width}`) // 通过原生组件对象获取组件的宽度
el.scrollTo({ top: 100 }) // 通过 API 滚动列表
Glyphix framework