鸿蒙容器组件总结

小冯在努力
417 阅读11分钟

一、总览

1.Column

2.Row

3.Flex

4.Stack

5.Swiper

6.Grid

7.Scroll

8.Tabs

9.Badge

10.WaterFlow

11.List

二、详解

2.1 Colunm

column是线性布局中最常用的布局方式之一，column容器内子元素按照垂直方式排列。主轴方向为垂直方向。可以通过space属性设置布局主方向上子元素的间距，使各子元素在布局上有等间距效果（不能控制子元素到容器边缘的间距）。

2.2 Row

Row也是线性布局中最常用的布局之一，row容器内子元素按照水平方向排列。主轴方向为水平方向。Row也可以通过space设置子元素的间距。

2.3 Flex

Flex的wrap属性控制当子元素尺寸之和大于容器主轴尺寸时，Flex是单行布局还是多行布局。在多行布局时，通过交叉轴方向确认新行排列。

2.4 层叠（堆叠）布局

层叠布局通过Stack容器组件实现位置的固定与层叠，容器中的子元素依次入栈，后一个子元素覆盖前一个子元素，子元素可以叠加，也可以设置位置。

子元素的显示级数可以通过ZIndex（数字）控制，数字越大，显示级数越高。

可以通过 alignContent 来设置子组件的位置。

2.5 Swiper

2.5.1 概述

Swiper是一个轮播图组件，可以对设置的多个子组件进行轮播展示。

Swiper如果设置了尺寸，内容会拉伸为和Swiper一致（优先级高），如果设置内容尺寸，会将Swiper撑开。

Swiper的子组件（图片地址，一般是网络地址）有两种完成方式：一种是在Swiper组件内直接使用Image写入图片地址，另一种是将图片地址写成数组，然后使用ForEach循环遍历这个数据。。

2.5.2 Swiper常用属性

a. loop 是否开启循环，设置为true时表示开启循环，默认值为true。

b. autoPlay 子组件是否自动播放。默认值为false。 loop为false时，自动轮播到最后一页时停止。

c. interval 使用自动播放时播放的时间间隔，单位为毫秒。默认3000

d. vertical 是否纵向滑动。默认false

2.5.3 导航点

.indicator(false) //关闭导航点

**.indicator(
Indicator.dot()
.xxx(设置圆点指示器的属性)
) // 圆点指示器（默认）**

导航点的位置可以通过left、rigght、top、buttom设置四个方向的距离。

itemWith和itemHight 设置Swiper组件圆点导航指示器的宽高，不支持设置百分比，默认值6。

selectedItemWith和selectedItemHight 设置选中Swiper组件圆点导航指示器的宽高，不支持设置百分比，默认值12。

color 设置Swiper组件圆点导航指示器的颜色， selectedColor 设置选中Swiper组件圆点导航指示器的颜色。

.indicator(Indicator.digit()) // 数字指示器(了解)

2.6 Grid

2.6.1 概述

如果布局是由很多的行和列所组成（如计算器的键盘）。行列可能需要合并甚至滚动，就可以使用网格布局。

Gird内只能使用GridItem，需要展示的内容设置在GridItem内部，GridItem内只能有一个子组件。

网格布局可以分为如下几部分：1.固定行列（不滚动） 2.合并行列（不滚动） 3.设置滚动 4.代码控制滚动 5.自定义滚动条

1.固定行列（不滚动）

image.png 同时设置Gird的属性columnsTemplate和rowsTemplate，前者设置当前网格布局列的数量或最小列宽值，默认1列，例如 .columnsTemplate('1fr 2fr 1fr')，将父组件分为3列，父组件允许的宽分为4等份，第一列占一份，第二列占两份，第三列占一份，中间空格隔开，后者设置当前网格布局行的数量或最小行高值，默认1行，用法与前者相同。

columnsGap设置列与列之间的间距，rowsGap设置行与行的间距。

2.合并行列（不滚动）

image.png 使用FridItem的如下属性即可完成： rowStart——指定当前元素起始行号

rowEnd——指定当前元素终点行号

columnStart——指定当前元素起始列号

columnEnd——指定当前元素终点列号

image.png

3.设置滚动

  1. 水平滚动：设置的是rowsTemplate，Grid的滚动方向为水平方向。

  2. 垂直滚动：设置的是columnsTemplate，Grid的滚动方向为垂直方向

4.代码控制滚动

核心步骤：

  1. 创建 Scroller 对象（控制器对象）
  2. 设置给 Grid
  3. 调用 Scroller 对象的 scrollPage 方法
// 1.创建 Scroller 对象（new 关键字，调用Scroller函数，返回一个Scroller的对象）
scroller: Scroller = new Scroller()

//  2.设置给 Grid
 Grid(this.scroller) {
   // ...
 }

// 3.调用 Scroller 对象的  scrollPage 方法即可实现滚动
this.scroller.scrollPage({
  next:true // 下一页
  next:false // 上一页
})
5.自定义滚动条

核心步骤：

  1. 隐藏默认滚动条

    scrollBar 设置滚动条状态 默认值：BarState.auto

    BarState.off 关闭

    BarState.on 常驻

    BarState.auto 按需显示

  2. 使用ScrollBar组件自定义滚动条

    a. ScrollBar 和 Grid 设置同一个 Scroller（控制器对象）

    b. 通过 参数 和 属性控制 ScrollBar

    scroller——可滚动组件的控制器。用于与可滚动组件进行绑定。

    direction——滚动条的方向，控制可滚动组件对应方向的滚动。

    state——滚动条状态。 默认值：BarState.Auto

ScrollBar({
        scroller: this.scroller,// 和 Grid 同一个控制器对象
        direction: ScrollBarDirection.Horizontal,
      }) {
        Text()
          .width(40)
          .height(20)
          .backgroundColor(Color.Orange)
      }
      .width(200)
      .height(20)
      .backgroundColor(Color.Red)

2.7 Scroll

2.7.1 概述

可滚动的容器组件，当子组件的布局尺寸超过Scroll的尺寸时，内容可以滚动。 当页面内容由多个区域组成，并且可以滚动时，推荐使用 Scroll。Scroll只支持一个子组件。

2.7.2 属性

scrollable 设置滚动方向

scrollBar设置滚动条状态（一般关闭）

scrollWidth滚动条宽度

scrollColor颜色（宽度和颜色一般不设置）

edgeEffect 设置边缘滑动效果

2.7.3 Scroll的控制器

日常开发中可能需要通过代码控制滚动，以及获取滚动的距离，比如：

  1. 页面滚动超过一定距离，显示返回顶部(火箭)，反之隐藏--获取滚动距离
  2. 点击返回顶部(火箭)，返回顶部--代码控制滚动

可以通过Scroll的控制器实现，使用scrollEdge（滚动到边缘）和currentOffseet（返回当前偏移量）

Edge.Top和Edge.Start表现相同，Edge.Bottom和Edge.End表现相同。

this.scroller.currentOffset().xOffset // x 轴滚动距离 this.scroller.currentOffset().yOffset // y 轴滚动距离

  1. 创建 Scroller 控制器 scroller: Scroller = new Scroller()

  2. 设置给Scroll Scroll(this.scroller) { // 内容略 }

onScroll(event: (xOffset: number, yOffset: number) => void) 滚动事件回调, 返回滚动时水平、竖直方向偏移量。结合 scroller的currentOffset方法 获取滚动距离。如超过一定距离显示返回顶部按钮，反之隐藏。

2.8 Tabs

2.8.1 概述

导航栏，常见于应用软件底部。

Tabs() { // 顶级容器
      TabContent() {
        // 内容区域：只能有一个子组件
      }
      .tabBar('首页') // 导航栏
    }
     .barMode(BarMode.Scrollable)// （导航栏）滚动

可以使用ForEach循环遍历数组循环渲染。

2.8.2 Tabs属性

  • vertical 属性即可调整导航为 水平 或 垂直
  • barPosition 即可调整导航位置为 开头 或 结尾
  • scrollable 即可调整是否允许 页面滑动切换
  • animationDuration 设置动画时间 毫秒

2.8.3 ### 2.4.2. 自定义 tabBar-Tabs组件的事件

实现高亮效果：

1.onChange(event: (index: number) => void) Tab页签切换后触发的事件。 index：当前显示的index索引，索引从0开始计算。滑动切换、点击切换 均会触发

2.onTabBarClick(event: (index: number) => void) Tab页签点击后触发的事件。index：被点击的index索引，索引从0开始计算。

2.9 Badge

2.9.1 概述

可以附加在单个组件上用于信息标记的容器组件（如微信消息提示红点），只支持单个子元素

Badge({count:0,style:{}}){
    // 单个子元素
  }

2.9.2 属性

count 设置消息提示数 小于等于0时显示红点

position设置提示点显示位置

maxCount 最大消息数，默认值99 style 设置文本颜色、尺寸、圆点颜色和尺寸

2.10 WaterFlow

2.10.1 概述

瀑布流容器，由“行”和“列”分割的单元格所组成，通过容器自身的排列规则，将不同大小的“项目”自上而下，如瀑布般紧密布局，比如淘宝首页商品页。

WaterFlow 组件的用法和Grid组件类似，这里只演示最核心的用法：实现竖直方向的瀑布流

WaterFlow({参数}) {
  FlowItem() {
    // 子组件
  }
  FlowItem() {
    // 子组件
  }
}
  .属性()

2.10.2 常用参数

footer 设置WaterFlow尾部组件。

scroller 可滚动组件的控制器，与可滚动组件绑定。不允许和其他滚动类组件，如：List、Grid、Scroll等绑定同一个滚动控制对象。

2.10.3 常用属性

columnsTemplate、rowsTemplate、columnsGap、rowsGap、scrollBar、edgeEffect。

2.11 List

2.11.1概述

当列表项达到一定数量，超过List容器组件大小时，可以自动提供滚动功能.适合用于呈现同类数据类型或数据类型集，例如图片和文本。在列表中显示数据集合是许多应用程序中的常见要求（如通讯录、音乐列表、购物清单等）。List 表示列表容器，ListItem表示单个列表项，可以包含单个子组件

List() {
  // 只能包含listItem
	listItem() {
    只能有一个根组件
  }
  .....
}
.scrollBar(BarState.Off)

三、布局

3.1 padding

在组件内添加间距，拉开内容与组件边缘之间的距离 .padding(数字或{})

  • 对象{}：配合 left、right、top、bottom 单独设置某个方向内边距

3.2 margin

在组件外面添加间距，拉开两个组件之间的距离

.margin(数字或{}) 与padding类似

3.3 主轴

以 Row 为例，主轴在水平方向，交叉轴在垂直方向 justifyContent(枚举FlexAlign)

image.png

3.3 交叉轴

3.3.1 全部元素

以row为例

alignItems(枚举类型VerticalAlign)

注意：布局容器在交叉轴要有足够空间，否则无法生效

image.png

3.3.2 单个子元素交叉轴对齐方式

alignSelf(枚举ItemAlign)

3.4 自适应缩放

父容器尺寸确定时，设置了 layoutWeight 属性的子元素与兄弟元素占主轴尺寸按照权重进行分配。

layoutWeight(数字)，只有一个子元素设置该尺寸数字可以大于等于1，但一般写1

3.5 定位

3.5.1 绝对定位

position，相对父组件左上角进行偏移

position( {x: 水平偏移量, y: 垂直偏移量} )

绝对定位特点：

  1. 参照父组件左上角进行偏移
  2. 绝对定位后的组件不再占用自身原有位置

3.5.2 相对定位

offset( {x: 水平偏移量, y: 垂直偏移量} )

3.6 背景属性

backgroundColor 背景色

backgroundImage 背景图 背景图平铺方式 ImageRepeat

背景图平铺方式：（可省略）

  • NoRepeat：不平铺，默认值
  • X：水平平铺
  • Y：垂直平铺
  • XY：水平垂直均平铺

backgroundImageSize 背景图尺寸

{width: 数值, height: 数值}（只设置宽或高，另一个尺寸等比例缩放）

backgroundImagePosition 背景图位置，默认显示位置为组件左上角

3.7 颜色渐变

3.7.1 线性渐变

linearGradient({
	angle?:  线性渐变的起始角度,
	direction?: 线性渐变的方向,
	colors: [[颜色1, 颜色1所处位置], [颜色2, 颜色2所处位置], ......],
	repeating?: 是否重复着色
})

3.7.2 径向渐变

radialGradient({
	center:  径向渐变的中心点坐标,
	radius: 径向渐变的半径,
	colors: [[颜色1, 颜色1所处位置], [颜色2, 颜色2所处位置], ......],
	repeating?: 是否重复着色
})

3.8 阴影

shadow({
  radius: 模糊半径,
  type?: 阴影类型,
  color?: 阴影颜色,
  offsetX?: X轴偏移,
  offsetY?: Y轴偏移,
  fill?: 是否内部填充
})

3.9 多态样式

.stateStyles({
        pressed: {
          .width(200)
        }
      })

3.9.1 参数

normal 组件无状态时的样式（默认状态）

pressed 组件按下状态的样式

disabled 组件禁用状态的样式

focused 组件获焦状态的样式

clicked 组件点击状态的样式

3.10 动画 animation

可以通过属性动画实现渐变过渡效果，提升用户体验。支持的属性包括width、height、backgroundColor、opacity、scale、rotate、translate等。

.animation({
        duration: 2000,
        // 速度曲线
        curve: curves.springMotion(),
        delay: 1000,
        iterations: -1
      })

3.10.1 参数

duration 设置动画时长。

默认值：1000

单位：毫秒

curve 设置动画曲线

默认值：Curve.EaseInOut

delay 设置动画延迟执行的时长。

默认值：0，不延迟播放。

单位：毫秒

iterations 设置播放次数。

默认值：1

设置为-1时表示无限次播放。设置为0时表示无动画效果。

3.11 图形变换

3.11.1 平移

可使组件在以组件左上角为坐标原点的坐标系中进行移动

image.png

.translate({x: 100})

3.11.2 缩放

分别设置X轴、Y轴、Z轴的缩放比例，默认值为1

.stateStyles({
          normal: {
            .scale({x:1, y: 1})
          },
          pressed: {
            .scale({x: 0.8, y: 0.8})
          }
        })

3.11.3 旋转

可使组件进行旋转

.stateStyles({
          normal: {
            .rotate({angle: 0})
          },
          pressed: {
            .rotate({angle: 60})
          }
        })
avatar
文章
阅读
粉丝