代码拉取完成，页面将自动刷新
Fork 仓库
加载中
确定同步？
同步操作将从 HarmonyOS-Next/HarmonyOS NEXT应用开发案例 强制同步，此操作会覆盖自 Fork 仓库以来所做的任何修改，且无法恢复！！！
确定后同步将在后台操作，完成时将刷新页面，请耐心等待。
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553
[
{
"category": {
"categoryName": "case",
"categoryDesc": "源代码"
},
"categoryDetailList": [
{
"typeInfo": {
"typeName": "ui",
"typeDesc": "UI布局",
"typeDetail": ""
},
"repositoriesInfoList": [
{
"name": "自定义TabBar",
"id": "2",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/tab_bar.gif",
"description": "本示例主要介绍了TabBar中间页面如何实现有一圈圆弧外轮廓以及TabBar页签被点击之后会改变图标显示，并有一小段动画效果。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/customtabbar/",
"caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
"insertCode": "TabViewComponent()",
"importCode": "import { TabViewComponent } from 'customtabbar';",
"codeAnnotation": "/**\n * 功能描述：本示例主要介绍了TabBar中间页面如何实现有一圈圆弧外轮廓以及TabBar页签被点击之后会改变图标显示，并有一小段动画效果。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/customtabbar/README.md\n */",
"napi": false
}
},
{
"name": "ArkWeb同层渲染",
"id": "64",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/native_embed.jpg",
"description": "该方案展示了ArkWeb同层渲染：将系统原生组件直接渲染到前端H5页面上，原生组件不仅可以提供H5组件无法实现的一些功能，还能提升用户体验的流畅度。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/nativeembed/",
"caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
"insertCode": "WebViewDemoComponent()",
"importCode": "import { WebViewDemoComponent } from 'nativeembed';",
"codeAnnotation": "/**\n * 功能描述：该方案展示了ArkWeb同层渲染：将系统原生组件直接渲染到前端H5页面上，原生组件不仅可以提供H5组件无法实现的一些功能，还能提升用户体验的流畅度。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/nativeembed/README.md\n */",
"napi": false
}
},
{
"name": "自定义安全键盘案例",
"id": "61",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/custom_safe_keyboard.gif",
"description": "金融类应用在密码输入时，一般会使用自定义安全键盘。本示例介绍如何使用TextInput组件实现自定义安全键盘场景，主要包括TextInput.customKeyboard绑定自定义键盘、自定义键盘布局和状态更新等知识点。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/customsafekeyboard/",
"caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
"insertCode": "CustomSafeKeyboardViewComponent()",
"importCode": "import { CustomSafeKeyboardViewComponent } from 'customsafekeyboard';",
"codeAnnotation": "/**\n * 功能描述：金融类应用在密码输入时，一般会使用自定义安全键盘。本示例介绍如何使用TextInput组件实现自定义安全键盘场景，主要包括TextInput.customKeyboard绑定自定义键盘、自定义键盘布局和状态更新等知识点。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/customsafekeyboard/README.md\n */",
"napi": false
}
},
{
"name": "手写绘制及保存图片",
"id": "70",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/hand_wring_to_image.gif",
"description": "本示例使用drawing库的Pen和Path结合NodeContainer组件实现手写绘制功能。手写板上完成绘制后，通过调用image库的packToFile和packing接口将手写板的绘制内容保存为图片，并将图片文件保存在应用沙箱路径中。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/handwritingtoimage/",
"caseRepositoriesInfo": "https://gitee.com/zzh78963/cases.git",
"insertCode": "HandWritingToImageView()",
"importCode": "import { HandWritingToImageView } from 'handwritingtoimage';",
"codeAnnotation": "/**\n * 功能描述：本示例使用drawing库的Pen和Path结合NodeContainer组件实现手写绘制功能。手写板上完成绘制后，通过调用image库的packToFile和packing接口将手写板的绘制内容保存为图片，并将图片文件保存在应用沙箱路径中。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/handwritingtoimage/README.md\n */",
"napi": false
}
},
{
"name": "视频卡片和列表区域的联动滚动",
"id": "122",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/video_linkage_list.gif",
"description": "本示例使用Scroll和List组件嵌套，通过List组件的滚动控制器和nestedScroll属性实现了视频卡片和列表区域的联动滚动场景。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/videolinkagelist/",
"caseRepositoriesInfo": "https://gitee.com/zzh78963/cases.git",
"insertCode": "VideoLinkageListView()",
"importCode": "import { VideoLinkageListView } from 'videolinkagelist';",
"codeAnnotation": "/**\n * 功能描述：本示例使用Scroll和List组件嵌套，通过List组件的滚动控制器和nestedScroll属性实现了视频卡片和列表区域的联动滚动场景。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/videolinkagelist/README.md\n */",
"napi": false
}
},
{
"name": "城市选择案例",
"id": "39",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/city_search.gif",
"description": "本示例介绍城市选择场景的使用：通过AlphabetIndexer实现首字母快速定位城市的索引条导航。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/citysearch/",
"caseRepositoriesInfo": "https://gitee.com/zzh78963/cases.git",
"insertCode": "CitySearch()",
"importCode": "import { CitySearch } from 'citysearch';",
"codeAnnotation": "/**\n * 功能描述：本示例介绍城市选择场景的使用：通过AlphabetIndexer实现首字母快速定位城市的索引条导航。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/citysearch/README.md\n */",
"napi": false
}
},
{
"name": "文字展开收起案例",
"id": "112",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/text_expand.gif",
"description": "本示例介绍了使用@ohos.measure 组件接口实现文字段落展开收起的功能，且同时介绍了如何解决图文混排的问题。 该场景多用于图文列表展示等。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/textexpand/",
"caseRepositoriesInfo": "https://gitee.com/zzh78963/cases.git",
"insertCode": "TextExpand()",
"importCode": "import { TextExpand } from 'textexpand';",
"codeAnnotation": "/**\n * 功能描述：本示例介绍了使用@ohos.measure 组件接口实现文字段落展开收起的功能，且同时介绍了如何解决图文混排的问题。 该场景多用于图文列表展示等。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/textexpand/README.md\n */",
"napi": false
}
},
{
"name": "验证码布局",
"id": "23",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/verify_code.gif",
"description": "本示例介绍如何使用Text组件实现验证码场景，并禁用对内容的选中、复制、光标。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/verifycode/",
"caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
"insertCode": "VerifyCodeViewComponent()",
"importCode": "import { VerifyCodeViewComponent } from 'verifycode';",
"codeAnnotation": "/**\n * 功能描述：本示例介绍如何使用Text组件实现验证码场景，并禁用对内容的选中、复制、光标。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/verifycode/README.md\n */",
"napi": false
}
},
{
"name": "自定义视图实现Tab效果",
"id": "32",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/customanimationtabs.gif",
"description": "本示例介绍使用List、Text等组件，以及animateTo等接口实现自定义Tab效果。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/customanimationtab/",
"caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
"insertCode": "CustomAnimationTabView()",
"importCode": "import { CustomAnimationTabView } from 'customanimationtab';",
"codeAnnotation": "/**\n * 功能描述：本示例介绍使用List、Text等组件，以及animateTo等接口实现自定义Tab效果。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/customanimationtab/README.md\n */",
"napi": false
}
},
{
"name": "列表编辑实现",
"id": "10",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/todo_list.gif",
"description": "本示例介绍了通过对List数据源修改实现列表项新增/删除/编辑的功能。该场景多用于待办事项管理、文件管理、备忘录的记录管理等。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/pendingitems/",
"caseRepositoriesInfo": "",
"insertCode": "ToDoListComponent()",
"importCode": "import { ToDoListComponent } from 'pendingitems';",
"codeAnnotation": "/**\n * 功能描述：本示例介绍了通过对List数据源修改实现列表项新增/删除/编辑的功能。该场景多用于待办事项管理、文件管理、备忘录的记录管理等。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/pendingitems/README.md\n */",
"napi": false
}
}
]
},
{
"typeInfo": {
"typeName": "animation",
"typeDesc": "动效",
"typeDetail": ""
},
"repositoriesInfoList": [
{
"name": "首页下拉进入二楼效果案例",
"id": "108",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/second_floor_load_animation.gif",
"description": "本示例主要介绍了利用position和onTouch来实现首页下拉进入二楼、二楼上划进入首页的效果场景，利用translate和opacity实现动效的移动和缩放，并将界面沉浸式（全屏）显示。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/secondfloorloadanimation/",
"caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
"insertCode": "SecondFloorLoadAnimationComponent()",
"importCode": "import { SecondFloorLoadAnimationComponent } from 'secondfloorloadanimation';",
"codeAnnotation": "/**\n * 功能描述：本示例主要介绍了利用position和onTouch来实现首页下拉进入二楼、二楼上划进入首页的效果场景，利用translate和opacity实现动效的移动和缩放，并将界面沉浸式（全屏）显示。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/secondfloorloadanimation/README.md\n */",
"napi": false
}
},
{
"name": "下拉刷新与上滑加载案例",
"id": "20",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/pull_to_refresh_news.gif",
"description": "本示例介绍使用第三方库的PullToRefresh组件实现列表的下拉刷新数据和上滑加载后续数据。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/pulltorefreshnews/",
"caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
"insertCode": "PullToRefreshNewsComponent()",
"importCode": "import { PullToRefreshNewsComponent } from 'pulltorefreshnews';",
"codeAnnotation": "/**\n * 功能描述：本示例介绍使用第三方库的PullToRefresh组件实现列表的下拉刷新数据和上滑加载后续数据。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/pulltorefreshnews/README.md\n */",
"napi": false
}
},
{
"name": "地址交换动画",
"id": "1",
"image": "https://gitee.com/sephyrothcloud/cases_0628/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/address_exchange.gif",
"description": "本示例介绍使用显式动画 animateTo 实现左右地址交换动画。该场景多用于机票、火车票购买等出行类订票软件中。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/addressexchange/",
"caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
"insertCode": "AddressExchangeViewComponent()",
"importCode": "import { AddressExchangeViewComponent } from 'addressexchange';",
"codeAnnotation": "/**\n * 功能描述：本示例介绍使用显式动画 animateTo 实现左右地址交换动画。该场景多用于机票、火车票购买等出行类订票软件中。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/addressexchange/README.md\n */",
"napi": false
}
},
{
"name": "自定义Swiper卡片预览效果实现",
"id": "80",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/card_swiper_animation.gif",
"description": "本方案做的是采用Swiper组件实现容器视图居中完全展示，两边等长露出，并且跟手滑动缩放效果。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/cardswiperanimation/",
"caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
"insertCode": "CardSwiperAnimationComponent()",
"importCode": "import { CardSwiperAnimationComponent } from 'cardswiperanimation';",
"codeAnnotation": "/**\n * 功能描述：本方案做的是采用Swiper组件实现容器视图居中完全展示，两边等长露出，并且跟手滑动缩放效果。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/cardswiperanimation/README.md\n */",
"napi": false
}
},
{
"name": "Grid和List内拖拽交换子组件位置",
"id": "95",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/drag_and_exchange.gif",
"description": "本示例分别通过onItemDrop()和onDrop()回调，实现子组件在Grid和List中的子组件位置交换。\n\n此案例目前已有动效升级版，请参考：列表项交换案例、网格元素交换案例。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/dragandexchange/",
"caseRepositoriesInfo": "https://gitee.com/zzh78963/cases.git",
"insertCode": "Launcher()",
"importCode": "import { Launcher } from 'dragandexchange';",
"codeAnnotation": "/**\n * 功能描述：本示例分别通过onItemDrop()和onDrop()回调，实现子组件在Grid和List中的子组件位置交换。\n\n此案例目前已有动效升级版，请参考：列表项交换案例、网格元素交换案例。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/dragandexchange/README.md\n */",
"napi": false
}
},
{
"name": "悬浮窗拖拽和吸附动画",
"id": "93",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/float_window.gif",
"description": "本示例使用position绝对定位实现应用内悬浮窗，并且通过animateTo结合curves动画曲线实现悬浮窗拖拽跟手和松手吸附边缘的弹性动画效果。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/floatwindow/",
"caseRepositoriesInfo": "https://gitee.com/zzh78963/cases.git",
"insertCode": "FloatWindowMainPage()",
"importCode": "import { FloatWindowMainPage } from 'floatwindow';",
"codeAnnotation": "/**\n * 功能描述：本示例使用position绝对定位实现应用内悬浮窗，并且通过animateTo结合curves动画曲线实现悬浮窗拖拽跟手和松手吸附边缘的弹性动画效果。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/floatwindow/README.md\n */",
"napi": false
}
},
{
"name": "语音录制和声音动效实现",
"id": "90",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/normal_AV_record2.gif",
"description": "本示例使用AVrecord录制音频和AVrecord的getAudioCapturerMaxAmplitude接口获取振幅实现UI动效;使用AVplayer播放音频。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/voicerecordynamiceffect/",
"caseRepositoriesInfo": "https://gitee.com/zzh78963/cases.git",
"insertCode": "GestureGroupExample()",
"importCode": "import { GestureGroupExample } from 'voicerecordynamiceffect';",
"codeAnnotation": "/**\n * 功能描述：本示例使用AVrecord录制音频和AVrecord的getAudioCapturerMaxAmplitude接口获取振幅实现UI动效;使用AVplayer播放音频。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/voicerecordynamiceffect/README.md\n */",
"napi": false
}
},
{
"name": "列表项交换案例",
"id": "88",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/list_exchange.gif",
"description": "本案例通过List组件、组合手势GestureGroup、swipeAction属性以及attributeModifier属性等实现了列表项的交换和删除。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/listexchange/",
"caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
"insertCode": "ListExchangeViewComponent()",
"importCode": "import { ListExchangeViewComponent } from 'listexchange';",
"codeAnnotation": "/**\n * 功能描述：本案例通过List组件、组合手势GestureGroup、swipeAction属性以及attributeModifier属性等实现了列表项的交换和删除。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/listexchange/README.md\n */",
"napi": false
}
},
{
"name": "滑动页面信息隐藏与组件位移效果",
"id": "5",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/slide_to_hide_and_displace.gif",
"description": "在很多应用中，向上滑动\"我的\"页面，页面顶部会有如下变化效果：一部分信息逐渐隐藏，另一部分信息逐渐显示，同时一些组件会进行缩放或者位置移动。向下滑动时则相反。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/slidetohideanddisplace/",
"caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
"insertCode": "SlideToHideAndDisplaceComponent()",
"importCode": "import { SlideToHideAndDisplaceComponent } from 'slidetohideanddisplace';",
"codeAnnotation": "/**\n * 功能描述：在很多应用中，向上滑动\"我的\"页面，页面顶部会有如下变化效果：一部分信息逐渐隐藏，另一部分信息逐渐显示，同时一些组件会进行缩放或者位置移动。向下滑动时则相反。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/slidetohideanddisplace/README.md\n */",
"napi": false
}
},
{
"name": "视频横竖屏切换案例",
"id": "138",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/video_screen_direction_switching.gif",
"description": "本示例介绍了@ohos.multimedia.media组件和@ohos.window接口以及使用触摸热区实现视频横竖屏切换及进度条热区拖动的功能。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/videoscreendirectionswitching/",
"caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
"insertCode": "VideoScreenDirectionSwitching()",
"importCode": "import { VideoScreenDirectionSwitching } from '@ohos-cases/video_screen_direction_switching';",
"codeAnnotation": "/** * 功能描述: 本示例介绍了@ohos.multimedia.media组件和@ohos.window接口以及使用触摸热区实现视频横竖屏切换及进度条热区拖动的功能 * * 推荐场景: 横竖屏视频等媒体播放场景 * * 核心组件: * 1. AVPlayer * * 实现步骤: * 1. 初始化@ohos.multimedia.media的AVPlayer。 * 2. 当AVPlayer初始化完毕进入initialized状态时，将XComponent和AVPlayer通过surfaceId绑定。 * 3. 使用AVPlayer中的width和height属性判断是横屏视频还是竖屏视频，方便判断是否需要展示全屏观看按钮。 * 4. 调用@ohos.window的 getLastWindow 方法获取当前应用内最上层的子窗口 * 5. 利用获取到的窗口对象，调用 setWindowSystemBarEnable 方法设置窗口是否显示导航栏和状态栏。 * 6. 调用窗口对象的 setPreferredOrientation 方法设置窗口旋转方向以及是否应用重力感应。 * 7. 调用窗口对象的setWindowLayoutFullScreen方法实现沉浸式布局。 * 8. 对进度条整个组件设置触摸热区。 */",
"napi": false
}
},
{
"name": "SideBarContainer侧边栏淡入淡出动效实现案例",
"id": "43",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/side_bar_animation.gif",
"description": "在2in1或平板上，群聊侧边栏是一种较为常用的功能，虽然HarmonyOS已经具备了基本的动效，但是部分情况下开发者可能有定制侧边栏动效的需求，本例主要介绍了如何基于显式动画实现侧边栏的淡入淡出动效。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/sidebaranimation/",
"caseRepositoriesInfo": "",
"insertCode": "SideBarAnimationViewComponent()",
"importCode": "import { SideBarAnimationViewComponent } from 'sidebaranimation';",
"codeAnnotation": "/**\n * 功能描述：在2in1或平板上，群聊侧边栏是一种较为常用的功能，虽然HarmonyOS已经具备了基本的动效，但是部分情况下开发者可能有定制侧边栏动效的需求，本例主要介绍了如何基于显式动画实现侧边栏的淡入淡出动效。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/sidebaranimation/README.md\n */",
"napi": false
}
}
]
},
{
"typeInfo": {
"typeName": "native",
"typeDesc": "Native",
"typeDetail": ""
},
"repositoriesInfoList": [
{
"name": "NAPI封装ArkTS接口案例",
"id": "65",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/ets_wrapper.gif",
"description": "部分应用的主要开发语言为C/C++，但是HarmonyOS的部分接口仅以ArkTS的形式暴露，因此需要将ArkTS的接口封装为Native接口。本例以DocumentViewPicker的Select方法为例，提供了Napi封装ArkTS API的通用方法，本例包含内容如下：\nNative侧与ArkTS侧的相互调用\nNative对象转换为ArkTS对象（包括如何在ArkTS侧调用一般形式的Native方法）\n线程安全函数的使用\n等待线程安全函数的执行结果\n多实例情况下，如何在正确的窗口内执行方法",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/etswrapper/",
"caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
"insertCode": "MockNativeCallPickerViewComponent()",
"importCode": "import { MockNativeCallPickerViewComponent } from 'etswrapper';",
"codeAnnotation": "/**\n * 功能描述：部分应用的主要开发语言为C/C++，但是HarmonyOS的部分接口仅以ArkTS的形式暴露，因此需要将ArkTS的接口封装为Native接口。本例以DocumentViewPicker的Select方法为例，提供了Napi封装ArkTS API的通用方法，本例包含内容如下：\n * Native侧与ArkTS侧的相互调用\n * Native对象转换为ArkTS对象（包括如何在ArkTS侧调用一般形式的Native方法）\n * 线程安全函数的使用\n * 等待线程安全函数的执行结果\n * 多实例情况下，如何在正确的窗口内执行方法\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/etswrapper/README.md\n */",
"napi": true
}
}
]
},
{
"typeInfo": {
"typeName": "other",
"typeDesc": "其他",
"typeDetail": ""
},
"repositoriesInfoList": [
{
"name": "图片选择和下载保存案例",
"id": "16",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/photo_pick_and_save.gif",
"description": "本示例介绍图片相关场景的使用：包含访问手机相册图片、选择预览图片并显示选择的图片到当前页面，下载并保存网络图片到手机相册或到指定用户目录两个场景。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/photopickandsave/",
"caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
"insertCode": "PictureManagerComponent()",
"importCode": "import { PictureManagerComponent } from 'photopickandsave';",
"codeAnnotation": "/**\n * 功能描述：本示例介绍图片相关场景的使用：包含访问手机相册图片、选择预览图片并显示选择的图片到当前页面，下载并保存网络图片到手机相册或到指定用户目录两个场景。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/photopickandsave/README.md\n */",
"napi": false
}
},
{
"name": "图片压缩方案",
"id": "45",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/image_compression.gif",
"description": "图片压缩在应用开发中是一个非常常见的需求，比如在处理用户上传图片时，需要上传指定大小以内的图片。目前图片压缩支持jpeg、webp、png格式。本例将介绍如何通过packing和scale实现图片压缩（如自动压缩到目标大小以内，手动调整图片质量和尺寸进行压缩等），以及把图片压缩成不同格式后保存到图库。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/imagecompression/",
"caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
"insertCode": "ImageCompressionComponent()",
"importCode": "import { ImageCompressionComponent } from 'imagecompression';",
"codeAnnotation": "/**\n * 功能描述：图片压缩在应用开发中是一个非常常见的需求，比如在处理用户上传图片时，需要上传指定大小以内的图片。目前图片压缩支持jpeg、webp、png格式。本例将介绍如何通过packing和scale实现图片压缩（如自动压缩到目标大小以内，手动调整图片质量和尺寸进行压缩等），以及把图片压缩成不同格式后保存到图库。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/imagecompression/README.md\n */",
"napi": false
}
},
{
"name": "图片缩放效果实现",
"id": "7",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/image_viewer.gif",
"description": "图片预览在应用开发中是一种常见场景，在诸如QQ、微信、微博等应用中均被广泛使用。本模块基于Image组件实现了简单的图片预览功能。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/imageviewer/",
"caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
"insertCode": "ImageViewerViewComponent()",
"importCode": "import { ImageViewerViewComponent } from 'imageviewer';",
"codeAnnotation": "/**\n * 功能描述：图片预览在应用开发中是一种常见场景，在诸如QQ、微信、微博等应用中均被广泛使用。本模块基于Image组件实现了简单的图片预览功能。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/imageviewer/README.md\n */",
"napi": false
}
},
{
"name": "Web页面长截图",
"id": "101",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/web_snapshot.gif",
"description": "本案例实现了Web组件中网页长截图的方案。支持截图后展示大小浮窗预览、保存图片到相册、手势左滑关闭等功能。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/webpagesnapshot/",
"caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
"insertCode": "WebPageSnapshotComponent()",
"importCode": "import { WebPageSnapshotComponent } from 'webpagesnapshot';",
"codeAnnotation": "/**\n * 功能描述：本案例实现了Web组件中网页长截图的方案。支持截图后展示大小浮窗预览、保存图片到相册、手势左滑关闭等功能。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/webpagesnapshot/README.md\n */",
"napi": false
}
},
{
"name": "Web组件预览PDF文件实现案例",
"id": "79",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/web_pdf_viewer.gif",
"description": "本案例通过Web组件实现预览本地PDF文件和预览网络PDF文件，代码为Tabs容器组件包含了两个独立的TabContent子组件，分别标示为预览本地PDF文件和预览网络PDF文件。每个子组件内部构建一个Web组件。第一个Web组件利用resource协议关联本地PDF文件路径以预览本地存储的PDF资源；第二个Web组件则通过配置网络链接属性，实现从互联网加载并预览远程PDF文件内容。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/webpdfviewer/",
"caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
"insertCode": "WebPDFViewerComponent()",
"importCode": "import { WebPDFViewerComponent } from 'webpdfviewer';",
"codeAnnotation": "/**\n * 功能描述：本案例通过Web组件实现预览本地PDF文件和预览网络PDF文件，代码为Tabs容器组件包含了两个独立的TabContent子组件，分别标示为预览本地PDF文件和预览网络PDF文件。每个子组件内部构建一个Web组件。第一个Web组件利用resource协议关联本地PDF文件路径以预览本地存储的PDF资源；第二个Web组件则通过配置网络链接属性，实现从互联网加载并预览远程PDF文件内容。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/webpdfviewer/README.md\n */",
"napi": false
}
},
{
"name": "表情聊天案例",
"id": "102",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/chat_with_expression.gif",
"description": "本示例主要介绍如何在聊天信息中加入表情图片。通过变量控制表情键盘的显示与否，使用RichEdit接收所选表情的ImageSpan。在发送信息时将图片和文字消息分别通过ImageSpan、Span加入到消息列表中，显示的时候将消息列表中的ImageSpan、Span包裹在Text中进行显示，同时实现了最近使用表情和长按表情图片弹窗显示表情明细的效果。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/chatwithexpression/",
"caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
"insertCode": "ChatWithExpressionComponent()",
"importCode": "import { ChatWithExpressionComponent } from 'chatwithexpression';",
"codeAnnotation": "/**\n * 功能描述：本示例主要介绍如何在聊天信息中加入表情图片。通过变量控制表情键盘的显示与否，使用RichEdit接收所选表情的ImageSpan。在发送信息时将图片和文字消息分别通过ImageSpan、Span加入到消息列表中，显示的时候将消息列表中的ImageSpan、Span包裹在Text中进行显示，同时实现了最近使用表情和长按表情图片弹窗显示表情明细的效果。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/chatwithexpression/README.md\n */",
"napi": false
}
},
{
"name": "Web获取相机拍照图片案例",
"id": "52",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/web_get_camera_image.gif",
"description": "本示例介绍如何在HTML页面中拉起原生相机进行拍照，并获取返回的图片。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/webgetcameraimage/",
"caseRepositoriesInfo": "https://gitee.com/zzh78963/cases.git",
"insertCode": "WebGetCameraImageView()",
"importCode": "import { WebGetCameraImageView } from 'webgetcameraimage';",
"codeAnnotation": "/**\n * 功能描述：本示例介绍如何在HTML页面中拉起原生相机进行拍照，并获取返回的图片。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/webgetcameraimage/README.md\n */",
"napi": false
}
},
{
"name": "水印案例",
"id": "114",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/water_mark.gif",
"description": "在很多的场景中，如保存图片以及容器封面都能够见到水印，本案例通过Canvas组件以及OffscreenCanvas实现了页面添加水印以及保存图片时添加水印的功能。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/watermark/",
"caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
"insertCode": "MainViewComponent()",
"importCode": "import { MainViewComponent } from 'watermark';",
"codeAnnotation": "/**\n * 功能描述：在很多的场景中，如保存图片以及容器封面都能够见到水印，本案例通过Canvas组件以及OffscreenCanvas实现了页面添加水印以及保存图片时添加水印的功能。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/watermark/README.md\n */",
"napi": false
}
},
{
"name": "Axios获取网络GBK数据转换UTF-8网络数据",
"id": "12",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/gbk_friends_book.jpeg",
"description": "本示例介绍使用第三方库的Axios获取GBK格式的网络数据时，通过util实现GBK转换UTF-8格式。该场景多用于需要转换编码格式的应用。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/gbktranscoding/",
"caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
"insertCode": "FriendsBookComponent()",
"importCode": "import { FriendsBookComponent } from 'gbktranscoding';",
"codeAnnotation": "/**\n * 功能描述：本示例介绍使用第三方库的Axios获取GBK格式的网络数据时，通过util实现GBK转换UTF-8格式。该场景多用于需要转换编码格式的应用。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/gbktranscoding/README.md\n */",
"napi": false
}
},
{
"name": "使用colorPicker实现背景跟随主题颜色转换",
"id": "85",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/color_picker.gif",
"description": "本示例介绍使用image库以及effectKit库中的colorPicker对目标图片进行取色，将获取的颜色作为背景渐变色，通过swiper组件对图片进行轮播。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/effectkit/",
"caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
"insertCode": "MainPageComponent()",
"importCode": "import { MainPageComponent } from 'effectkit';",
"codeAnnotation": "/**\n * 功能描述：本示例介绍使用image库以及effectKit库中的colorPicker对目标图片进行取色，将获取的颜色作为背景渐变色，通过swiper组件对图片进行轮播。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/effectkit/README.md\n */",
"napi": false
}
},
{
"name": "Text实现部分文本高亮和超链接样式",
"id": "109",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/styled_text.gif",
"description": "本示例通过自定义Span类型，在Text组件中使用ForEach遍历，根据不同的Span类型生成不同样式和功能的Span组件，实现部分文本高亮和超链接。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/styledtext/",
"caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
"insertCode": "StyledTextMainPageComponent()",
"importCode": "import { StyledTextMainPageComponent } from 'styledtext';",
"codeAnnotation": "/**\n * 功能描述：本示例通过自定义Span类型，在Text组件中使用ForEach遍历，根据不同的Span类型生成不同样式和功能的Span组件，实现部分文本高亮和超链接。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/styledtext/README.md\n */",
"napi": false
}
},
{
"name": "标题下拉缩放案例",
"id": "49",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/expand_title.gif",
"description": "本文以备忘录应用为示例，介绍如何在实现标题跟随手势移动并放缩的动效。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/expandtitle/",
"caseRepositoriesInfo": "",
"insertCode": "TitleExpansionView()",
"importCode": "import { TitleExpansionView } from 'expandtitle';",
"codeAnnotation": "/**\n * 功能描述：本文以备忘录应用为示例，介绍如何在实现标题跟随手势移动并放缩的动效。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/expandtitle/README.md\n */",
"napi": false
}
}
]
}
]
},
{
"category": {
"categoryName": "library",
"categoryDesc": "三方库"
},
"categoryDetailList": [
{
"typeInfo": {
"typeName": "animation",
"typeDesc": "动效",
"typeDetail": "动画效果"
},
"repositoriesInfoList": [
{
"name": "自定义视图实现Tab效果",
"id": "151",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/customanimationtabs.gif",
"description": "CustomAnimationTab 实现自定义动效tab组件，跟随手势滑动、点击等交互事件产生对应动效。",
"codeInfo": {
"insertCode": "CustomAnimationTab({\n tabsInfo: this.tabsInfo,\n indicatorBarAttribute: this.indicatorBarAttribute,\n tabBarAttribute: this.tabBarAttribute,\n animationAttribute: this.animationAttribute,\n tabController: this.tabController,\n scroller: this.scroller,\n})",
"importCode": "import { CustomAnimationTab } from '@ohos-cases/custom_animation_tab';",
"dependenciesName": "@ohos-cases/custom_animation_tab",
"dependenciesVersion": "1.0.0",
"codeAnnotation": "/**\n * 功能描述：CustomAnimationTab 实现自定义动效tab组件，跟随手势滑动、点击等交互事件产生对应动效。\n * 参数介绍：tabsInfo: tab基本信息，indicatorBarAttribute: 背景条属性，tabBarAttribute: 页签条属性，animationAttribute: 动效属性，tabController： 控制器\n * README：https://ohpm.openharmony.cn/#/cn/detail/@ohos-cases%2Fcustom_animation_tab\n */",
"napi": false
}
}
]
}
]
}
]
Loading...
举报
请认真填写举报原因，尽可能描述详细。
请选择举报类型
误判申诉
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化