mot_ui

项目结构

lib/
├── components/       # 可复用UI组件库
│   ├── chart.dart      # 图表组件
│   ├── data_list.dart  # 数据列表组件
│   ├── header.dart     # 页面顶部标题栏
│   └── side_menu.dart  # 侧边导航菜单
├── core/
│   └── theme/          # 主题配置
│       └── app_theme.dart  
├── main.dart          # 应用入口文件
└── view/
    └── home_page.dart  # 主界面布局实现

界面结构：

​ ​

依赖库：

  cupertino_icons: ^1.0.8  # 图标
  google_fonts: ^6.2.1    # 字体
  flutter_svg: ^2.0.17    # svg图片
  syncfusion_flutter_charts: ^28.2.7 # 图表

改进需求：

指根据屏幕尺寸动态调整页面布局，以适配不同尺寸的屏幕。

设备类型	宽度范围	典型应用场景
手机	< 650dp	垂直布局、简化功能
平板	650-1100dp	分栏布局、功能扩展
桌面	≥ 1100dp	多窗口、完整功能集

1.1 menu 侧边栏：

• 桌面：嵌入在界面左侧，默认显示，点击按钮切换显示/隐藏。
• 手机和平板：左侧菜单栏形式，点击按钮打开菜单。

1.2 header 顶部标题栏：

• 嵌入在界面顶部，点击按钮切换显示/隐藏。隐藏状态下，点击顶部灰色区域，显示顶部标题栏。

• 当设备类型为手机时，隐藏标题，避免宽度不足。

1.3 data_list 数据列表：

• 当宽度不足时，隐藏数据列表标题。

• 元素卡片根据可用宽度自动调整每行数量。

• 当设备类型为手机时，点击元素卡片显示chart图表界面。（将不会在视频中演示）

1.4 chart 图表：

• 当设备类型为手机时，隐藏图表，避免宽度不足。

• 当设备类型为平板/桌面时，显示图表，点击按键切换显示/隐藏。