智慧屏和智能穿戴开发:容器组件div

HarmonyOS应用开发文档更新修改说明:div组件补充示例代码和示例效果图,方便开发者掌握该组件的使用方式

基础容器,用作页面结构的根节点或将内容进行分组。

支持设备

表1 组件的设备支持情况

智慧屏

智能穿戴

支持

支持

权限列表

子组件

支持。

属性

名称

类型

默认值

必填

描述

id

string

-

组件的唯一标识。

style

string

-

组件的样式声明。

class

string

-

组件的样式类,用于引用样式表。

ref

string

-

用来指定指向子元素或子组件的引用信息,该引用将注册到父组件的$refs 属性对象上。

disabled

boolean

false

当前组件是否被禁用,在禁用场景下,组件将无法响应用户交互。

focusable

boolean

true

当前组件是否可以获取焦点。 当focusable设置为true时,可否获焦依赖于是否拥有可获焦的子组件;设置为false时,本身及其子组件都不能获焦。

data

string

-

给当前组件设置data属性,进行相应的数据存储和读取。

事件

名称

参数

描述

touchstart

TouchEvent

手指刚触摸屏幕时触发该事件。

touchmove

TouchEvent

手指触摸屏幕后移动时触发该事件。

touchcancel

TouchEvent

手指触摸屏幕中动作被打断时触发该事件。

touchend

TouchEvent

手指触摸结束离开屏幕时触发该事件。

click

-

点击动作触发该事件。

longpress

-

长按动作触发该事件。

focus

-

获得焦点时触发该事件,span组件无法获取焦点。

blur

-

失去焦点时触发该事件,span组件无法失去焦点。

key

KeyEvent

智慧屏特有的按键事件,当用户操作遥控器按键时触发。

  • 返回true表示页面自己处理按键事件。
  • 返回false表示使用默认的按键事件逻辑。
  • 不返回值作为false处理。

样式

名称

类型

默认值

必填

描述

flex-direction

string

row

flex容器主轴方向。可选项有:

  • column:垂直方向从上到下
  • row:水平方向从左到右

flex-wrap

string

nowrap

flex容器是单行还是多行显示,该值暂不支持动态修改。可选项有:

  • nowrap:不换行,单行显示。
  • wrap:换行,多行显示。

justify-content

string

flex-start

flex容器当前行的主轴对齐格式。可选项有:

  • flex-start:项目位于容器的开头。
  • flex-end:项目位于容器的结尾。
  • center:项目位于容器的中心。
  • space-between:项目位于各行之间留有空白的容器内。
  • space-around:项目位于各行之前、之间、之后都留有空白的容器内。

align-items

string

stretch

flex容器当前行的交叉轴对齐格式,可选值为:

  • stretch:弹性元素被在交叉轴方向被拉伸到与容器相同的高度或宽度。
  • flex-start:元素向交叉轴起点对齐。
  • flex-end:元素向交叉轴终点对齐。
  • center:元素在交叉轴居中。

align-content

string

flex-start

交叉轴中有额外的空间时,多行内容对齐格式,可选值为:

  • flex-start:所有行从交叉轴起点开始填充。第一行的交叉轴起点边和容器的交叉轴起点边对齐。接下来的每一行紧跟前一行。
  • flex-end:所有行从交叉轴末尾开始填充。最后一行的交叉轴终点和容器的交叉轴终点对齐。同时所有后续行与前一个对齐。
  • center:所有行朝向容器的中心填充。每行互相紧挨,相对于容器居中对齐。容器的交叉轴起点边和第一行的距离相等于容器的交叉轴终点边和最后一行的距离。
  • space-between:所有行在容器中平均分布。相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的边对齐。
  • space-around:所有行在容器中平均分布,相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。

display

string

flex

确定该元素视图框的类型,该值暂不支持动态修改。可选值为:

  • flex:弹性布局
  • grid:网格布局
  • none:不渲染此元素

grid-template-[columns|rows]

string

1行1列

用于设置当前网格布局行和列的数量,不设置时默认1行1列,仅当display为grid时生效。

示例:如设置grid-template-columns为:

(1) 50px 100px 60px:分三列,第一列50px,第二列100px,第三列60px;

(2) 1fr 1fr 2fr:分三列,将父组件允许的宽分为4等份,第一列占1份,第二列占一份,第三列占2份;

(3) 30% 20% 50%:分三列,将父组件允许的宽为基准,第一列占30%,第二列占20%,第三列占50%;

(4) repeat(2,100px):分两列,第一列100px,第二列100px;

(5) auto 1fr 1fr:分三列,第一列自适应内部子组件所需宽度,剩余空间分为两等份,第二列占一份,第三列占一份。

grid-[columns|rows]-gap

<length>

0

用于设置行与行的间距或者列与列的间距,也可以支持通过grid-gap设置相同的行列间距,仅当display为grid时生效。

grid-row-[start|end]

number

-

用于设置当前元素在网格布局中的起止行号,仅当父组件display样式为grid时生效(仅div支持display样式设置为grid)。

grid-column-[start|end]

number

-

用于设置当前元素在网格布局中的起止列号,仅当父组件display样式为grid时生效(仅div支持display样式设置为grid)。

width

<length> | <percentage>

-

设置组件自身的宽度。

缺省时使用元素自身内容需要的宽度。

height

<length> | <percentage>

-

设置组件自身的高度。

缺省时使用元素自身内容需要的高度。

padding

<length>

0

使用简写属性设置所有的内边距属性。

该属性可以有1到4个值:
  • 指定一个值时,该值指定四个边的内边距。

  • 指定两个值时,第一个值指定上下两边的内边距,第二个指定左右两边的内边距。

  • 指定三个值时,第一个指定上边的内边距,第二个指定左右两边的内边距,第三个指定下边的内边距。

  • 指定四个值时分别为上、右、下、左边的内边距(顺时针顺序)。

padding-[left|top|right|bottom]

<length>

0

设置左、上、右、下内边距属性。

padding-[start|end]

<length>

0

设置起始和末端内边距属性。

margin

<length>

0

使用简写属性设置所有的外边距属性,该属性可以有1到4个值。

  • 只有一个值时,这个值会被指定给全部的四个边。

  • 两个值时,第一个值被匹配给上和下,第二个值被匹配给左和右。

  • 三个值时,第一个值被匹配给上, 第二个值被匹配给左和右,第三个值被匹配给下。

  • 四个值时,会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。

margin-[left|top|right|bottom]

<length>

0

设置左、上、右、下外边距属性。

margin-[start|end]

<length>

0

设置起始和末端外边距属性。

border

-

0

使用简写属性设置所有的边框属性,包含边框的宽度,样式,颜色属性,顺序设置为border-width、border-style、border-color,不设置时,各属性值为默认值。

border-style

string

solid

使用简写属性设置所有边框的样式,可选值为:

  • dotted:显示为一系列圆点,圆点半径为border-width的一半。
  • dashed:显示为一系列短的方形虚线。
  • solid:显示为一条实线。

border-[left|top|right|bottom]-style

string

solid

分别设置左、上、右、下四个边框的样式,可选值为dotted、dashed、solid。

border-[left|top|right|bottom]

-

-

使用简写属性设置对应位置的边框属性,包含边框的宽度,样式,颜色属性,顺序设置为border-width、border-style、border-color,不设置的值为默认值。

border-width

<length>

0

使用简写属性设置元素的所有边框宽度,或者单独为各边边框设置宽度。

border-[left|top|right|bottom]-width

<length>

0

分别设置左、上、右、下四个边框的宽度。

border-color

<color>

black

使用简写属性设置元素的所有边框颜色,或者单独为各边边框设置颜色。

border-[left|top|right|bottom]-color

<color>

black

分别设置左、上、右、下四个边框的颜色。

border-radius

<length>

-

border-radius属性是设置元素的外边框圆角半径。设置border-radius时不能单独设置某一个方向的border-[left|top|right|bottom]-width,border-[left|top|right|bottom]-color ,border-[left|top|right|bottom]-style,如果要设置color、width和style,需要将四个方向一起设置(border-width、border-color、border-style)。

border-[top|bottom]-[left|right]-radius

<length>

-

分别设置左上,右上,右下和左下四个角的圆角半径。

background

<linear-gradient>

-

仅支持设置渐变样式,与background-color、background-image不兼容。

background-color

<color>

-

设置背景颜色。

background-image

string

-

设置背景图片。与background-color、background不兼容;支持网络图片资源和本地图片资源地址。

background-size

  • string
  • <length> <length>
  • <percentage> <percentage>

auto

设置背景图片的大小。

  • string可选值:
    • contain:把图像扩展至最大尺寸,以使其高度和宽度完全适用内容区域。
    • cover:把背景图像扩展至足够大,以使背景图像完全覆盖背景区域;背景图像的某些部分也许无法显示在背景定位区域中。
    • auto:保持原图的比例不变。
  • length值参数方式:

    设置背景图像的高度和宽度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。

  • 百分比参数方式:

    以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。

background-repeat

string

repeat

针对重复背景图像样式进行设置,背景图像默认在水平和垂直方向上重复。

  • repeat:在水平轴和竖直轴上同时重复绘制图片。
  • repeat-x:只在水平轴上重复绘制图片。
  • repeat-y:只在竖直轴上重复绘制图片。
  • no-repeat:不会重复绘制图片。

background-position

  • string string
  • <length> <length>
  • <percentage> <percentage>

0px 0px

  • 关键词方式:如果仅规定了一个关键词,那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。
    • left:水平方向上最左侧。
    • right:水平方向上最右侧。
    • top:竖直方向上最顶部。
    • bottom:竖直方向上最底部。
    • center:水平方向或竖直方向上中间位置。
  • length值参数方式:第一个值是水平位置,第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 。如果仅规定了一个值,另外一个值将是50%。
  • 百分比参数方式:第一个值是水平位置,第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值,另外一个值为50%。
  • 可以混合使用<percentage>和<length>

opacity

number

1

元素的透明度,取值范围为0到1,1表示为不透明,0表示为完全透明。

visibility

string

visible

是否显示元素所产生的框。不可见的框会占用布局(将'display'属性设置为'none'来完全去除框),可选值为:

  • visible:元素正常显示。
  • hidden:隐藏元素,但是其他元素的布局不改变,相当于此元素变成透明。

说明

visibility和display样式都设置时,仅display生效。

flex

number

-

规定当前组件如何适应父组件中的可用空间。它作为一个简写属性,用来设置组件的flex-grow。

说明

仅父容器为<div>、<list-item>、<tabs>时生效。

flex-grow

number

0

设置组件的拉伸样式,指定父组件容器主轴方向上剩余空间(容器本身大小减去所有flex子元素占用的大小)的分配权重。0为不伸展。

说明

仅父容器为<div>、<list-item>、<tabs>时生效。

flex-shrink

number

1

设置组件的收缩样式,元素仅在默认宽度之和大于容器的时候才会发生收缩,0为不收缩。

说明

仅父容器为<div>、<list-item>、<tabs>时生效。

flex-basis

<length>

-

设置组件在主轴方向上的初始大小。

说明

仅父容器为<div>、<list-item>、<tabs>时生效。

position

string

relative

设置元素的定位类型,不支持动态变更。

  • fixed:相对与整个界面进行定位。
  • absolute:相对于父元素进行定位。
  • relative:相对于其正常位置进行定位。

说明

absolute属性仅在父容器为<div>、<stack>时生效。

[left|top|right|bottom]

<length>

-

left|top|right|bottom需要配合position样式使用,来确定元素的偏移位置。

  • left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
  • top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
  • right属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。
  • bottom属性规定元素的底部边缘。该属性定义了一个定位元素的下外边距边界与其包含块下边界之间的偏移。

示例

  1. Flex样式
    <!-- xxx.hml -->
    <div class="item-container">
      <div class="flex-div">
        <div class="flex-child color-accent"></div>
        <div class="flex-child color-warning"></div>
        <div class="flex-child color-connected"></div>
      </div>
    </div>
    
    /* xxx.css */
    .item-container {
      flex-direction: column;
      background-color: #ffffff;
    }
    .flex-div {
      justify-content: space-around;
      width: 400px;
    }
    .flex-child {
      width: 120px;
      height: 120px;
      border-radius: 16px;
    }
    .color-accent {
      background-color: #007dff;
    }
    .color-warning {
      background-color: #ff7500;
    }
    .color-connected {
      background-color: #41ba41;
    }
    

     

     

  2. Wrap样式
    <!-- xxx.hml -->
    <div class="container">
      <div class="wrap-div">
        <div class="wrap-child color-accent"></div>
        <div class="wrap-child color-warning"></div>
        <div class="wrap-child color-connected"></div>
      </div>
    </div>
    /* xxx.css */
    .container {
      margin: 24px;
      flex-direction: column;
      background-color: #ffffff;
    }
    .wrap-div {
      flex-wrap: wrap;
      justify-content: space-around;
      width: 300px;
    }
    .wrap-child {
      width: 120px;
      height: 120px;
      border-radius: 16px;
    }
    .color-accent {
      background-color: #007dff;
    }
    .color-warning {
      background-color: #ff7500;
    }
    .color-connected {
      background-color: #41ba41;
    }

     

     

  3. Grid样式
    <!-- xxx.hml -->
    <div class="common grid-parent">
      <div class="grid-child grid-left-top"></div>
      <div class="grid-child grid-left-bottom"></div>
      <div class="grid-child grid-right-top"></div>
      <div class="grid-child grid-right-bottom"></div>
    </div>
    /* xxx.css */
    .common {
      width: 400px;
      height: 400px;
      background-color: #ffffff;
      align-items: center;
      justify-content: center;
      margin: 24px;
    }
    .grid-parent {
      display: grid;
      grid-template-columns: 50% 50%;
      grid-columns-gap: 24px;
      grid-rows-gap: 24px;
      grid-template-rows: 50% 50%;
    }
    .grid-child {
      width: 100%;
      height: 100%;
      border-radius: 8px;
    }
    .grid-left-top {
      grid-row-start: 0;
      grid-column-start: 0;
      grid-row-end: 0;
      grid-column-end: 0;
      background-color: #3f56ea;
    }
    .grid-left-bottom {
      grid-row-start: 1;
      grid-column-start: 0;
      grid-row-end: 1;
      grid-column-end: 0;
      background-color: #00aaee;
    }
    .grid-right-top {
      grid-row-start: 0;
      grid-column-start: 1;
      grid-row-end: 0;
      grid-column-end: 1;
      background-color: #00bfc9;
    }
    .grid-right-bottom {
      grid-row-start: 1;
      grid-column-start: 1;
      grid-row-end: 1;
      grid-column-end: 1;
      background-color: #47cc47;
    }

     

已标记关键词 清除标记