基础组件模型

公共属性组件模型的通用属性定义

虚拟view与实体view

​ 虚拟view，即view的内容直接通过宿主的canvas绘制出来，它本身并不需要一个实体的view存在，在真实的view tree中，是看不到这个实例，只能看到其宿主的存在。它包括：原子虚拟view组件比如文本、图片、线条，布局虚拟view组件比如线性布局、帧布局等。虚拟view也遵循Android绘制view的逻辑，需要响应measure、layout、draw的过程才能显示。实体view，即原生的native view。

属性

数值单位

​ 在组件属性里，跟尺寸相关的属性，其值的单位默认是dp，比如layoutWidth=10，表示宽度是10dp；实际值 = dp * density；

为了更精准地适配视觉，支持rp单位，表示适配屏幕大小的值，比如layoutWidth=10rp，实际值 = 10 * 屏幕宽度 / 750；这里 750 指的是设计稿里的屏幕宽度，默认值是 750，可以通过 com.libra.Utils.setUedScreenWidth() 方法修改默认值。

颜色值

在组件颜色相关属性里，支持16进制数表示，#RRGGBB、#AARRGGBB，也支持以下几个颜色文本：

原子组件

基础元素叶子节点组件，不能嵌套其他组件。

NText

原生实现的文本组件，通过模板里定义可绑定以下属性：字体颜色、字号大小、字体粗细、支持文本对齐，行数，最大行数，行间距，行间距系数，截断方式。

VText

虚拟化实现的文本组件，精简了大量原生文本的特性，只支持以下几个特性：字体颜色、字号大小、字体粗细、支持文本对齐，只能单行显示，不支持分多行。不支持响应点击事件。不支持click、longclick。

<VText
    id="1"
    text="title"
    textSize="12"
    textColor="#333333"
    layoutWidth="wrap_content"
    layoutHeight="wrap_content" />

PiImageView

扩展原生图片，支持 Gif 动图、本地图片、网络图片，所有 .out 中的图片显示，均使用此组件，七巧板推荐的图片组件，将不再支持。

imageData

<PiImageView
    layoutGravity="v_center"
    layoutHeight="12"
    layoutWidth="12"
    layoutMarginRight="16"
    imgRadius="2"
    isLocal="true"
    imgSrc="${imgSwitch}"/>

{
"imgSwitch":"core_arrow_right_blue",
}
``

## NLine

实体进度条组件，支持实线、虚线，可以使用横向显示、竖向显示。**不支持click、longclick。**

| 名称                    | 类型                                              | 默认值       | 描述                                                         | 表达式 |
| ----------------------- | ------------------------------------------------- | ------------ | ------------------------------------------------------------ | ------ |
| color                   | string                                            | black        | 线条颜色                                                     | 是     |
| paintWidth              | int                                               | 1            | 线条宽度                                                     | 否     |
| orientation             | enum(H/V)                                         | H            | 线条方向，H：横向，V：竖向                                   | 否     |
| style(iOS暂不支持)      | enum(solid/dash)                                  | solid        | 线条样式，solid：实线，dash：虚线                            | 否     |
| dashEffect(iOS暂不支持) | string                                            | [3, 5, 3, 5] | 虚线样式数组，元素必须是偶数个，以实线宽度-虚线宽度…的顺序写 | 否     |
| gravity                 | left、right、top、bottom<br/>、v_center、h_center | left\|top    | 描述内容的对齐，比如文字在文本组件里的位置、原子组件在容器里的位置，left：靠左，right：靠右，top：靠上，bottom：靠底，v_center：垂直方向居中，h_center：水平方向居中，可用`或`组合描述 | 否     |

```xml
<NLine
    layoutWidth="match_parent"
    layoutHeight="0.5"
    paintWidth="0.5"
    orientation="H"
    style="dash"
    dashEffect="[10,6,10,6]"
    color="#D0D0D0" />

VLine

虚拟化线条，支持实线、虚线，可以使用横向显示、竖向显示。不支持click、longclick。

容器组件

Page

翻页滚动的组件，与Scroller和Slider的区别在于它是有页面效果，一页一页滚动，而Scroller、Slider是可连续滚动。

<Page
    autoSwitch="true"
    dataTag="vList"
    stayTime="2500"
    canSlide="false"
    orientation="V"
    layoutRatio="1"
    layoutWidth="0"
    layoutHeight="33.5" />

FrameLayout

虚拟化的帧布局，主要提供了布局协议，不支持通过数据动态创建子组件，需要在布局模板里直接写子组件。

<FrameLayout
    flag="flag_draw"
    dataTag="container"
    layoutWidth="match_parent"
    layoutHeight="wrap_content">
    <VHLayout
        orientation="V"
        layoutWidth="match_parent"
        layoutHeight="wrap_content">
        <TMNImage
            flag="flag_draw|flag_event|flag_exposure|flag_clickable"
            id="0"
            dataTag="header"
            action="action"
            layoutWidth="match_parent"
            layoutHeight="wrap_content"
            autoDimDirection="X"
            autoDimX="750"
            autoDimY="110"/>

        <Grid
            dataTag="vList"
            colCount="2"
            layoutWidth="match_parent"
            layoutHeight="wrap_content" />
    </VHLayout>
</FrameLayout>

RatioLayout

虚拟化的线性布局，其子组件支持写layoutRatio属性来声明在父容器空间上占用的比例，声明过layoutRatio的组件按比例分配宽或高，未声明layoutRatio的组件占用剩余的空间。不支持通过数据动态创建子组件，需要在布局模板里直接写子组件。

<RatioLayout
        flag="flag_draw|flag_event|flag_exposure|flag_clickable"
        action="action"
        orientation="V"
        layoutWidth="wrap_content"
        layoutHeight="match_parent">
    <RatioLayout
            orientation="H"
            layoutWidth="wrap_content"
            layoutMarginBottom="1.5"
            layoutRatio="1"
            layoutHeight="0"
            flag="flag_draw">
        <VText
                dataTag="title1"
                textSize="12"
                textColor="#333333"
                layoutGravity="v_center"
                layoutRatio="1"
                layoutWidth="wrap_content"
                layoutHeight="wrap_content"
                ellipsize="end"/>
    </RatioLayout>

    <RatioLayout
            orientation="H"
            layoutWidth="wrap_content"
            layoutMarginTop="1.5"
            gravity="v_center"
            layoutRatio="1"
            layoutHeight="0"
            flag="flag_draw">
        <VText
                dataTag="title2"
                textSize="12"
                textColor="#333333"
                layoutGravity="v_center"
                layoutRatio="1"
                layoutWidth="wrap_content"
                layoutHeight="wrap_content"
                ellipsize="end"/>
    </RatioLayout>

</RatioLayout>

Grid

实体网格布局容器，支持通过数据动态创建子组件。

<Grid
    dataTag="vList"
    colCount="2"
    layoutWidth="match_parent"
    layoutHeight="wrap_content"/>

GridLayout

虚拟化的网格布局，与Grid的区别是它是虚拟的，主要提供了布局协议，不支持通过数据动态创建子组件，需要在布局模板里直接写子组件。

<GridLayout
  colCount="2"
  layoutWidth="match_parent"
  layoutHeight="wrap_content"
  itemHorizontalMargin="5"
  itemVerticalMargin="5"
  background="#FFFFFF"
  paddingTop="7"
  paddingRight="7"
  paddingBottom="7"
  paddingLeft="7">
  <TMNImage
    layoutWidth="match_parent"
    layoutHeight="70"
    ratio="1"
    scaleType="center_crop"
    src="${data[0]}"/>
  <TMNImage
    layoutWidth="match_parent"
    layoutHeight="70"
    ratio="1"
    scaleType="center_crop"
    src="${data[3]}"/>
  </GridLayout>

VH2Layout

虚拟化的线性布局，与VHLayout的区别是它支持子组件分别从top、left、right、bottom四个方向进行布局。不支持通过数据动态创建子组件，需要在布局模板里直接写子组件。

<VH2Layout
    flag="flag_draw"
    layoutWidth="match_parent"
    layoutHeight="wrap_content"
    layoutRatio="74">
    <VText
        layoutWidth="wrap_content"
        layoutHeight="wrap_content"
        dataTag="price"
        textSize="15"
        textStyle="bold"
        layoutMarginLeft="12"
        layoutGravity="left|v_center"
        textColor="#231F1F"/>
    <NImage
        id="2"
        action="cart"
        dataTag="shopCart"
        flag="flag_event|flag_clickable"
        scaleType="fit_xy"
        layoutWidth="19"
        layoutHeight="19"
        layoutMarginRight="12"
        layoutGravity="right|v_center"
        layoutDirection="right"
        src="tm_homepage_shopping_cart"/>
</VH2Layout>

VHLayout

虚拟化的线性布局，与VH的区别是它是虚拟的，主要提供了布局协议，不支持通过数据动态创建子组件，需要在布局模板里直接写子组件。

<VHLayout
     orientation="V"
    layoutWidth="match_parent"
    layoutHeight="wrap_content">
    <VText
        id="1"
        dataTag="title"
        textSize="12"
        textColor="#333333"
        layoutWidth="wrap_content"
        layoutHeight="wrap_content" />
    <VText
        id="2"
        dataTag="title"
        textSize="12"
        textColor="#333333"
        layoutWidth="wrap_content"
        layoutHeight="wrap_content" />
</VHLayout>

NFrameLayout

实体的帧布局，主要提供了布局协议，不支持通过数据动态创建子组件，需要在布局模板里直接写子组件。虚拟的子组件会绘制到它的 canvas 上而不是整个大容器的 canvas，实体的子组件也会添加到它内部，因此在 borderRadius 属性的作用下会裁剪内部区域，除此之外与 FrameLayout 的功能完全一致。

<NFrameLayout
    flag="flag_draw"
    dataTag="container"
    layoutWidth="match_parent"
    layoutHeight="wrap_content">
    <VHLayout
        orientation="V"
        layoutWidth="match_parent"
        layoutHeight="wrap_content">
        <TMNImage
            flag="flag_draw|flag_event|flag_exposure|flag_clickable"
            id="0"
            dataTag="header"
            action="action"
            layoutWidth="match_parent"
            layoutHeight="wrap_content"
            autoDimDirection="X"
            autoDimX="750"
            autoDimY="110"/>

        <Grid
            dataTag="vList"
            colCount="2"
            layoutWidth="match_parent"
            layoutHeight="wrap_content" />
    </VHLayout>
</NFrameLayout>

NRatioLayout

实体的线性布局，其子组件支持写 layoutRatio 属性来声明在父容器空间上占用的比例，声明过layoutRatio的组件按比例分配宽或高，未声明 layoutRatio 的组件占用剩余的空间。不支持通过数据动态创建子组件，需要在布局模板里直接写子组件。虚拟的子组件会绘制到它的 canvas 上而不是整个大容器的 canvas，实体的子组件也会添加到它内部，因此在 borderRadius 属性的作用下会裁剪内部区域，除此之外与 RatioLayout 的功能完全一致。

 <NRatioLayout
            orientation="H"
            layoutWidth="wrap_content"
            layoutMarginBottom="1.5"
            layoutRatio="1"
            layoutHeight="0"
            flag="flag_draw">
        <VText
                dataTag="title1"
                textSize="12"
                textColor="#333333"
                layoutGravity="v_center"
                layoutRatio="1"
                layoutWidth="wrap_content"
                layoutHeight="wrap_content"
                ellipsize="end"/>
    </NRatioLayout>

NGridLayout

实体的网格布局，主要提供了布局协议，不支持通过数据动态创建子组件，需要在布局模板里直接写子组件。虚拟的子组件会绘制到它的 canvas 上而不是整个大容器的 canvas，实体的子组件也会添加到它内部，因此在 borderRadius 属性的作用下会裁剪内部区域，除此之外与 GridLayout 的功能完全一致。

<NGridLayout
  colCount="2"
  layoutWidth="match_parent"
  layoutHeight="wrap_content"
  itemHorizontalMargin="5"
  itemVerticalMargin="5"
  background="#FFFFFF"
  paddingTop="7"
  paddingRight="7"
  paddingBottom="7"
  paddingLeft="7">
  <TMNImage
    layoutWidth="match_parent"
    layoutHeight="70"
    ratio="1"
    scaleType="center_crop"
    src="${data[0]}"/>
  <TMNImage
    layoutWidth="match_parent"
    layoutHeight="70"
    ratio="1"
    scaleType="center_crop"
    src="${data[1]}"/>
  </NGridLayout>

NVH2Layout

实体的线性布局，不支持通过数据动态创建子组件，需要在布局模板里直接写子组件。虚拟的子组件会绘制到它的 canvas 上而不是整个大容器的 canvas，实体的子组件也会添加到它内部，因此在 borderRadius 属性的作用下会裁剪内部区域，除此之外与 VH2Layout 的功能完全一致。

<NVH2Layout
    flag="flag_draw"
    layoutWidth="match_parent"
    layoutHeight="wrap_content"
    layoutRatio="74">
    <VText
        layoutWidth="wrap_content"
        layoutHeight="wrap_content"
        dataTag="price"
        textSize="15"
        textStyle="bold"
        layoutMarginLeft="12"
        layoutGravity="left|v_center"
        textColor="#231F1F"/>
    <NImage
        id="2"
        action="cart"
        dataTag="shopCart"
        flag="flag_event|flag_clickable"
        scaleType="fit_xy"
        layoutWidth="19"
        layoutHeight="19"
        layoutMarginRight="12"
        layoutGravity="right|v_center"
        layoutDirection="right"
        src="tm_homepage_shopping_cart"/>
</NVH2Layout>

NVHLayout

实体的线性布局，主要提供了布局协议，不支持通过数据动态创建子组件，需要在布局模板里直接写子组件。虚拟的子组件会绘制到它的 canvas 上而不是整个大容器的 canvas，实体的子组件也会添加到它内部，因此在 borderRadius 属性的作用下会裁剪内部区域，除此之外与 VHLayout 的功能完全一致。

<NVHLayout
     orientation="V"
    layoutWidth="match_parent"
    layoutHeight="wrap_content">
    <VText
        id="1"
        dataTag="title"
        textSize="12"
        textColor="#333333"
        layoutWidth="wrap_content"
        layoutHeight="wrap_content" />
    <VText
        id="2"
        dataTag="title"
        textSize="12"
        textColor="#333333"
        layoutWidth="wrap_content"
        layoutHeight="wrap_content" />
</NVHLayout>