鸿蒙HarmonyOS NEXT开发：Popup控制（ArkTS通用属性）

最新推荐文章于 2024-08-18 20:48:41 发布
最新推荐文章于 2024-08-18 20:48:41 发布
阅读量820 收藏 23
点赞数 16
分类专栏： ArkTS 鸿蒙 文章标签： harmonyos 华为 android 驱动开发 鸿蒙 嵌入式硬件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shudaoshanBBQ/article/details/141064227
版权
鸿蒙 同时被 2 个专栏收录
115 篇文章 0 订阅
订阅专栏
ArkTS
110 篇文章 0 订阅
订阅专栏

Popup控制

给组件绑定popup弹窗，并设置弹窗内容，交互逻辑和显示状态。

说明：

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

  • popup弹窗的显示状态在onStateChange事件回调中反馈，其显隐与组件的创建或销毁无强对应关系。

bindPopup

bindPopup(show: boolean, popup: PopupOptions | CustomPopupOptions)

给组件绑定Popup弹窗。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
showboolean是弹窗显示状态，默认值为false，隐藏弹窗。popup弹窗必须等待页面全部构建完成才能展示，因此show不能在页面构建中设置为true，否则会导致popup弹窗显示位置及形状错误。
popupPopupOptions | CustomPopupOptions8+是配置弹出弹窗的参数。

PopupOptions类型说明

名称类型必填描述
messagestring是弹窗信息内容。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
placementOnTop(deprecated)boolean否是否在组件上方显示，默认值为false。
说明：
从 API version 10 开始废弃，建议使用placement替代。
primaryButton{
value: string,
action: () => void
}		否第一个按钮。
value: 弹窗里主按钮的文本。
action: 点击主按钮的回调函数。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
secondaryButton{
value: string,
action: () => void
}		否第二个按钮。
value: 弹窗里辅助按钮的文本。
action: 点击辅助按钮的回调函数。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
onStateChange(event: { isVisible: boolean }) => void否弹窗状态变化事件回调，参数isVisible为弹窗当前的显示状态。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
arrowOffset9+Length否popup箭头在弹窗处的偏移。箭头在气泡上下方时，数值为0表示箭头居最左侧，偏移量为箭头至最左侧的距离，默认居中。箭头在气泡左右侧时，偏移量为箭头至最上侧的距离，默认居中。如果显示在屏幕边缘，气泡会自动左右偏移，数值为0时箭头始终指向绑定组件。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
showInSubWindow9+boolean否是否在子窗口显示气泡，默认值为false。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
mask10+boolean | { color : ResourceColor }否设置气泡是否有遮罩层及遮罩颜色。如果设置为false，则没有遮罩层；如果设置为true，则设置有遮罩层并且颜色为透明色；如果设置为Color，则为遮罩层的颜色。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
messageOptions10+PopupMessageOptions否设置弹窗信息文本参数。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
targetSpace10+Length否设置popup与目标的间隙。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
placement10+Placement否设置popup组件相对于目标的显示位置，默认值为Placement.Bottom。
如果同时设置了placementOnTop和placement，则以placement的设置生效。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
offset10+Position否设置popup组件相对于placement设置的显示位置的偏移。
说明：
不支持设置百分比。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
enableArrow10+boolean否设置是否显示箭头。
默认值：true
说明：
当页面可用空间无法让气泡完全避让时，气泡会覆盖到组件上并且不显示箭头。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
popupColor11+Color  | string | number  |  Resource否提示气泡的颜色。如需去除模糊背景填充效果，需将backgroundBlurStyle设置为BlurStyle.NONE。
默认值：透明色TRANSPARENT加模糊背景填充效果COMPONENT_ULTRA_THICK。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
autoCancel11+boolean否页面有操作时，是否自动关闭气泡。
默认值：true
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
width11+Dimension否弹窗宽度。
说明：
showInSubWindow=true时最大高度为设备屏幕高度，showInSubWindow=false时最大高度为应用窗口高度。高度限定逻辑=最大高度-状态栏高度（没有时高度为0）-dock栏高度（没有时高度为0）-40VP-40VP。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
arrowPointPosition11+ArrowPointPosition否气泡尖角相对于父组件显示位置，气泡尖角在垂直和水平方向上有 ”Start“、”Center“、”End“三个位置点可选。以上所有位置点均位于父组件区域的范围内，不会超出父组件的边界范围。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
arrowWidth11+Dimension否设置箭头宽度。若所设置的箭头宽度超过所在边的长度减去两倍的气泡圆角大小，则不绘制气泡箭头。
默认值：16.0_vp
说明：
不支持设置百分比。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
arrowHeight11+Dimension否设置箭头高度。
默认值：8.0_vp
说明：
不支持设置百分比。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
radius11+Dimension否设置气泡圆角半径。
默认值：20.0_vp
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
shadow11+ShadowOptions | ShadowStyle否设置气泡阴影。
默认值：ShadowStyle.OUTER_DEFAULT_MD
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
backgroundBlurStyle11+BlurStyle否设置气泡模糊背景参数。
默认值：BlurStyle.COMPONENT_ULTRA_THICK
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
transition12+TransitionEffect否自定义设置popup弹窗显示和退出的动画效果。
说明：
1.如果不设置，则使用默认的显示/退出动效。
2.显示动效中按back键，打断显示动效，执行退出动效，动画效果为显示动效与退出动效的曲线叠加后的效果。
3.退出动效中按back键，不会打断退出动效，退出动效继续执行，back键不被响应。
onWillDismiss12+boolean|(dismissPopupAction: DismissPopupAction) => void否设置popup交互式关闭拦截开关及拦截回调函数，默认值为true，popup响应点击、左滑/右滑、三键back。
1.当为boolean类型时，如果设置为false，则不响应点击、左滑/右滑、三键back或键盘ESC退出事件，仅当设置“弹窗显示状态”参数show值为false时才退出；如果设置为true，则正常响应退出事件；
2.如果设置为函数类型，则拦截退出事件且执行回调函数。
说明：
在onWillDismiss回调中，不能再做onWillDismiss拦截。

PopupMessageOptions10+类型说明

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

名称类型必填描述
textColorResourceColor否设置弹窗信息文本颜色。
fontFont否设置弹窗信息字体属性。

DismissPopupAction12+类型说明

名称类型必填描述
dismissfunction是popup关闭回调函数。开发者需要退出时调用，不需要退出时无需调用。
reasonDismissReason是关闭原因，返回本次拦截popup消失的事件原因。

DismissReason12+枚举说明

名称参数描述
PRESS_BACK点击Back键。
TOUCH_OUTSIDE点击组件外部区域。

CustomPopupOptions8+类型说明

名称类型必填描述
builderCustomBuilder是提示气泡内容的构造器。
说明：
popup为通用属性，自定义popup中不支持再次弹出popup。对builder下的第一层容器组件不支持使用position属性，如果使用将导致气泡不显示。builder中若使用自定义组件，自定义组件的aboutToAppear和aboutToDisappear生命周期与popup弹窗的显隐无关，不能使用其生命周期判断popup弹窗的显隐。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
placementPlacement否气泡组件优先显示的位置，当前位置显示不下时，会自动调整位置。
默认值：Placement.Bottom
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
popupColornumber | Color | string | Resource否提示气泡的颜色。如需去除模糊背景填充效果，需将backgroundBlurStyle设置为BlurStyle.NONE。
API version 10，默认值：‘#4d4d4d’
API version 11及以后，默认值：透明色TRANSPARENT加模糊背景填充效果COMPONENT_ULTRA_THICK
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
enableArrowboolean否是否显示箭头。
从API Version 9开始，如果箭头所在方位侧的气泡长度不足以显示下箭头，则会默认不显示箭头。比如：placement设置为Left，此时如果气泡高度小于箭头的宽度（32vp）与气泡圆角两倍（48vp）之和（80vp），则实际不会显示箭头。
默认值：true
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
autoCancelboolean否页面有操作时，是否自动关闭气泡。
默认值：true
说明：
如果要实现点击气泡内消失需要在builder中先放一个布局组件，然后再将Popup高级组件放在布局组件里面，再在布局组件的onClick事件中修改的传入bindPopup的变量（show: boolean）值。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
onStateChange(event: { isVisible: boolean }) => void否弹窗状态变化事件回调，参数为弹窗当前的显示状态。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
arrowOffset9+Length否popup箭头在弹窗处的偏移。箭头在气泡上下方时，数值为0表示箭头居最左侧，偏移量为箭头至最左侧的距离，默认居中。箭头在气泡左右侧时，偏移量为箭头至最上侧的距离，默认居中。如果显示在屏幕边缘，气泡会自动左右偏移，数值为0时箭头始终指向绑定组件。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
showInSubWindow9+boolean否是否在子窗口显示气泡，默认值为false。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
maskColor(deprecated)Resource | string | number |  Color否设置气泡遮罩层颜色。
说明：
从 API version 10 开始废弃，建议使用mask替代。
mask10+boolean | { color : ResourceColor }否设置气泡是否有遮罩层及遮罩颜色。如果设置为false，则没有遮罩层；如果设置为true，则设置有遮罩层并且颜色为透明色；如果设置为Color，则为遮罩层的颜色。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
targetSpace10+Length否设置popup与目标的间隙。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
offset10+Position否设置popup组件相对于placement设置的显示位置的偏移。
说明：
不支持设置百分比。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
width11+Dimension否弹窗宽度。
说明：
showInSubWindow=true时最大高度为设备屏幕高度，showInSubWindow=false时最大高度为应用窗口高度。高度限定逻辑=最大高度-状态栏高度（没有时高度为0）-dock栏高度（没有时高度为0）-40VP-40VP。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
arrowPointPosition11+ArrowPointPosition否气泡尖角相对于父组件显示位置，气泡尖角在垂直和水平方向上有 ”Start“、”Center“、”End“三个位置点可选。以上所有位置点均位于父组件区域的范围内，不会超出父组件的边界范围。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
arrowWidth11+Dimension否设置箭头宽度。若所设置的箭头宽度超过所在边的长度减去两倍的气泡圆角大小，则不绘制气泡箭头。
默认值：16.0_vp
说明：
不支持设置百分比。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
arrowHeight11+Dimension否设置箭头高度。
默认值：8.0_vp
说明：
不支持设置百分比。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
radius11+Dimension否设置气泡圆角半径。
默认值：20.0_vp
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
shadow11+ShadowOptions | ShadowStyle否设置气泡阴影。
默认值：ShadowStyle.OUTER_DEFAULT_MD
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
backgroundBlurStyle11+BlurStyle否设置气泡模糊背景参数。
默认值：BlurStyle.COMPONENT_ULTRA_THICK
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
focusable11+boolean否设置气泡弹出后是否获焦。
默认值：false
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
transition12+TransitionEffect否自定义设置popup弹窗显示和退出的动画效果。
说明：
如果不设置，则使用默认的显示/退出动效。
2.显示动效中按back键，打断显示动效，执行退出动效，动画效果为显示动效与退出动效的曲线叠加后的效果。
3.退出动效中按back键，不会打断退出动效，退出动效继续执行，back键不被响应。
onWillDismiss12+boolean|(dismissPopupAction: DismissPopupAction) => void否设置popup交互式关闭拦截开关及拦截回调函数，默认值为true，popup响应点击、左滑/右滑、三键back。
1.当为boolean类型时，如果设置为false，则不响应点击、左滑/右滑、三键back或键盘ESC退出事件，仅当设置“弹窗显示状态”参数show值为false时才退出；如果设置为true，则正常响应退出事件；
2.如果设置为函数类型，则拦截退出事件且执行回调函数。
说明：
在onWillDismiss回调中，不能再做onWillDismiss拦截。

示例

示例1

// xxx.ets
@Entry
@Component
struct PopupExample {
  @State handlePopup: boolean = false
  @State customPopup: boolean = false

  // popup构造器定义弹框内容
  @Builder popupBuilder() {
    Row({ space: 2 }) {
      Image($r("app.media.icon")).width(24).height(24).margin({ left: -5 })
      Text('Custom Popup').fontSize(10)
    }.width(100).height(50).padding(5)
  }

  build() {
    Flex({ direction: FlexDirection.Column }) {
      // PopupOptions 类型设置弹框内容
      Button('PopupOptions')
        .onClick(() => {
          this.handlePopup = !this.handlePopup
        })
        .bindPopup(this.handlePopup, {
          message: 'This is a popup with PopupOptions',
          placementOnTop: true,
          showInSubWindow:false,
          primaryButton: {
            value: 'confirm',
            action: () => {
              this.handlePopup = !this.handlePopup
              console.info('confirm Button click')
            }
          },
          // 第二个按钮
          secondaryButton: {
            value: 'cancel',
            action: () => {
              this.handlePopup = !this.handlePopup
              console.info('cancel Button click')
            }
          },
          onStateChange: (e) => {
            console.info(JSON.stringify(e.isVisible))
            if (!e.isVisible) {
              this.handlePopup = false
            }
          }
        })
        .position({ x: 100, y: 150 })


      // CustomPopupOptions 类型设置弹框内容
      Button('CustomPopupOptions')
        .onClick(() => {
          this.customPopup = !this.customPopup
        })
        .bindPopup(this.customPopup, {
          builder: this.popupBuilder,
          placement: Placement.Top,
          mask: {color:'#33000000'},
          popupColor: Color.Yellow,
          enableArrow: true,
          showInSubWindow: false,
          onStateChange: (e) => {
            if (!e.isVisible) {
              this.customPopup = false
            }
          }
        })
        .position({ x: 80, y: 300 })
    }.width('100%').padding({ top: 5 })
  }
}
ts

示例2

// xxx.ets

@Entry
@Component
struct PopupExample {
  @State handlePopup: boolean = false
  @State customPopup: boolean = false

  // popup构造器定义气泡内容
  @Builder popupBuilder() {
    Row() {
      Text('Custom Popup Message').fontSize(10)
    }.height(50).padding(5)
  }

  build() {
    Column({space: 100}) {
      Button('PopupOptions')
        .onClick(() => {
          this.handlePopup = !this.handlePopup
        })
        .bindPopup(this.handlePopup, {  // PopupOptions类型气泡的内容
          message: 'This is a popup with PopupOptions',
          messageOptions: { // 气泡的文本样式
            textColor: Color.Red,
            font: {
              size: '14vp',
              style: FontStyle.Italic,
              weight: FontWeight.Bolder
            }
          },
          placement: Placement.Bottom,
          enableArrow: false,
          targetSpace: '15vp',
          onStateChange: (e) => {
            console.info(JSON.stringify(e.isVisible))
            if (!e.isVisible) {
              this.handlePopup = false
            }
          }
        })
      Button('CustomPopupOptions')
        .onClick(() => {
          this.customPopup = !this.customPopup
        })
        .bindPopup(this.customPopup, {  // CustomPopupOptions类型气泡的内容
          builder: this.popupBuilder,
          targetSpace: '15vp',
          enableArrow: false, // 气泡弹出时不显示箭头
          onStateChange: (e) => {
            if (!e.isVisible) {
              this.customPopup = false
            }
          }
        })
    }.margin(20)
  }
}
ts

示例3

// xxx.ets

@Entry
@Component
struct PopupExample {
  @State customPopup: boolean = false
  @State handlePopup: boolean = false

  build() {
    Column({ space: 100 }) {
      Button("popup")
        .margin({ top: 50 })
        .onClick(() => {
          this.customPopup = !this.customPopup
        })
        .bindPopup(this.customPopup, {
          message: "this is a popup",
          arrowHeight: 20, // 设置气泡箭头高度
          arrowWidth: 20, // 设置气泡箭头宽度
          radius: 20, // 设置气泡的圆角
          shadow: ShadowStyle.OUTER_DEFAULT_XS, // 设置气泡的阴影
        })

      Button('PopupOptions')
        .onClick(() => {
          this.handlePopup = !this.handlePopup
        })
        .bindPopup(this.handlePopup, {
          width: 300,
          message: 'This is a popup with PopupOptions',
          arrowPointPosition: ArrowPointPosition.START, // 设置箭头的位置
          backgroundBlurStyle: BlurStyle.NONE, // 关闭气泡的模糊背景
          popupColor: Color.Red, // 设置气泡的背景色
          autoCancel: true,
        })
    }
    .width('100%')
  }
}
ts

示例4

本示例通过transition实现了自定义气泡显示/退出动效。

// xxx.ets
@Entry
@Component
struct PopupExample {
  @State handlePopup: boolean = false
  @State customPopup: boolean = false

  // popup构造器定义弹框内容
  @Builder popupBuilder() {
    Row() {
      Text('Custom Popup with transitionEffect').fontSize(10)
    }.height(50).padding(5)
  }

  build() {
    Flex({ direction: FlexDirection.Column }) {
      // PopupOptions 类型设置弹框内容
      Button('PopupOptions')
        .onClick(() => {
          this.handlePopup = !this.handlePopup
        })
        .bindPopup(this.handlePopup, {
          message: 'This is a popup with transitionEffect',
          placementOnTop: true,
          showInSubWindow: false,
          onStateChange: (e) => {
            console.info(JSON.stringify(e.isVisible))
            if (!e.isVisible) {
              this.handlePopup = false
            }
          },
          // 设置弹窗显示动效为透明度动效与平移动效的组合效果，无退出动效
          transition:TransitionEffect.asymmetric(
            TransitionEffect.OPACITY.animation({ duration: 1000, curve: Curve.Ease }).combine(
              TransitionEffect.translate({ x: 50, y: 50 })),
            TransitionEffect.IDENTITY)
        })
        .position({ x: 100, y: 150 })

      // CustomPopupOptions 类型设置弹框内容
      Button('CustomPopupOptions')
        .onClick(() => {
          this.customPopup = !this.customPopup
        })
        .bindPopup(this.customPopup, {
          builder: this.popupBuilder,
          placement: Placement.Top,
          showInSubWindow: false,
          onStateChange: (e) => {
            if (!e.isVisible) {
              this.customPopup = false
            }
          },
          // 设置弹窗显示动效与退出动效为缩放动效
          transition:TransitionEffect.scale({ x: 1, y: 0 }).animation({ duration: 500, curve: Curve.Ease })
        })
        .position({ x: 80, y: 300 })
    }.width('100%').padding({ top: 5 })
  }
}
ts

示例5

// xxx.ets
//该示例实现了设置bindPopup的onWillDismiss属性为回调函数时，拦截退出事件并执行回调函数
@Entry
@Component
struct PopupExample {
  @State handlePopup: boolean = false
  build() {
    Column() {
      Button('PopupOptions')
        .onClick(() => {
          this.handlePopup = true
        })
        .bindPopup(this.handlePopup, {
          message: 'This is a popup with PopupOptions',
          messageOptions: {
            textColor: Color.Red,
            font: {
              size: '14vp',
              style: FontStyle.Italic,
              weight: FontWeight.Bolder
            }
          },
          placement: Placement.Bottom,
          enableArrow: false,
          targetSpace: '15vp',
          onStateChange: (e) => {
            if (!e.isVisible) {
              this.handlePopup = false
            }
          },
          onWillDismiss: (
            (dismissPopupAction: DismissPopupAction) => {
              console.info("dismissReason:" + JSON.stringify(dismissPopupAction.reason))
              if (dismissPopupAction.reason == DismissReason.PRESS_BACK) {
                dismissPopupAction.dismiss()
              }
            }
          )
        })
    }.margin(20)
  }
}
ts

示例6

// xxx.ets
//该示例实现了设置bindPopup的onWillDismiss属性为false时，拦截退出事件
@Entry
@Component
struct PopupExample {
  @State handlePopup: boolean = false
  build() {
    Column() {
      Button('PopupOptions')
        .onClick(() => {
          this.handlePopup = true
        })
        .bindPopup(this.handlePopup, {
          message: 'This is a popup with PopupOptions',
          messageOptions: {
            textColor: Color.Red,
            font: {
              size: '14vp',
              style: FontStyle.Italic,
              weight: FontWeight.Bolder
            }
          },
          placement: Placement.Bottom,
          enableArrow: false,
          targetSpace: '15vp',
          onStateChange: (e) => {
            let timer = setTimeout(()=>{this.handlePopup = false},6000)
            if (!e.isVisible) {
              this.handlePopup = false
              clearTimeout(timer)
            }
          },
          onWillDismiss: false
        })
    }.margin(20)
  }
}
ts

最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。 

这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS NEXT学习资料

鸿蒙（HarmonyOS NEXT）最新学习路线

  •  HarmonOS基础技能

  • HarmonOS就业必备技能 
  •  HarmonOS多媒体技术

  • 鸿蒙NaPi组件进阶

  • HarmonOS高级技能

  • 初识HarmonOS内核 
  • 实战就业级设备开发

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS NEXT学习资料

《鸿蒙 (OpenHarmony)开发入门教学视频》

《鸿蒙生态应用开发V2.0白皮书》

图片

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

图片

 《鸿蒙开发基础》

  • ArkTS语言
  • 安装DevEco Studio
  • 运用你的第一个ArkTS应用
  • ArkUI声明式UI开发
  • .……

图片

 《鸿蒙开发进阶》

  • Stage模型入门
  • 网络管理
  • 数据管理
  • 电话服务
  • 分布式应用开发
  • 通知与窗口管理
  • 多媒体技术
  • 安全技能
  • 任务管理
  • WebGL
  • 国际化开发
  • 应用测试
  • DFX面向未来设计
  • 鸿蒙系统移植和裁剪定制
  • ……

图片

《鸿蒙进阶实战》

  • ArkTS实践
  • UIAbility应用
  • 网络案例
  • ……

图片

 获取以上完整鸿蒙HarmonyOS学习资料，请点击→纯血版全套鸿蒙HarmonyOS NEXT学习资料

总结

总的来说，华为鸿蒙不再兼容安卓，对中年程序员来说是一个挑战，也是一个机会。只有积极应对变化，不断学习和提升自己，他们才能在这个变革的时代中立于不败之地。 

蜀道叁QAQ
关注
  • 16
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HarmonyOS应用开发-popup气泡指示组件练习.docx
06-05
### HarmonyOS应用开发-popup气泡指示组件练习 #### 引言 随着HarmonyOS生态的不断壮大，开发者们越来越关注如何提升应用的用户体验。其中，`popup`气泡指示组件作为一款重要的UI组件，能够有效地指导用户进行操作...
PopupMaker-Extension-Boilerplate:Popup Maker 扩展开发的基础，旨在为构建扩展提供标准化指南
06-14
Popup Maker 扩展样板Popup Maker Extension Boilerplate 作为基础，旨在为构建扩展提供标准化指南。 只需下载，调整一些东西，您就可以立即获得真正的代码！特征插件样板完全基于 WordPress 。 使用约定来记录代码...
ArkTS开发系列之气泡(Popup)和菜单(Menu)学习(2.4)
jay_chess的博客
06-20 439
【代码】ArkTS开发系列之气泡(Popup)和菜单(Menu)学习(2.4)
鸿蒙Harmony应用开发—ArkTS声明式开发（通用属性：Popup控制）
m0_64420071的博客
03-02 1733
ArkTS声明式开发（通用属性：Popup控制）
鸿蒙HarmonyOS NEXT开发：RichEditor（基础组件）
最新发布
shudaoshanBBQ的博客
08-18 617
支持图文混排和文本交互式编辑的组件。
HarmonyOS NEXT实战开发：焦点事件
hanyanyou的博客
07-29 587
基础概念与规范.............
鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：RichEditor）
m0_64420071的博客
03-12 1293
ArkTS声明式开发（基础手势：RichEditor）
HarmonyOS Next开发学习手册——焦点事件
maniuT的博客
07-05 905
由组件自定义的走焦算法，规格由组件定义。
HarmonyOS Next开发学习手册——UI开发框架 (CSS语法参考)
maniuT的博客
07-14 627
CSS是描述HML页面结构的样式语言。所有组件均存在系统默认样式，也可在页面CSS样式文件中对组件、页面自定义不同的样式。请参考 通用样式 了解兼容JS的类Web开发范式支持的组件样式。
HarmonyOS NEXT 实现Web页面长截图
shudaoshanQAQ的博客
04-23 1074
本案例实现了Web组件中网页长截图的方案。
鸿蒙Harmony开发：通用焦点样式事件规范
2401_84917132的博客
08-07 849
层级页面是焦点框架中特定容器组件的统称，涵盖Page、Dialog、SheetPage、ModalPage、Menu、Popup、NavBar、NavDestination等。
Popup-Maker：WordPress的Popup Maker插件
02-03
这是Popup Maker的开发人员门户，不应用作支持。 请。 入门 下载并用作插件 要使用此插件，您必须从下载。 在每个发行版中，都有一个随附的zip，其名称类似于popup-maker_v1.10.2.zip 。 下载适当的zip文件，然后...
flycheck-popup-tip：使用popup.el显示Flycheck错误消息
02-05
而`flycheck-popup-tip`是Flycheck的一个扩展，用于通过`popup.el`库来更优雅地展示错误和警告消息。本文将详细介绍`flycheck-popup-tip`的功能、安装、配置以及它如何与`popup.el`协同工作，帮助提升Emacs的使用...
material-ui-popup-state:通用Material-UI菜单，Popover和Popper用例的样板
05-13
绑定功能usePopupState usePopupState道具usePopupState返回值渲染道具示例菜单弹窗鼠标悬停互动波普尔渲染道具API 绑定功能PopupState道具在bindHover使用Popover和Menu 安装npm install --save material-ui-popup-...
popupalt：Popup ALT属性，Popups替换图像或NetscapeCommunicator（Navigator）4.x等其他文本，并在多行工具提示中显示长说明
02-05
Popup ALT属性是网页开发中的一个特性，主要用于提供对图像或者在Netscape Communicator 4.x等较旧浏览器中无法显示元素的替代描述。在HTML中，`<img>`标签通常用于插入图像，而`alt`属性就是为这些图像提供文字描述...
WPF：带阴影、带箭头的Popup提示框
03-30
在WPF中，Popup的`Placement`属性决定了它的相对位置，而`PlacementTarget`或`PlacementRectangle`属性可以指定Popup相对于哪个元素或区域显示。此外，`Popup`控件还有一个`Arrow`相关的属性，如`Popup....
popup-container:您内容的简单弹出容器
05-14
弹出容器 使用jQuery的内容的简单弹出容器 用法 导入jQuery库（我使用的是jquery-1.10.2版本）和libs.js < script type =" text/javascript " src =" libs.js " > </ script > 加载样式表（弹出样式表...
使用 QMenu::popup 方法代替 exec 方法
05-24
QMenu::exec() 方法是阻塞式的，它会一直等待用户选择一个菜单项或者取消菜单。如果你不需要阻塞程序，可以使用 QMenu::popup() 方法代替。 QMenu::popup() 方法显示菜单，并立即返回，而不等待用户选择或取消操作。这意味着你需要在菜单项触发信号中处理用户选择，而不是等待 exec() 方法返回。 以下是一个使用 QMenu::popup() 方法的示例： ```cpp QMenu menu(this); menu.addAction("Option 1"); menu.addAction("Option 2"); connect(&menu, &QMenu::triggered, [=](QAction *action) { if (action->text() == "Option 1") { // 处理选项1 } else if (action->text() == "Option 2") { // 处理选项2 } }); menu.popup(QCursor::pos()); ``` 在这个例子中，我们创建了一个菜单并添加了两个菜单项。然后，我们连接 QMenu 的 triggered 信号到一个 lambda 表达式中，以处理用户选择。最后，我们使用 QMenu::popup() 方法在当前鼠标位置显示菜单。当用户选择一个菜单项时，lambda 表达式会被调用，我们可以在其中处理用户选择。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值