OpenHarmony应用开发-容器组件ListItem/Navigator/Panel

素年锦时静待君丶
发布于 2023-4-17 18:26
浏览
0收藏

版本:v3.2 Release

ListItem

用来展示列表具体item,必须配合List来使用。

说明:

该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

子组件

可以包含单个子组件。

接口

ListItem(value?: string)

从API version 9开始,该接口支持在ArkTS卡片中使用。

属性

除支持​​通用属性​​外,还支持以下属性:

名称

参数类型

描述

sticky(deprecated)

​Sticky​

设置ListItem吸顶效果。

默认值:Sticky.None

从API version9开始废弃,推荐使用​​List组件sticky属性​​。

editable

boolean | ​​EditMode​

当前ListItem元素是否可编辑,进入编辑模式后可删除或移动列表项。

默认值:false

selectable8+

boolean

当前ListItem元素是否可以被鼠标框选。

说明:

外层List容器的鼠标框选开启时,ListItem的框选才生效。

默认值:true

swipeAction9+

{

start?: CustomBuilder,

end?:CustomBuilder,

edgeEffect?: ​​SwipeEdgeEffect​​,

}

用于设置ListItem的划出组件。

- start: ListItem向右划动时item左边的组件(List垂直布局时)或ListItem向下划动时item上方的组件(List水平布局时)。

- end: ListItem向左划动时item右边的组件(List垂直布局时)或ListItem向上划动时item下方的组件(List水平布局时)。

- edgeEffect: 滑动效果。

说明:

start和end对应的@builder函数中顶层必须是单个组件,不能是if/else、ForEach、LazyForEach语句。

Sticky(deprecated)枚举说明

从API version9开始废弃,推荐使用​​List组件stickyStyle枚举​​。

名称

描述

None

无吸顶效果。

Normal

当前item吸顶。

Opacity

当前item吸顶显示透明度变化效果。

EditMode枚举说明

名称

描述

None

编辑操作不限制。

Deletable

可删除。

Movable

可移动。

SwipeEdgeEffect9+枚举说明

名称

描述

Spring

ListItem划动距离超过划出组件大小后可以继续划动,松手后按照弹簧阻尼曲线回弹。

None

ListItem划动距离不能超过划出组件大小。

事件

名称

功能描述

onSelect(event: (isSelected: boolean) => void)8+

ListItem元素被鼠标框选的状态改变时触发回调。

isSelected:进入鼠标框选范围即被选中返回true, 移出鼠标框选范围即未被选中返回false。

示例

// xxx.ets
@Entry
@Component
struct ListItemExample {
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

  build() {
    Column() {
      List({ space: 20, initialIndex: 0 }) {
        ForEach(this.arr, (item) => {
          ListItem() {
            Text('' + item)
              .width('100%').height(100).fontSize(16)
              .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF)
          }
        }, item => item)
      }.width('90%')
    }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })
  }
}

OpenHarmony应用开发-容器组件ListItem/Navigator/Panel-鸿蒙开发者社区

// xxx.ets
@Entry
@Component
struct ListItemExample2 {
  @State message: string = 'Hello World'

  @Builder itemEnd() {
    Row () {
      Button("Del").margin("4vp")
      Button("Set").margin("4vp")
    }.padding("4vp").justifyContent(FlexAlign.SpaceEvenly)
  }

  build() {
    Column() {
      List({space:10}) {
        ListItem() {
          Text(this.message)
          .width('100%')
          .height(100)
          .fontSize(16)
          .textAlign(TextAlign.Center)
          .borderRadius(10)
          .backgroundColor(0xFFFFFF)
        }
        .swipeAction({ end:this.itemEnd})

        ListItem() {
          Text(this.message)
          .width('100%')
          .height(100)
          .fontSize(16)
          .textAlign(TextAlign.Center)
          .borderRadius(10)
          .backgroundColor(0xFFFFFF)
        }
        .swipeAction({ start:this.itemEnd})
      }
    }
    .padding(10)
    .backgroundColor(0xDCDCDC)
    .width('100%')
    .height('100%')
  }
}

OpenHarmony应用开发-容器组件ListItem/Navigator/Panel-鸿蒙开发者社区

ListItemGroup

该组件用来展示列表item分组,宽度默认充满​​List​​组件,必须配合List组件来使用。

说明:

该组件从API Version 9开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

使用说明

当ListItemGroup的父组件List的listDirection属性为Axis.Vertical时,不允许设置ListItemGroup组件的height属性。ListItemGroup的高度为header高度、footer高度和所有ListItem布局后总高度之和。当父组件List的listDirection属性为Axis.Horizontal时,不允许设置ListItemGroup组件的width属性。ListItemGroup的宽度为header宽度、footer宽度和所有ListItem布局后总宽度之和。

当前ListItemGroup内部的ListItem组件不支持编辑、框选、拖拽功能,即ListItem组件的editable、selectable属性不生效。

子组件

包含​​ListItem​​子组件。

接口

ListItemGroup(options?: {header?: CustomBuilder, footer?: CustomBuilder, space?: number | string})

参数:

参数名

参数类型

必填

参数描述

header

​CustomBuilder​

设置ListItemGroup头部组件。

footer

​CustomBuilder​

设置ListItemGroup尾部组件。

space

number | string

列表项间距。只作用于ListItem与ListItem之间,不作用于header与ListItem、footer与ListItem之间。

属性

名称

参数类型

描述

divider

{

strokeWidth: ​​Length​​,

color?: ​​ResourceColor​​,

startMargin?: ​​Length​​,

endMargin?: ​​Length​​} | null

用于设置ListItem分割线样式,默认无分割线。

strokeWidth: 分割线的线宽。

color: 分割线的颜色。

startMargin: 分割线距离列表侧边起始端的距离。

endMargin: 分割线距离列表侧边结束端的距离。

说明:

ListItemGroup组件不支持设置​​通用属性aspectRatio​​。

ListItemGroup组件如果主轴方向是垂直方向时,设置​​通用属性height​​属性不生效。

ListItemGroup组件如果主轴方向是水平方向时,设置​​通用属性width​​属性不生效。

示例

// xxx.ets
@Entry
@Component
struct ListItemGroupExample {
  private timetable: any = [
    {
      title:'星期一',
      projects:['语文', '数学', '英语']
    },
    {
      title:'星期二',
      projects:['物理', '化学', '生物']
    },
    {
      title:'星期三',
      projects:['历史', '地理', '政治']
    },
    {
      title:'星期四',
      projects:['美术', '音乐', '体育']
    }
  ]

  @Builder itemHead(text:string) {
    Text(text)
      .fontSize(20)
      .backgroundColor(0xAABBCC)
      .width("100%")
      .padding(10)
  }

  @Builder itemFoot(num:number) {
    Text('共' + num + "节课")
      .fontSize(16)
      .backgroundColor(0xAABBCC)
      .width("100%")
      .padding(5)
  }

  build() {
    Column() {
      List({ space: 20 }) {
        ForEach(this.timetable, (item) => {
          ListItemGroup({ header:this.itemHead(item.title), footer:this.itemFoot(item.projects.length) }) {
            ForEach(item.projects, (project) => {
              ListItem() {
                Text(project)
                  .width("100%").height(100).fontSize(20)
                  .textAlign(TextAlign.Center).backgroundColor(0xFFFFFF)
              }
            }, item => item)
          }
          .borderRadius(20)
          .divider({ strokeWidth: 1, color: Color.Blue }) // 每行之间的分界线
        })
      }
      .width('90%')
      .sticky(StickyStyle.Header|StickyStyle.Footer)
    }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })
  }
}

OpenHarmony应用开发-容器组件ListItem/Navigator/Panel-鸿蒙开发者社区

Navigator

路由容器组件,提供路由跳转能力。

说明:

该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

子组件

可以包含子组件。

接口

Navigator(value?: {target: string, type?: NavigationType})

参数:

参数名

参数类型

必填

参数描述

target

string

指定跳转目标页面的路径。

type

​NavigationType​

指定路由方式。

默认值:NavigationType.Push

NavigationType枚举说明

名称

描述

Push

跳转到应用内的指定页面。

Replace

用应用内的某个页面替换当前页面,并销毁被替换的页面。

Back

返回到指定的页面。指定的页面不存在栈中时不响应。未传入指定的页面时返回上一页。

属性

名称

参数

描述

active

boolean

当前路由组件是否处于激活状态,处于激活状态时,会生效相应的路由操作。

params

object

跳转时要同时传递到目标页面的数据,可在目标页面使用​​router.getParams()​​获得。

target

string

设置跳转目标页面的路径。 目标页面需加入main_pages.json文件中。

type

​NavigationType​

设置路由方式。

默认值:NavigationType.Push

示例

// Navigator.ets
@Entry
@Component
struct NavigatorExample {
  @State active: boolean = false
  @State Text: object = {name: 'news'}

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) {
      Navigator({ target: 'pages/container/navigator/Detail', type: NavigationType.Push }) {
        Text('Go to ' + this.Text['name'] + ' page')
          .width('100%').textAlign(TextAlign.Center)
      }.params({ text: this.Text }) // 传参数到Detail页面

      Navigator() {
        Text('Back to previous page').width('100%').textAlign(TextAlign.Center)
      }.active(this.active)
      .onClick(() => {
        this.active = true
      })
    }.height(150).width(350).padding(35)
  }
}
    ts

// Detail.ets
import router from '@ohos.router'

@Entry
@Component
struct DetailExample {
  // 接收Navigator.ets的传参
  @State text: any = router.getParams()['text']

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) {
      Navigator({ target: 'pages/container/navigator/Back', type: NavigationType.Push }) {
        Text('Go to back page').width('100%').height(20)
      }

      Text('This is ' + this.text['name'] + ' page')
        .width('100%').textAlign(TextAlign.Center)
    }
    .width('100%').height(200).padding({ left: 35, right: 35, top: 35 })
  }
}

// Back.ets
@Entry
@Component
struct BackExample {
  build() {
    Column() {
      Navigator({ target: 'pages/container/navigator/Navigator', type: NavigationType.Back }) {
        Text('Return to Navigator Page').width('100%').textAlign(TextAlign.Center)
      }
    }.width('100%').height(200).padding({ left: 35, right: 35, top: 35 })
  }
}

OpenHarmony应用开发-容器组件ListItem/Navigator/Panel-鸿蒙开发者社区

Panel

可滑动面板,提供一种轻量的内容展示窗口,方便在不同尺寸中切换。

说明:

该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

子组件

可以包含子组件。

说明:

子组件类型:系统组件和自定义组件,支持渲染控制类型(​​if/else​​​、​​ForEach​​​和​​LazyForEach​​)。

接口

Panel(show: boolean)

参数:

参数名

参数类型

必填

参数描述

show

boolean

控制Panel显示或隐藏。

说明:

如果设置为false时,则不占位隐藏。​​Visible.None​​或者show之间有一个生效时,都会生效不占位隐藏。

属性

除支持​​通用属性​​外,还支持以下属性:

名称

参数类型

描述

type

​PanelType​

设置可滑动面板的类型。

默认值:PanelType.Foldable

mode

​PanelMode​

设置可滑动面板的初始状态。

Minibar类型默认值:PanelMode.Mini;其余类型默认值:PanelMode.Half

dragBar

boolean

设置是否存在dragbar,true表示存在,false表示不存在。

默认值:true

fullHeight

string | number

指定PanelMode.Full状态下的高度。

默认值:当前组件主轴大小减去8vp空白区

说明:

不支持设置百分比。

halfHeight

string | number

指定PanelMode.Half状态下的高度。

默认值:当前组件主轴大小的一半。

说明:

不支持设置百分比。

miniHeight

string | number

指定PanelMode.Mini状态下的高度。

默认值:48

单位:vp

说明:

不支持设置百分比。

show

boolean

当滑动面板弹出时调用。

backgroundMask9+

​ResourceColor​

指定Panel的背景蒙层。

PanelType枚举说明

名称

描述

Minibar

提供minibar和类全屏展示切换效果。

Foldable

内容永久展示类,提供大(类全屏)、中(类半屏)、小三种尺寸展示切换效果。

Temporary

内容临时展示区,提供大(类全屏)、中(类半屏)两种尺寸展示切换效果。

PanelMode枚举说明

名称

描述

Mini

类型为minibar和foldable时,为最小状态;类型为temporary,则不生效。

Half

类型为foldable和temporary时,为类半屏状态;类型为minibar,则不生效。

Full

类全屏状态。

事件

除支持​​通用事件​​外,还支持以下事件:

名称

功能描述

onChange(event: (width: number, height: number, mode: PanelMode) => void)

当可滑动面板发生状态变化时触发, 返回的height值为内容区高度值,当dragbar属性为true时,panel本身的高度值为dragbar高度加上内容区高度。

onHeightChange(callback: (value: number) => void)9+

当可滑动面板发生高度变化时触发,返回的height值为内容区高度值,默认返回值单位为px。当dragbar属性为true时,panel本身的高度值为dragbar高度加上内容区高度。因用户体验设计原因,panel最高只能滑到 fullHeight-8vp。

示例

// xxx.ets
@Entry
@Component
struct PanelExample {
  @State show: boolean = false

  build() {
    Column() {
      Text('2021-09-30    Today Calendar: 1.afternoon......Click for details')
        .width('90%').height(50).borderRadius(10)
        .backgroundColor(0xFFFFFF).padding({ left: 20 })
        .onClick(() => {
          this.show = !this.show
        })
      Panel(this.show) { // 展示日程
        Column() {
          Text('Today Calendar')
          Divider()
          Text('1. afternoon 4:00 The project meeting')
        }
      }
      .type(PanelType.Foldable).mode(PanelMode.Half)
      .dragBar(true) // 默认开启
      .halfHeight(500) // 默认一半
      .onChange((width: number, height: number, mode: PanelMode) => {
        console.info(`width:${width},height:${height},mode:${mode}`)
      })
    }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })
  }
}

OpenHarmony应用开发-容器组件ListItem/Navigator/Panel-鸿蒙开发者社区



文章转载自:​​https://docs.openharmony.cn/pages/v3.2/zh-cn/application-dev/reference/arkui-ts/ts-container-panel.md/​

已于2023-4-17 18:26:45修改
收藏
回复
举报
回复
    相关推荐