VIEW_CONTAINER

Start from API_LEVEL 2.0 . Please refer to API_LEVEL.

The VIEW_CONTAINER widget container is a very powerful layout widget with the following features.

• It is a rectangular layout container that can create child widgets by its instance method
• The z_index property controls the cascading order of the widget container, allowing for vertical cascading of widgets. And you can create multiple VIEW_CONTAINER widgets in the same page. In Zepp OS v3, you can create up to 7
• The VIEW_CONTAINER widget container itself supports scrolling and can be used as a scrolling container

Create UI widget

import { createWidget, widget } from '@zos/ui'

const viewContainer = createWidget(widget.VIEW_CONTAINER, Param)

// Creating UI sub-widgets
viewContainer.createWidget(xxx, xxx)

Type

Param: object

Properties	Description	Required	Type	API_LEVEL
x	Widget x-coordinate, default 0	NO	number	2.0
y	Widget y-coordinate, default 0	NO	number	2.0
w	Widget width, default screen width	NO	number	2.0
h	Widget height, default screen height	NO	number	2.0
scroll_enable	When the layout of widgets in VIEW_CONTAINER exceeds the width/height, it is considered a long page. 0: disable scrolling, you can set container scroll position offset by pos_x or pos_y; 1: allow scrolling (default)	NO	number	2.0
pos_x	When VIEW_CONTAINER is a long horizontal page layout, you can read/set the horizontal offset	NO	number	2.0
pos_y	When VIEW_CONTAINER is a long vertical page layout, you can read/set the vertical offset	NO	number	2.0
z_index	When using multiple VIEW_CONTAINER widgets, the cascading relationship can be controlled by this field, with 0 at the bottom by default	NO	number	2.0
scroll_frame_func	During scrolling, each frame triggers a callback function with signature (frameParams: FrameParams) => void, FrameParams refer below	NO	function	2.0
scroll_complete_func	Callback function at the end of scrolling	NO	function	2.0
bounce	Rebound effect, 0: disabled, 1: enabled (default)	NO	function	3.0

FrameParams: object

Properties	Description	Type	API_LEVEL
type	0: the user is still touching the screen and dragging, 1: the user has let go and is in an inertial scrolling effect	number	2.0
yoffset	y-axis offset pixels	number	3.0

Code example

The code runs as shown in the image at the top of the document, creating two VIEW_CONTAINER widgets

import { createWidget, widget, text_style, align } from '@zos/ui'
import { px } from '@zos/utils'

const getRandomColor = () => {
  const randomArr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']

  function getRandomFromSection(low, high) {
    const RANDOM = Math.random()
    const RANGE = high - low + 1

    return Math.floor(RANDOM * RANGE) + low
  }

  const colorStr = Array.from({ length: 6 }).reduce((prev, curr) => {
    const random = getRandomFromSection(0, 15)
    return prev + randomArr[random]
  }, '0x')

  return Number(colorStr)
}

Page({
  build() {
    createWidget(widget.TEXT, {
      x: px(96),
      y: px(40),
      w: px(288),
      h: px(46),
      color: 0xffffff,
      text_size: px(36),
      align_h: align.CENTER_H,
      align_v: align.CENTER_V,
      text_style: text_style.NONE,
      text: 'VIEW_CONTAINER'
    })

    const viewContainer = createWidget(widget.VIEW_CONTAINER, {
      x: px(0),
      y: px(86),
      w: px(480),
      h: px(400)
    })

    Array.from({ length: 5 }).forEach((_, index) => {
      viewContainer.createWidget(widget.FILL_RECT, {
        x: 0,
        y: px(index * 400),
        w: px(480),
        h: px(400),
        color: getRandomColor()
      })

      viewContainer.createWidget(widget.TEXT, {
        x: px(96),
        y: px(170) + px(index * 400),
        w: px(288),
        h: px(46),
        text_size: px(36),
        color: 0xffffff,
        align_h: align.CENTER_H,
        align_v: align.CENTER_V,
        text: `INDEX: ${index}`
      })
    })

    const viewContainerButton = createWidget(widget.VIEW_CONTAINER, {
      x: px(0),
      y: px(86),
      w: px(480),
      h: px(400),
      z_index: 1,
      scroll_enable: false
    })

    viewContainerButton.createWidget(widget.BUTTON, {
      x: 0,
      y: px(50),
      w: px(200),
      h: px(100),
      text: 'Click',
      radius: px(12),
      normal_color: DEFAULT_COLOR,
      press_color: DEFAULT_COLOR_TRANSPARENT,
      click_func: () => {
        console.log('click button')
      }
    })
  }
})