JSKit App 文档

# View 组件

阅读本文档前请先阅读 UI 框架，了解如何使用本页描述的 View 组件。

当下 JSKit App 的 View 组件 API 还处于 alpha 阶段，组件数量还较少，后续会增加更多的支持，敬请期待！

如有任何问题或者建议欢迎联系开发者交流。

在 UI 框架 中提到， VNode 有如下的基础定义：

interface VNode {
    pid?: number;
    id: number;
    style?: LayoutStyle;
}

interface VNodeGroup extends VNode {}

只有 VNodeGroup 的子类才可以包含子 VNode

# FlexNode

interface FlexNode extends VNodeGroup {
    name: 'flex';
    onClick?: (name: string, args: any) => boolean;
    onTouch?: (name: string, event: any) => boolean;
}

一个 CSS Flexible Box Layout Module (opens new window) 所述的 Flexbox 模型布局。详见布局与样式。

# TextNode

interface TextNode extends VNode {
    name: 'text';
    text?: string;
    textColor?: string;
    gravity?: 'start' | 'left' | 'top' | 'right' | 'end' | 'bottom' | 'center';
    textSize?: number | string;
    onClick?: (name: string, args: any) => boolean;
    onTouch?: (name: string, event: any) => boolean;
}
  • text 显示的文本内容
  • textColor 文本的颜色
  • gravity 重心，枚举值，指文字的重心
  • textSize 字体大小
  • onClick 当点击时，回调的方法
  • onTouch 当产生触控事件时，回调的方法

用来显示一个文本。

# ImageNode

interface ImageNode extends VNode {
    name: 'image';
    url: string;
    onClick?: (name: string, args: any) => boolean;
    onTouch?: (name: string, event: any) => boolean;
}
  • url 图片的URL地址
  • onClick 当点击时，回调的方法
  • onTouch 当产生触控事件时，回调的方法

显示一个图片

# ListView

interface ListViewNode extends VNodeGroup {
    name: 'list-view';
    listType?: 'linear' | 'grid' | 'staggered-grid';
    scrollDirection?: 'vertical' | 'horizontal';//default is 'vertical'
    spanCount?: number;
    onClick?: (name: string, args: any) => boolean;
    onTouch?: (name: string, event: any) => boolean;
}
  • listType：列表的类型
    • linear：线性布局
    • grid：网格布局
    • staggered-grid：交错网格布局
  • scrollDirection：滑动方向
    • vertical：纵向
    • horizontal：横向
  • spanCount：当 listType 为 grid或staggered-grid时，这个是可选的，为总的跨数，缺省时为 12
  • onTouch 当产生触控事件时，回调的方法

ListViewNode 将只允许接收 ListItemNode 作为子 Node 。

interface ListItemNode extends VTempData {
    spanCount?: number;
}

注意，ListItemNode 是继承自 VTempData。

  • spanCount 此属性只在父节点 ListViewNode 的 listType 为 grid 时生效，spanCount 可表示当前节点的跨数，缺省为 1 。

ListViewNode 支持如下方法：

方法名 方法参数 描述 示例
scrollToPosition [postion: number,
smooth?: boolean]		 滑动到指定位置 {method: 'scrollToPosition',
args: [23, true]}
scrollTo [x: number | string,
y: number | string]		 滑动到坐标 {method: 'scrollTo',
args: [233, 0]}
scrollBy [dx: number | string,
dy: number | string]		 滑动到相对坐标 {method: 'scrollBy',
args: ["23dp", 0]}

VNode 的方法可使用 VPagePresenter 的 invoke 来执行，例如：

//获取到 page 的控制器，pageId 为页面的 id。
let presenter = ui.getPage(pageId);
//平滑移动到第 23 个 item。 listId 为 list-view 的节点 id
presenter.invoke(listId, {
    method: "scrollToPosition",
    args: [23, true]//第一个参数为 position，必填；第二个参数为是否是平滑的滑动，可选。
});

# MarkdownNode

interface MarkdownNode extends VNode {
    name: 'md-view';
    md?: string;// markdown 文本
    linkResolver?: (name: string, args: any) => boolean;
    onClick?: (name: string, args: any) => boolean;
    onTouch?: (name: string, args: any) => boolean;
}

渲染显示 Markdown 格式文本。遵循 commonmark spec (opens new window) 标准。

  • linkResolver 处理 Markdown 文本里的链接，其链接地址包含在 string 类型的 args.link 中。如果 linkResolver 已经处理了链接事件，应当返回 true。如果返回 false 将会交由 UI 框架处理。

# ScrollViewNode

interface ScrollViewNode extends VNodeGroup {
    name: 'scroll-view';
    scrollDirection?: 'vertical' | 'horizontal';//default is 'vertical'
    onClick?: (name: string, args: any) => boolean;
    onTouch?: (name: string, args: any) => boolean;
}

ScrollViewNode 是可以并只接受一个子 VNode 的容器。当子 VNode 超出 ScrollViewNode 范围时，可滑动显示。

← 布局与样式 →