diff --git a/README.md b/README.md index 4d0450704c81ed5854f7c6fad6e259d49e19956b..60d871091e350e976e77f9e9af85922a41c382d3 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,8 @@ -## 评论回复弹窗 +## 实现评论回复弹窗模块 ### 介绍 -本示例实现在视频应用中，点击写评论输入框在评论列表上层弹出评论回复模块，在该模块中可进行输入文字、表情、@好友功能。 +本示例实现在视频应用中，使用Navigation Dialog在评论列表上层弹出评论回复模块，在该模块中使用RichEditor组件实现输入文字、表情、@好友功能。为开发者提供评论回复模块的开发实践。 ### 效果预览 diff --git a/README_EN.md b/README_EN.md new file mode 100644 index 0000000000000000000000000000000000000000..3329688535ee3b17559e968ab9017d056525ec27 --- /dev/null +++ b/README_EN.md @@ -0,0 +1,66 @@ +## Comment Reply Window + +### Overview + +This sample demonstrates how to implement a comment reply window that allows text, emojis, and @ friends above the comment list in a video app. + +### Preview + +| Homepage | Comment List | Comment Reply Window (Soft Keyboard) | Comment Reply Window (Emoticon Panel) | +|----------------------------------------|------------------------------------------------|-----------------------------------------|--------------------------------------------------| +| ![](./screenshots/devices/home_EN.png) | ![](./screenshots/devices/comment_list_EN.png) | ![](./screenshots/devices/keyboard_EN.png) | ![](./screenshots/devices/emoji_keyboard_EN.png) | + +Instructions: + +1. Open the app and tap the message icon on the home screen. The comment list window is displayed. +2. Tap the text box below the comment list. The comment reply window is displayed. +3. By default, the comment module uses the soft keyboard. You can tap the emoji button in the editing area to switch to the emoji panel and enter emojis. +4. Tap the @ button or enter the @ symbol using the soft keyboard to display the friend list. Tap a friend's profile picture to add the @ friend content in the editing area. +5. Tap the delete button. The @ friend content is selected and highlighted. Then tap the delete button. The @ friend content is deleted. + +### Project Directory + +``` +├──features +│ ├──home/src/main/ets +│ │ ├──constants +│ │ │ └──HomeConstants.ets // Constant class +│ │ └──view +│ │ ├──CommentKeyboard.ets // Comment reply module +│ │ ├──CommentList.ets // Comment list +│ │ ├──CommentSendDialog.ets // Comment sending pop-up window +│ │ ├──Home.ets // Homepage +│ │ ├──HomeContent.ets // Video page +│ │ └──NavigationDialog.ets // Navigation-based pop-up component +│ └──home/src/main/resources // Static resources +└──products + ├──entry/src/main/ets + │ ├──entryability + │ │ └──EntryAbility.ets // Entry ability + │ └──pages + │ └──Index.ets // Index page + └──entry/src/main/resources // Static resources +``` + +### How to Implement + +1. Use [Navigation Dialog](https://developer.huawei.com/consumer/en/doc/harmonyos-guides-V5/arkts-navigation-navigation-V5) to implement a window. +2. Use [RichEditor](https://developer.huawei.com/consumer/en/doc/harmonyos-references-V5/ts-basic-components-richeditor-V5) APIs to implement the functions of entering text, emojis, and @ friends in the editing area of the comment module. + +### Required Permissions + +N/A. + +### Dependency + +N/A + +### Constraints + +1. The sample is supported only on Huawei phones with standard systems. + +2. The HarmonyOS version must be HarmonyOS NEXT Beta 1 or later. + +3. The DevEco Studio version must be DevEco Studio NEXT Beta1 or later. + +4. The HarmonyOS SDK version must be HarmonyOS NEXT Beta1 SDK or later. diff --git a/features/home/src/main/ets/constants/HomeConstants.ets b/features/home/src/main/ets/constants/HomeConstants.ets index 7a6c3e1902ac3814699b13730bb019f36aa4a0fd..7f9353bcfa0f8a705806220bc367e1dfef392a0b 100644 --- a/features/home/src/main/ets/constants/HomeConstants.ets +++ b/features/home/src/main/ets/constants/HomeConstants.ets @@ -30,7 +30,7 @@ export class HomeConstants { /** * Text of tabs */ - static readonly tabBarTitles: string[] = ['首页', '朋友', '发布', '消息', '我']; + static readonly tabBarTitles: ResourceStr[] = [$r('app.string.tab1'), $r('app.string.tab2'), '', $r('app.string.tab4'), $r('app.string.tab5')]; /** * Constants of window size. diff --git a/features/home/src/main/ets/view/CommentKeyboard.ets b/features/home/src/main/ets/view/CommentKeyboard.ets index e931ea9a10cf1cf59717c5928c2c0324e989c3ed..16c380813b5aeda4f88a70c57d3cd18715dc0dfe 100644 --- a/features/home/src/main/ets/view/CommentKeyboard.ets +++ b/features/home/src/main/ets/view/CommentKeyboard.ets @@ -45,8 +45,8 @@ export struct CommentKeyboard { private richEditorController = new RichEditorController(); private frequentEmojiListHeight = 60; private friends: User[] = [ - { id: '0', avatar: $r('app.media.friend_1'), nickname: '朋友1' }, - { id: '1', avatar: $r('app.media.friend_2'), nickname: '朋友2' }, + { id: '0', avatar: $r('app.media.friend_1'), nickname: this.getResourceString($r('app.string.friend_nickname_1')) }, + { id: '1', avatar: $r('app.media.friend_2'), nickname: this.getResourceString($r('app.string.friend_nickname_2')) }, ]; private builderSpans: RichEditorSpan[] = []; @State keyboardHeight: number = 0; @@ -66,6 +66,10 @@ export struct CommentKeyboard { }); } + getResourceString(resource: Resource): string { + return getContext(this).resourceManager.getStringSync(resource.id); + } + addKeyboardHeightListener(win: window.Window) { win.on('keyboardHeightChange', height => { console.info('keyboard height has changed', px2vp(height)); diff --git a/features/home/src/main/ets/view/CommentSendDialog.ets b/features/home/src/main/ets/view/CommentSendDialog.ets index 484851519b0b2a34b05930b7e4236c0a0da1b395..3ed6aedaa0f8e3d8290b6821eaff75c4efa9b9b0 100644 --- a/features/home/src/main/ets/view/CommentSendDialog.ets +++ b/features/home/src/main/ets/view/CommentSendDialog.ets @@ -30,7 +30,7 @@ export struct CommentSendDialog { alignContent: Alignment.Center }) { Column() { - Text('发送的评论内容为：') + Text($r('app.string.send_title')) .margin({ bottom: 20 }) Flex({ wrap: FlexWrap.Wrap }) { ForEach(this.getComment(), (richEditorSpan: RichEditorSpan) => { @@ -42,7 +42,7 @@ export struct CommentSendDialog { } else { Text(`${richEditorSpan.value}(`) .fontColor(0xFF133667) - Text(`id：${(richEditorSpan.data as User).id}; 头像：`) + Text(`id：${(richEditorSpan.data as User).id}; avatar：`) Image((richEditorSpan.data as User).avatar) .width(20) Text(')') diff --git a/features/home/src/main/ets/view/Home.ets b/features/home/src/main/ets/view/Home.ets index d9c1859840c6fd82e55abba8b2fe2fd754e129fd..2ff181ed2e9db2d025848b7ff5a163fcaaf7bc1f 100644 --- a/features/home/src/main/ets/view/Home.ets +++ b/features/home/src/main/ets/view/Home.ets @@ -21,7 +21,7 @@ import { HomeContent } from "./HomeContent"; interface TabBar { icon?: Resource - text?: string + text?: ResourceStr } @Extend(Column) @@ -43,8 +43,12 @@ export struct Home { @State selectedTabIndex: number = 0 @Provide navDialogPageInfos: NavPathStack = new NavPathStack() + aboutToAppear(): void { + this.navDialogPageInfos.disableAnimation(true) + } + @Builder - TabBarTextBuilder(tabBarText: string, tabIndex: number) { + TabBarTextBuilder(tabBarText: ResourceStr, tabIndex: number) { Column() { Text(tabBarText) .fontColor(Color.White) diff --git a/features/home/src/main/resources/base/element/string.json b/features/home/src/main/resources/base/element/string.json index 441e38f2db260d6e6dbb28ef7ae26f8299eef9ce..c585888077d78188ef1fd9d0beda95dc5200fdbc 100644 --- a/features/home/src/main/resources/base/element/string.json +++ b/features/home/src/main/resources/base/element/string.json @@ -47,6 +47,26 @@ { "name": "friend_nickname_2", "value": "朋友2" + }, + { + "name": "tab1", + "value": "首页" + }, + { + "name": "tab2", + "value": "朋友" + }, + { + "name": "tab4", + "value": "消息" + }, + { + "name": "tab5", + "value": "我" + }, + { + "name": "send_title", + "value": "发送的评论内容为：" } ] } diff --git a/features/home/src/main/resources/en_US/element/string.json b/features/home/src/main/resources/en_US/element/string.json index f51a9c8461a55f6312ef950344e3145b7f82d607..500d859e27372ffe7d01dc11a49653b13c45b8fb 100644 --- a/features/home/src/main/resources/en_US/element/string.json +++ b/features/home/src/main/resources/en_US/element/string.json @@ -3,6 +3,69 @@ { "name": "page_show", "value": "page from package" + }, + { + "name": "video_title", + "value": "@Geographic Scenery" + }, + { + "name": "video_title_time", + "value": "2 hours ago" + }, + { + "name": "video_info_music", + "value": "Original Music" + }, + { + "name": "video_info", + "value": "The Sanjiangyuan region is located in the southern part of Qinghai Province, with an average altitude of over 4,000 meters. It is the source of the Yangtze River, Yellow River, and..." + }, + { + "name": "comment_list_title", + "value": "23 Comments" + }, + { + "name": "comment_button_text", + "value": "Write a Comment" + }, + { + "name": "comment_button_bg_color", + "value": "rgba(0, 0, 0, 0.05)" + }, + { + "name": "comment_button_text_color", + "value": "rgba(0, 0, 0, 0.6)" + }, + { + "name": "comment_keyboard_mask_bgcolor", + "value": "rgba(0, 0, 0, 0.1)" + }, + { + "name": "friend_nickname_1", + "value": "Friend 1" + }, + { + "name": "friend_nickname_2", + "value": "Friend 2" + },{ + "name": "tab1", + "value": "Home" + }, + { + "name": "tab2", + "value": "Friends" + }, + { + "name": "tab4", + "value": "Messages" + }, + { + "name": "tab5", + "value": "Profile" + }, + { + "name": "send_title", + "value": "The comment content sent is:" } ] -} +} \ No newline at end of file diff --git a/features/home/src/main/resources/en_US/media/comment_list.png b/features/home/src/main/resources/en_US/media/comment_list.png new file mode 100644 index 0000000000000000000000000000000000000000..ba13421729cef85d6c6770290b3d2460b5462524 Binary files /dev/null and b/features/home/src/main/resources/en_US/media/comment_list.png differ diff --git a/features/home/src/main/resources/zh_CN/element/string.json b/features/home/src/main/resources/zh_CN/element/string.json index f51a9c8461a55f6312ef950344e3145b7f82d607..c585888077d78188ef1fd9d0beda95dc5200fdbc 100644 --- a/features/home/src/main/resources/zh_CN/element/string.json +++ b/features/home/src/main/resources/zh_CN/element/string.json @@ -3,6 +3,70 @@ { "name": "page_show", "value": "page from package" + }, + { + "name": "video_title", + "value": "@地理风光" + }, + { + "name": "video_title_time", + "value": "2小时前" + }, + { + "name": "video_info_music", + "value": "创作的音乐" + }, + { + "name": "video_info", + "value": "三江源地区位于青海省南部，平均海拔4000米以上，这里是长江、黄河和..." + }, + { + "name": "comment_list_title", + "value": "23条评论" + }, + { + "name": "comment_button_text", + "value": "写评论" + }, + { + "name": "comment_button_bg_color", + "value": "rgba(0, 0, 0, 0.05)" + }, + { + "name": "comment_button_text_color", + "value": "rgba(0, 0, 0, 0.6)" + }, + { + "name": "comment_keyboard_mask_bgcolor", + "value": "rgba(0, 0, 0, 0.1)" + }, + { + "name": "friend_nickname_1", + "value": "朋友1" + }, + { + "name": "friend_nickname_2", + "value": "朋友2" + }, + { + "name": "tab1", + "value": "首页" + }, + { + "name": "tab2", + "value": "朋友" + }, + { + "name": "tab4", + "value": "消息" + }, + { + "name": "tab5", + "value": "我" + }, + { + "name": "send_title", + "value": "发送的评论内容为：" } ] } diff --git a/screenshots/devices/comment_list_EN.png b/screenshots/devices/comment_list_EN.png new file mode 100644 index 0000000000000000000000000000000000000000..f5d6e7f9b4e97e714f4b50c5ec95adc0cf22b65c Binary files /dev/null and b/screenshots/devices/comment_list_EN.png differ diff --git a/screenshots/devices/emoji_keyboard_EN.png b/screenshots/devices/emoji_keyboard_EN.png new file mode 100644 index 0000000000000000000000000000000000000000..b2815418659631a867fd7ef4de954fabfcac8293 Binary files /dev/null and b/screenshots/devices/emoji_keyboard_EN.png differ diff --git a/screenshots/devices/home_EN.png b/screenshots/devices/home_EN.png new file mode 100644 index 0000000000000000000000000000000000000000..5620c9c2cfa830703a34f7f3fa628d40dbef1395 Binary files /dev/null and b/screenshots/devices/home_EN.png differ diff --git a/screenshots/devices/keyboard_EN.png b/screenshots/devices/keyboard_EN.png new file mode 100644 index 0000000000000000000000000000000000000000..5aa876c893ba586716c28a9440cd556d1a0649fa Binary files /dev/null and b/screenshots/devices/keyboard_EN.png differ