美食论坛行业模板

介绍

该应用模板专为移动端设计，集成了美食论坛的核心功能，在业务功能上主要是包含了美食论坛常见的功能菜谱详情页、菜谱编辑页、搜索页、个人主页、发现页、课程页、活动页、账号验证码登录界面。

应用多处文章列表采用WaterFlow瀑布流容器的方式按不规则的形式展示菜谱动态。菜谱详情页展示详细菜谱信息，然后菜谱编辑页允许用户选择封面图片、添加或删除食材及步骤。搜索页通过CustomDialog组件实现底部弹出式搜索筛选并采用圆形按钮样式的radioButton优化体验，个人主页提供用户信息展示及内容管理，发现页帮助探索新菜谱和烹饪灵感，课程页提供烹饪教程学习资源，活动页展示平台活动信息，账号验证码登录界面则实现了以验证码形式登录的功能，通过input实现了单个数组输入的输入框效果。

具体实现

本模板的主页轮播图采用Swiper、Stack、Column、Row、Text、Image等多个组件进行实现了文字在图片上呈现的效果。
菜谱编辑中的图片选择ImagePicker组件，使用了photoAccessHelper类的PhotoViewPicker方法来获取图库里面的照片，通过Image组件渲染返回的Uri。
验证码输入界面中的6位验证码输入框组件，采用的方法是将一个TextInput通过设置他的height和opacity为0来隐藏，然后在用过Text、Line组件构建6个输入框样式，每一个都通过index绑定对应的值，然后在最外层添加点击事件触发对里面TextInput的聚焦，就可以实现6个单独输入框的验证码输入框。

效果预览

主页

发现

菜谱编辑

消息

我的

登录

工程目录

├──entry
│  └──src
│     └──main
│        ├──ets                                 // entry代码区
│        │  ├──entryability                     // 应用入口
│        │  ├──pages
│        │  │  ├──Index.ets                     // 入口页
│        │  │  └──PostPage.ets                  // 菜谱发布页
│        │  └──viewmodel                        
│        │     └──PostPage.ets                  // 发布菜谱model
│        └─resources                            // entry资源目录
├──feature
│  ├──discover                                  // 发现
│  │  └──src
│  │      └──main
│  │          ├──ets                         
│  │          │  ├──components
│  │          │  │  ├──Activity.ets             // 活动
│  │          │  │  ├──ActivityCard.ets         // 活动卡片
│  │          │  │  ├──Course.ets               // 课程
│  │          │  │  └──Recommend.ets            // 推荐
│  │          │  ├──pages
│  │          │  │  └──DiscoverPage.ets         // 发现页面
│  │          │  └──viewmodel
│  │          │     ├──Activity.ets             // 活动model
│  │          │     ├──Course.ets               // 课程model
│  │          │     └──Live.ets                 // 直播model
│  │          └──resources                      // 发现 资源目录
│  ├──home                                      // 首页
│  │  └──src
│  │      └──main
│  │          ├──ets                         
│  │          │  └──pages
│  │          │     ├──HomePage.ets             // 主页
│  │          │     ├──SearchContentPage.ets    // 搜索内容页面
│  │          │     └──SearchPage.ets           // 搜索页面
│  │          └──resources                      // 首页 资源目录
│  ├──message                                   // 消息
│  │  └──src
│  │      └──main
│  │          ├──ets                         
│  │          │  ├──pages
│  │          │     ├──ChatPage.ets             // 聊天页面
│  │          │  │  └──MessagePage.ets          // 消息页面
│  │          │  └──viewmodel
│  │          │     └──MessageModel.ets         // 消息model
│  │          └──resources                      // 消息 资源目录
│  ├──mine                                      // 我的
│  │  └──src
│  │      └──main
│  │          ├──ets                         
│  │          │  ├──components
│  │          │  │  └──OtherLogin.ets           // 其他登录方式组件
│  │          │  ├──pages
│  │          │  │  ├──CodePage.ets             // 验证码填写页面
│  │          │  │  ├──LoginCodePage.ets        // 验证码登录页面
│  │          │  │  ├──LoginPage.ets            // 手机号登录界面
│  │          │  │  ├──MinePage.ets             // 我的界面
│  │          │  │  └──SettingPage.ets          // 设置界面
│  │          │  └──viewmodel
│  │          │     └──SettingModel.ets         // 设置model
│  │          └──resources                      // 我的 资源目录
├──common
│  └──src
│     └──main
│        ├──ets                              // 公共组件 代码区
│        │  ├──components
│        │  │  ├──ArticleCard.ets                
│        │  │  ├──ArticleDetail.ets        
│        │  │  ├──Avatar.ets         
│        │  │  ├──ImagePicker.ets             
│        │  │  ├──RadioButtonGroup.ets
│        │  │  └──UnLogin.ets                   
│        │  ├──constants                     // 公共组件常量
│        │  └─viewmodel
│        │     ├──ArticleModel.ets           // 评论Model
│        │     ├──PostModel.ets
│        │  │  └──DeferredDataSource.ets         // 懒加载数据源
│        └──resources                        // 公共资源目录
└──hvigor