HarmonyOS中的常用组件

慕青苑
272 阅读5分钟

前言

上一篇我写了一点项目基本结构和一些开发中的基本语法与组件，但是实际开发中靠那几个组件是完全不够的。同时虽然鸿蒙官网给我们提供了几十个组件，但是相信大家也懒得去一个个看吧🤭。下面我会列举一些我学习到的常用的组件，当然肯定没有包含全，如果想了解更多可以-->点击查看😎。当然值得一提我是跟着传智的博学谷的鸿蒙教程，如果有读者想要了解的可以私聊我(本人坚决不是打广告👻).下面让我们开始干货分享吧。

其他常用组件

1. List列表复杂容器

List的特点：

  1. ListItem 列表项数量过多超出屏幕后，会自动提供滚动功能
  2. ListItem 列表项即可以横向排列，也可以纵向排列

语法：

List(){
​
ListItem(){} // 注意列表项内容只能包含一个根组件
​
}

改变排列方向：listDirection(Axis.Vertical/Axis.Horizontal)

      List({space: 8}){
        ForEach(
          this.items,
          (item: Item) => {
            ListItem(){
              this.ItemCard(item)
            }
          }
        )
      }
      .width('100%')
      .layoutWeight(1)

2. Blank空白填充组件

空白填充组件，在容器主轴方向上，空白填充组件具有自动填充容器空余部分的能力。仅当父组件为Row/Column时生效。

// xxx.ets
@Entry
@Component
struct BlankExample {
  build() {
    Column() {
      Row() {
        Text('Bluetooth').fontSize(18)
        Blank()
        Toggle({ type: ToggleType.Switch })
      }.width('100%').backgroundColor(0xFFFFFF).borderRadius(15).padding({ left: 12 })
    }.backgroundColor(0xEFEFEF).padding(20)
  }
}

3. 进度条组件

进度条组件，用于显示内容加载或操作处理等进度。

语法：Progress({value,total,type})

  1. value:指定当前进度值。设置小于0的数值时置为0，设置大于total的数值时置为total。
  2. total: 指定进度总长。默认值：100
  3. type: 指定进度条类型。默认值：ProgressType.Linear
          Progress({
            value:this.finishTask,
            total: this.totalTask,
            type: ProgressType.Ring
          })

4. 堆叠容器组件Stack

堆叠容器，子组件按照顺序依次入栈，后一个子组件覆盖前一个子组件。

用法就是直接把子组件依次放在里面就行

Stack(){
          Progress({
            value:this.finishTask,
            total: this.totalTask,
            type: ProgressType.Ring
          })
          Row(){
            Text(this.finishTask.toString())
              .fontSize(24)
              .fontColor('#36d')
            Text(' / ' + this.totalTask.toString())
              .fontSize(24)
          }
        }

若需要修改第二个元素堆叠位置，使用alignContent属性

Stack({alignContent:Alignment.Bottom}){}

5. Grid布局组件

网格容器，由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。

使用时要和GirdItem组件一起使用

属性：

  1. columnsTemplate：设置当前网格布局列的数量，不设置时默认1列。例如， '1fr 1fr 2fr' 是将父组件分3列，将父组件允许的宽分为4等份，第一列占1份，第二列占1份，第三列占2份。
  2. rowsTemplate：设置当前网格布局行的数量，不设置时默认1行。例如，'1fr 1fr 2fr'是将父组件分三行，将父组件允许的高分为4等份，第一行占1份，第二行占一份，第三行占2份。
  3. columnsGap：设置列与列的间距。默认值：0
  4. rowsGap：设置行与行的间距。默认值：0

注意：当使用时，不设置rowsTemplate/columnsTemplate属性时，Grid组件就可以滑动。

Grid(){
          ForEach([1,2,3,4,5,6,7,8,9,], (item, index) => {
            GridItem(){
              Text(item.toString())
                .fontSize(20)
                .height(50)
            }
          })
        }
        .width('100%')
        .height(100)
        .columnsTemplate('1fr 1fr 1fr 1fr')
        // .rowsTemplate('1fr 1fr 1fr')
        .rowsGap(20)
        .columnsGap(20)

6. Tabs视图切换的容器组件

通过页签进行内容视图切换的容器组件，每个页签对应一个内容视图。

语法：Tabs(){ TabContent(){} }

注意：Tabs内部只能包含TabContent

Tabs参数和属性：

参数：

barPosition，可以设置Start和End，在页面的上面或下面。Start：vertical属性方法设置为true时，页签位于容器左侧；vertical属性方法设置为false时，页签位于容器顶部。End：vertical属性方法设置为true时，页签位于容器右侧；vertical属性方法设置为false时，页签位于容器底部。

index,设置当前显示页签的索引。默认值：0

属性：

  • vertical：设置为false是为横向Tabs，设置为true时为纵向Tabs。
  • barWidth:TabBar的宽度值。
  • barHeight:TabBar的高度值。

TabContent组件：

仅在Tabs中使用，对应一个切换页签的内容视图。

属性：

tabBar：设置TabBar上显示内容。类型为 string | Resource| CustomBuilder。

使用事项： TabContent里的内容就是页面上展示的东西，tabBar属性就是切换标签的内容。

Tabs({barPosition:BarPosition.End}){
          TabContent(){
            Text('第一页内容')
              .width(100)
              .height(100)
              .backgroundColor(Color.Pink)
          }
          .tabBar('首页')
          TabContent(){
            Text('第二页内容')
              .width(100)
              .height(100)
              .backgroundColor(Color.Blue)
          }
          .tabBar('分类')
          TabContent(){
            Text('第三页内容')
              .width(100)
              .height(100)
              .backgroundColor(Color.Red)
          }
          .tabBar('我的')
        }
        .vertical(false)
        .barHeight(100)
        .barWidth(100)

7. Scroll组件

可滚动的容器组件，当子组件的布局尺寸超过父组件的尺寸时，内容可以滚动。

语法：Scroll(){}

      Scroll(){
        Column() {
          Tabs({barPosition:BarPosition.End}){
            TabContent(){
              Column(){
                Text('第一页内容')
                  .width(100)
                  .height(100)
                  .backgroundColor(Color.Pink)
                Button('点击弹窗').onClick((event: ClickEvent) => {
                  AlertDialog.show({
                    title: "弹窗",
                    message: "选择呀！！"
                  })
                })
              }
            }
            .tabBar('首页')
            TabContent(){
              Text(){
                Span('第一页内同')
                  .fontColor(Color.Red)
                Span('123')
              }
              .width(100)
              .height(100)
              .backgroundColor(Color.Blue)
            }
            .tabBar('分类')
            TabContent(){
              Text('第三页内容')
                .width(100)
                .height(100)
                .backgroundColor(Color.Red)
            }
            .tabBar('我的')
          }
          .vertical(false)
          .barHeight(100)
        }
        .width('100%')
      }

8. Toggle组件

组件提供勾选框样式、状态按钮样式及开关样式。

语法：Toggle(options: { type: ToggleType, isOn?: boolean })

参数：

  • type：开关的样式。
  • isOn：开关是否打开，true：打开，false：关闭。默认值：false
Toggle({
          type: ToggleType.Switch,
          isOn: this.info
        })
          .onChange((value) => {
            this.info = value
            AlertDialog.show({
              message: this.info + ''
            })
          })

文章是跟着我学习进程进行更新的，只分享学习笔记，希望能帮助到大家！！！ 😁

avatar
文章
阅读
粉丝