520kiss/kitchen

Fork 0

Files

Developer a59f54567f 重构目录树

2026-04-13 07:51:51 +08:00

23 KiB

Raw Permalink Blame History

小妈厨房 iOS 26 UI 设计方案

版本: 1.3 | 日期: 2026-04-12 | 设计语言: Liquid Glass (iOS 26)

本文档是项目 UI 改造的完整规范，任何开发者（含 AI Coder）必须按此方案执行。

一、设计语言：Liquid Glass 核心特征

iOS 26 的 Liquid Glass（液态玻璃） 是苹果自 iOS 7 扁平化以来最大的视觉变革，灵感源自 Vision Pro。

五大核心特征

#	特征	Flutter 实现
1	半透明毛玻璃	`BackdropFilter` + `ImageFilter.blur(20)`
2	动态光效/折射	渐变边框 + `Shimmer` 动画
3	深度层次感	多层 `Container` + `BoxShadow`
4	圆角同心设计	统一 `BorderRadius` 体系
5	内容聚焦	`Stack` + 半透明 `Positioned`

与现有代码映射

TapLiquidGlassNavigation → 保留，升级为 GlassNavBar
FloatingCupertinoTabBar   → 废弃，统一用 GlassNavBar
BottomBarStyle.liquidGlass → 透明玻璃杯效果（贴边样式）
BottomBarStyle.floating    → 悬浮液态玻璃效果
ThemeService.primaryColor (#2196F3) → 改为 iOS 蓝 #007AFF
ThemeService.secondaryColor (#FF9800) → 改为 iOS 橙 #FF9500

设计原则

内容为王 · 一致性 · 深度感 · 流畅性(250-350ms) · 可达性(≥44px触摸/≥11px文字)

二、设计令牌 (Design Tokens)

所有页面必须基于此令牌，禁止硬编码颜色、间距、圆角。若令牌中无所需值，需先在此处添加再使用。

颜色体系

类别	Token	值	用途
主色系	primary	`#007AFF`	iOS系统蓝
	primaryLight	`rgba(0,122,255,0.1)`	浅蓝背景
	secondary	`#FF9500`	iOS系统橙
背景系	background	`#F2F2F7`	iOS浅灰底
	card	`#FFFFFF`	卡片白
	cardAlpha	`rgba(255,255,255,0.72)`	半透明卡片
毛玻璃系	glass	`rgba(255,255,255,0.45)`	毛玻璃底色
	glassBorder	`rgba(255,255,255,0.3)`	毛玻璃边框
	glassShadow	`rgba(0,0,0,0.06)`	毛玻璃投影
文字系	text1 / text2 / text3	`#1C1C1E` / `#8E8E93` / `#C7C7CC`	主/副/占位文字
功能色	red / orange / green	`#FF3B30` / `#FF9500` / `#34C759`	删除/热门/成功

圆角体系

Token	值	用途	同心规则
radius-sm	8px	标签/Chip/小按钮	内层比外层小4-8px
radius-md	12px	卡片/输入框/列表项	xl→lg→md→sm
radius-lg	20px	大卡片/弹窗/搜索栏	28→20→12→8
radius-xl	28px	底栏/全屏容器	—
radius-full	999px	圆形头像/胶囊按钮	—

间距体系（4的倍数）

Token	值	用途
space-1 ~ space-7	4/8/12/16/20/24/32px	图标间距→页面顶部

毛玻璃参数

blur: 20-30px | opacity: 0.45-0.72 | border: 0.5px solid rgba(255,255,255,0.3) | shadow: 0 4px 16px rgba(0,0,0,0.06)

字体 / 阴影 / 动画

字体	值	阴影	值	动画	值
font-xs	11px 标签/徽章	shadow-sm	`0 1px 3px rgba(0,0,0,0.04)`	fast	150ms 按钮
font-sm	12px 副文字	shadow-md	`0 4px 12px rgba(0,0,0,0.06)`	normal	250ms 页面切换
font-md	14px 正文	shadow-lg	`0 8px 24px rgba(0,0,0,0.08)`	slow	350ms 弹窗
font-lg	16px 标题			curve	easeInOutCubic
font-xl	18px 大标题
font-xxl	22px 页面主标题

三、页面架构总览

Tab 结构变更

现有 4Tab:                    新 4Tab:
Tab0: 🏠 首页          →     Tab0: 🏠 首页 (信息流)
Tab1: 🛒 购物车(实为收藏)→    Tab1: ❤️ 收藏
Tab2: 🕐 足迹           →     Tab2: 🔍 发现 (聚合页)
Tab3: 👤 个人中心        →     Tab3: 👤 我的 (简化设置)

全局布局

┌─────────────────────────────────────┐
│  ⚠️ 离线横幅 (仅离线时显示)         │
│  ┌─────────────────────────────┐    │
│  │      Page Content Area      │    │
│  │    (IndexedStack 切换)      │    │
│  │  首页 | 收藏 | 发现 | 我的   │    │
│  └─────────────────────────────┘    │
│  🫧 Liquid Glass 底部导航栏 🫧      │
│   🏠首页  ❤️收藏  🔍发现  👤我的    │
└─────────────────────────────────────┘

导航栏规范

统一使用 CupertinoPageScaffold + CupertinoNavigationBar
背景: 毛玻璃(blur:20, opacity:0.72) | 标题: font-xl(18px)+text1
子页面: 左侧返回箭头(CupertinoIcons.back) | 右侧功能按钮(图标22px)

四、各页面布局演示

Tab0：首页（Home）

┌─────────────────────────────────────┐
│  🍳 小妈厨房              🔔  👤   │
├─────────────────────────────────────┤
│  ┌─ 营养仪表盘 (NutritionDashboard)─┐ │
│  │ <20> 今日摄入: 热量/蛋白质/碳水...│ │
│  └──────────────────────────────────┘ │
│                                     │
│  🌊 发现                    24 项   │
│  探索菜谱、食材、分类              │
│  ┌──────┐ ┌────────────┐          │
│  │🖼️封面│ │🥬食材卡片  │          │
│  │红烧排│ │⚠含过敏原  │          │
│  │骨 ⭐4.8│ │简介文字.. │          │
│  │👁1.2k│ └────────────┘          │
│  └──────┘ ┌──────┐ ┌──────────┐  │
│  ┌──────────┐ │📂分类│ │🏷️口味标签│ │
│  │🖼️宽图    │ │家常菜│ │酸辣甜鲜..│ │
│  │宫保鸡丁  │ │128项│ └──────────┘  │
│  │⭐4.5     │ └──────┘ ┌──────────┐ │
│  │👁2.3k    │ ┌──────────┐ │🕐早餐推荐│ │
│  └──────────┘ │🖼️菜品卡  │ │7-10点.. │ │
│              │番茄炒蛋  │ └──────────┘ │
│              └──────────┘ ↓下拉加载更多│
└─────────────────────────────────────┘

操作: 下拉刷新/上拉加载/点击菜品→详情/点击食材→搜索/点击分类→浏览/点击标签→列表/滚动隐藏顶部栏

布局说明 (v0.90.0 更新):

移除旧「今日推荐」「分类浏览」「口味工艺」横向卡片
使用 api_discover.php 接口数据构建 MasonryGridView 2列瀑布流
5种卡片类型混合展示：菜品(Recipe)/食材(Ingredient)/分类(Category)/口味标签(Tag)/时段(MealTime)
Liquid Glass 毛玻璃风格统一视觉

Tab1：收藏（Favorites）

┌─────────────────────────────────────┐
│  ❤️ 我的收藏              🗑️ 清空   │
├─────────────────────────────────────┤
│  ┌──┐ 红烧排骨  家常菜·👁1.2k  ❤   │
│  │🖼️│                              │
│  ├──┤ ┌──┐ 宫保鸡丁  川菜·👁2.3k  ❤ │
│  │🖼️│                              │
│  └──┘ 共12个菜谱    [清空收藏]      │
│  ┌─ 空状态: ❤ 收藏夹是空的 ──────┐  │
│  │   去首页发现美味吧 →            │  │
│  └────────────────────────────────┘  │
└─────────────────────────────────────┘

操作: 左滑删除/点击❤取消收藏/清空确认弹窗/空状态→切换首页Tab

Tab2：发现（Discover）

┌─────────────────────────────────────┐
│  🔍 发现                            │
├─────────────────────────────────────┤
│  ┌─ 🔍 搜索菜谱、食材、标签... ──┐  │
│  ├─ 🏷️ 热门标签: 家常|快手|川菜|粤菜 →┤
│  ├─ 🎲 今天吃什么? 让我来帮你选! → ─┤
│  ├─ 🔥 热门排行: 🥇排骨 🥈宫保 🥉番茄→┤
│  ├─ 📂 分类浏览 (2列网格):          │  │
│  │  🍳家常 🥘快手 🌶️川菜 🍜粤菜    │  │
│  └────────────────────────────────┘  │
└─────────────────────────────────────┘

操作: 搜索→实时列表/标签筛选/今天吃什么→WhatToEatPage/排行→HotPage/分类→列表页

Tab3：我的（Profile）

┌─────────────────────────────────────┐
│  👤 我的                            │
├─────────────────────────────────────┤
│  ┌─ 用户卡片(毛玻璃): 👤美食爱好者 ─┐│
│  │  user@example.com [编辑][个性化] ││
│  ├─ 📊 统计: 12收藏 56浏览 8点赞 ──┤│
│  ├─ 分组1: 今天吃什么/数据管理/设置 →││
│  ├─ 分组2: 购物单/营养中心/睡眠提醒→││
│  └────────────────────────────────┘│
└─────────────────────────────────────┘

子页面：菜谱详情（Recipe Detail）

┌─────────────────────────────────────┐
│  ← 返回            分享  收藏  更多  │
├─────────────────────────────────────┤
│  ┌─ 封面大图 (圆角+阴影) ─────────┐ │
│  ├─ 标题区: 名称/评分/时间/难度 ────┤ │
│  ├─ 作者卡片: 头像+昵称+关注 ──────┤ │
│  ├─ 信息卡: 口味/工艺/份量/热量 ────┤ │
│  ├─ 食材区: 图片+名称+用量+过敏警告─┤ │
│  ├─ 步骤区: 编号+图文+计时器 ──────┤ │
│  ├─ 营养区: 宏量营养素环形图 ──────┤ │
│  ├─ 标签区: 可跳转的分类/口味标签 ──┤ │
│  ├─ 统计栏: 👁浏览 ❤点赞 ⭐推荐 ───┤ │
│  ├─ 操作栏: 开始烹饪/分享/评分 ────┤ │
│  └─ PicId调试卡(开发模式可见) ─────┘ │
└─────────────────────────────────────┘

子页面：工具中心（Tools Center）

┌─────────────────────────────────────┐
│  ← 返回               工具中心      │
├─────────────────────────────────────┤
│  ┌─ 分类Tab: 全部|烹饪|健康|数据|规划┤│
│  ├─ 工具网格 (3列):                 ││
│  │  ⏱️计时 📐缩放 🍽️时段 📊BMI      ││
│  │  ⚠️过敏 🥗营养 🔢换算 🥕食材详情 ││
│  │  🔥排行 📈统计 📅规划            ││
│  └────────────────────────────────┘│
└─────────────────────────────────────┘

五、导航流程图

                        ┌──────────┐
                        │  首页     │
                        │ (Tab0)   │
                        └────┬─────┘
                             │ 点击卡片
                             ▼
                   ┌─────────────────┐
                   │  菜谱详情页       │◄─────────────────┐
                   └──┬──────┬───────┘                  │
                      │      │                          │
           ┌──────────┘      └──────────┐               │
           ▼                             ▼               │
    ┌────────────┐              ┌────────────┐          │
    │ 笔记页面    │              │ 食材详情    │──────────┘
    └────────────┘              └─────┬──────┘
                                       │
                                ┌──────▼──────┐
                                │ 食材菜品列表  │
                                └─────────────┘

┌──────────┐    ┌──────────┐    ┌──────────┐    ┌──────────┐
│ 收藏(Tab1)│    │ 发现(Tab2)│    │ 我的(Tab3)│    │ 工具中心   │
└────┬─────┘    └──┬───────┘    └──┬───────┘    └────┬─────┘
     │              │              │                │
     ▼              ▼              ▼                ▼
  详情页        搜索/分类/排行   设置子页面      各工具子页面

六、Liquid Glass 组件规范

6.1 GlassContainer 毛玻璃容器

GlassContainer(
  child: Widget,
  blur: double,        // 默认20
  opacity: double,     // 默认0.45
  borderRadius: double,// 默认radius-lg(20)
  border: bool,        // 默认true
  padding: EdgeInsets,
)
// 使用场景: 卡片/弹窗/浮层

6.2 GlassNavBar 液态玻璃底栏

GlassNavBar(
  currentIndex: int,
  onTap: (int),
  items: [
    NavItem(icon: CupertinoIcons.home, label: '首页'),
    NavItem(icon: CupertinoIcons.heart, label: '收藏'),
    NavItem(icon: CupertinoIcons.search, label: '发现'),
    NavItem(icon: CupertinoIcons.person, label: '我的'),
  ],
)
// 特性: blur(20)+opacity(0.72)+圆角xl(28)+选中高亮动画

6.3 GlassFeedCard 信息流卡片

GlassFeedCard(
  imageUrl: String,
  title: String,
  subtitle: String,
  viewCount: int,
  likeCount: int,
  recommendCount: int,
  onTap: VoidCallback,
  onLike: VoidCallback,
  onRecommend: VoidCallback,
)
// 特性: 圆角md(12)+shadow-md+毛玻璃底部操作栏

6.4 GlassSearchBar 搜索栏

GlassSearchBar(
  hintText: '搜索菜谱、食材...',
  onChanged: (String),
  onSubmitted: (String),
)
// 特性: 圆角lg(20)+毛玻璃背景+搜索图标+清除按钮

6.5 GlassSegmentedControl 分段选择器

GlassSegmentedControl(
  segments: ['推荐', '最新', '热门', '个性化'],
  selectedIndex: int,
  onSelected: (int),
)
// 特性: 毛玻璃滑块+250ms平滑过渡+选中高亮

6.6 GlassSettingsGroup/Tile 设置组（备用）

GlassSettingsGroup(
  header: '通用',
  children: [
    GlassSettingsTile(title: '今天吃什么', trailing: '→'),
    GlassSettingsTile(title: '深色模式', toggle: true),
  ],
)

七、改进对比

维度	现有问题	iOS 26 改进
视觉风格	Material/Cupertino混用，颜色不统一	统一Liquid Glass毛玻璃风格
导航栏	各页面实现不一致	统一CupertinoPageScaffold+毛玻璃
底部栏	edge/floating两套并存	统一GlassNavBar(floating)
颜色	primary=#2196F3(Material蓝)	改为iOS标准#007AFF
圆角	各组件硬编码不统一	统一radius-sm/md/lg/xl体系
卡片	扁平无层次感	毛玻璃半透明+多层深度
动画	无统一规范	150/250/350ms三级动画体系
暗色模式	部分支持	完整DarkDesignTokens适配

八、暗色模式适配

Token	Light	Dark
background	`#F2F2F7`	`#000000`
card	`#FFFFFF`	`#1C1C1E`
text1	`#1C1C1E`	`#F2F2F7`
text2	`#8E8E93`	`#8E8E93`
text3	`#C7C7CC`	`#48484A`
glass	`rgba(255,255,255,0.45)`	`rgba(30,30,30,0.65)`
glassBorder	`rgba(255,255,255,0.3)`	`rgba(255,255,255,0.1)`
glassShadow	`rgba(0,0,0,0.06)`	`rgba(0,0,0,0.3)`
shadow-sm/md/lg	alpha降低	alpha提高

实现方式: CupertinoTheme.brightnessOf(context) 判断，使用 DarkDesignTokens 类获取暗色值

九、响应式适配

设备	宽度范围	布局策略
手机	360-640px	单列
平板竖屏	600-900px	双列(折叠屏适配)
平板横屏	768-1024px	双列+侧边详情
桌面	≥1024px	多列+最大宽度1200px居中

折叠屏特殊处理: 避免关键内容置于折痕区域(屏幕中央)，使用order或grid调整流式排列

十、实施计划

阶段	内容	状态
P0	DesignTokens全局替换硬编码值	✅ 已完成
P1	GlassContainer/GlassNavBar/GlassFeedCard基础组件	✅ 已完成
P2	首页/发现页改造为信息流	🔄 进行中
P3	收藏页/我的页改造	⏳ 待开始
P4	暗色模式完整适配	⏳ 待开始
P5	响应式多端适配	⏳ 待开始

十一、iOS 组件清单（Component Inventory）

统计日期: 2026-04-12 | 总计48个组件 | 35已使用 ✅ | 10未使用 ❌ | 3待集成 ⚠️

11.1 基础组件 (`widgets/base/`) — 4个

文件	类名	状态	引用数
app_page_scaffold.dart	AppPageScaffold, AppCard	✅	2+
skeleton_loader.dart	SkeletonLoader	✅	2
standard_button.dart	StandardButton	✅	2
tap_liquid_glass_nav.dart	TapLiquidGlassNavigation	❌	0

11.2 Cupertino组件 (`widgets/cupertino/`) — 3个（全部未使用）

文件	类名	状态	备注
app_button.dart	AppButton	❌	项目主要用CupertinoButton
app_card.dart	AppCard	❌	⚠️与base/app_page_scaffold.dart同名重复
app_text_field.dart	AppTextField	❌	可后续启用

11.3 毛玻璃组件 (`widgets/glass/`) — 8个

文件	类名	状态	引用数
glass_container.dart	GlassContainer	✅	9处
glass_nav_bar.dart	GlassNavBar	✅	1
glass_feed_card.dart	GlassFeedCard	✅	1
glass_search_bar.dart	GlassSearchBar	✅	2
glass_segmented_control.dart	GlassSegmentedControl	✅	4
glass_animations.dart	GlassBounce/Shimmer	❌	0
glass_responsive.dart	GlassResponsive	❌	0
glass_settings_tile.dart	GlassSettingsGroup/Tile	❌	0

11.4 状态组件 (`widgets/states/`) — 5个

文件	类名	状态	引用数
empty_state.dart	EmptyState	✅	11处
error_state.dart	ErrorState	✅	3处
offline_banner.dart	OfflineBanner	⚠️	仅自身定义
standard_dialog.dart	StandardDialog	✅	1
standard_picker.dart	StandardPicker<T>	❌	0

11.5 通用组件 (`widgets/`根目录) — 11个

文件	类名	状态	引用数
adaptive_widgets.dart	AdaptiveDestination/Interface	❌	0
charts_widgets.dart	营养图表	✅	2
custom_widgets.dart	自定义控件集	✅	1
loading_indicator.dart	LoadingIndicator	⚠️	间接依赖
navigation_widgets.dart	导航组件	✅	1
nutrition_dashboard_card.dart	NutritionDashboardCard	✅	2
product_card.dart	ProductCard	⚠️	间接依赖
recipe_card.dart	RecipeCard	✅	7处
recipe_image.dart	RecipeImage	✅	10处
responsive_grid.dart	ResponsiveGrid	⚠️	间接依赖
skeleton_widgets.dart	骨架屏组件	✅	1

11.6 菜谱详情组件 (`widgets/recipe_detail/`) — 17个（全部已使用）

action_bar, allergen_warning, author_card, category_breadcrumb, cover_image, indices_card, ingredient_details, ingredients_section, meta_info_card, nutrition_section, picid_card, rating_dialog, skeleton_view, statistics_bar, steps_section, tags_section, time_info, title_section

11.7 未用组件处理建议

组件	建议
TapLiquidGlassNavigation	整合到glass_nav_bar或删除
cupertino/AppButton/AppCard/AppTextField	删除cupertino目录，合并AppCard到base
GlassAnimations	保留，点赞动画可启用
GlassResponsive	删除，功能简单可内联
GlassSettingsGroup/Tile	保留，设置页改造时启用
StandardPicker	保留，表单页可启用
AdaptiveWidgets	删除，当前无平板需求
OfflineBanner	集成到全局App Shell

变更记录

日期	版本	变更内容
2026-04-12	1.3	压缩重构: 1182行→~780行；合并设计令牌为紧凑表格；精简ASCII图和操作表；组件清单改为汇总格式
2026-04-12	1.2	新增第十一章「iOS 组件清单」：完整统计48个组件使用状态，按6个分类整理，含处理建议
2026-04-09	1.1	重写完整文档：增加目录、设计原则、动画规范、暗色模式详细参数、响应式规则、实施计划状态追踪
2026-04-09	1.0	初始版本：基础设计方案

23 KiB Raw Permalink Blame History Unescape Escape