[HarmonyOS Next示例代码] 鸿蒙UI开发 - 内容发布器

 鸿蒙UI开发 - 内容发布器 源码下载地址

介绍

本示例通过RichEditor组件以及常用的ArkUI组件，实现一个图文内容发布器。

效果预览

手机运行效果图

折叠屏运行效果图

平板运行效果图

使用说明

1. 点击“添加优质首图”，选择好图片后，图片显示在横向列表中。
2. 点击“标题”输入框，可以输入相应的信息。
3. 点击“正文”输入框，可以输入相应的信息。
4. 点击页面下方按钮，下方显示“图文标题”列表，选择相应的“图文标题”后，“图文标题”会在正文中显示。
5. 点击页面下方“@”按钮，页面进入联系人页面，选择需要@的联系人，返回发帖页面，在正文输入框会显示选中联系人的昵称。
6. 点击页面下方“#”按钮，页面弹出话题列表内容,选择对应的话题，弹框关闭，在正文输入框会显示选中的话题。
7. 点击左下“添加位置”，“添加位置”下方区域会多出一行附近位置信息，选中后，“添加位置”会变成选中的位置信息。

工程目录

├──entry/src/main/ets                         // 代码区
│  ├──constants
│  │  └──CommonConstants.ets                  // 公共常量
│  ├──entryability
│  │  └──EntryAbility.ets       
│  ├──model
│  │  └──CommonModel.ets                      // 公共实体类       
│  ├──pages
│  │  ├──ContactsPage.ets                     // 联系人页面
│  │  └──Home.ets                             // 主页面       
│  ├──utils
│  │  ├──BreakpointConstants.ets              // 断点常量类
│  │  ├──FileUtil.ets                         // 选择图片工具类
│  │  ├──LocationUtil.ets                     // 本地位置工具类
│  │  └──Logger.ts                            // 日志文件
│  └──view
│     ├──AddPic.ets                           // 添加图片模块
│     ├──BottomToolbar.ets                    // 底部工具模块
│     ├──EditorComponent.ets                  // 编辑输入模块
│     ├──GraphicTitleComponent.ets            // 图文标题模块
│     ├──TopArea.ets                          // 顶部区域模块
│     └──TopicContentComponent.ets            // 话题内容模块
└──entry/src/main/resources                   // 应用资源目录

相关权限

• 申请获取设备位置信息权限:ohos.permission.APPROXIMATELY_LOCATION和ohos.permission.LOCATION

依赖

不涉及