multidevice_adaption_sample

介绍

针对新产品设备形态或者产品新规格变化，导致开发者出现适配困难，需要提供产品差异规格说明和指导（包含硬件规格、软件适配场景、打样应用方向等），方便开发者快速适配。 开发基于Flutter实现1个基线demo（针对单框架16:9直板机适配一多能力的demo），demo要覆盖以下三类场景的典型页面 场景一：App多设备定位类似，功能类似，体验优先 1、瀑布流卡片首页 2、新闻卡片首页 场景二：App多设备定位类似，部分功能和体验存在差异 3、IM类首页 4、短视频播放 场景三：App多设备定位不同，功能和体验不同 5、办公首页（PC和移动端功能和体验不同） 硬件差异 6、扫码弹窗 7、地图首页 8、拍照页面

效果预览

首页运行效果图如下：

手机

瀑布流运行效果图如下：

手机

扫码运行效果图如下：

手机

拍照运行效果图如下：

手机

办公首页运行效果图如下：

手机

IM类首页运行效果图如下：

手机

使用说明

• 安装依赖

  flutter pub get
  

• 初始化工程，创建各平台目录

  flutter create .
  

• 运行项目到设备

  //获取已连接设备
  flutter devices
  
  //运行到指定设备
  flutter run -d 设备号
  

工程目录

├─assets                                        // 图片目录
│  └──hardware                                  // 硬件差异页面相关图片
├─lib
│  ├──home_page.dart                            // 首页
│  ├──main.dart                                 // 程序入口页
│  ├──hardware                                  // 硬件差异相关页面                   
│  │  ├──camera_page.dart                       // 相机页面
│  │  ├──scanner_page.dart                      // 扫码页面
│  │  ├──scanner_result_page.dart               // 扫码结果页面
│  │  └──widget
│  │     ├──camera_capture_button.dart          // 自定义拍照和录像按钮
│  │     └──camera_mode_selector_widget.dart    // 自定义相机切换模式组件
│  ├──office_home                               // 办公首页页面                   
│  │  ├──components                             // 办公首页页面组件
│  │  │  ├──FileCard.dart                       // 文件卡片组件
│  │  │  ├──textInfoTop.dart                    // 文本信息组件
│  │  │  └──top.dart                            // 页面头部导航组件
│  │  └──index.dart                             // 办公首页页面入口
│  ├──im_home                                   // im类首页页面                   
│  │  ├──components                             // im类首页页面组件
│  │  │  ├──card.dart                           // 聊天卡片组件
│  │  │  ├──cardList.dart                       // 聊天列表组件
│  │  │  ├──mainContent.dart                    // 聊天内容组件
│  │  │  └──pageTop.dart                        // 页面头部导航组件
│  │  └──index.dart                             // IM首页页面入口
│  ├──water_flow                                // 瀑布流相关页面                   
│  │  ├──components                             // 瀑布流页面组件
│  │  │  ├──action_widget.dart                  // 分享评论收藏组件
│  │  │  ├──content_card.dart                   // 文本内容组件
│  │  │  ├──custom_tab.dart                     // tabbar组件
│  │  │  ├──image_content_widget.dart           // 图片信息组件
│  │  │  ├──item_widget.dart                    // 瀑布流卡片组件
│  │  │  ├──person_info_card.dart               // 发布信息组件
│  │  │  └──search_widget.dart                  // 搜索页面组件
│  │  ├──utils                                
│  │  │  └──water_data_util.dart                // 瀑布流数据信息
│  │  └──waterfall_flow_page.dart               // 瀑布流页面入口         
│  └──utils
│     ├──breakpoint_provider.dart               // 断点监听类
│     └──breakpoint_util.dart                   // 断点工具类

约束与限制

1. 本示例仅支持HarmonyOS系统。
2. HarmonyOS系统：HarmonyOS NEXT Developer Beta1及以上。
3. DevEco Studio版本：DevEco Studio 6.0.0 Beta1及以上。
4. HarmonyOS SDK版本：HarmonyOS NEXT Developer Beta1 SDK及以上。