# 老妈厨房 iOS 26 UI 设计方案 > 版本: 1.1 | 日期: 2026-04-09 | 设计语言: Liquid Glass (iOS 26) > > 本文档是项目 UI 改造的完整规范，任何开发者（含 AI Coder）必须按此方案执行。 > 修改 UI 前必须先阅读本文档，确保风格统一。 --- ## 目录 1. [设计语言：Liquid Glass 核心特征](#一设计语言liquid-glass-核心特征--flutter-实现) 2. [设计令牌：颜色/圆角/间距/毛玻璃/字体](#二设计令牌-design-tokens) 3. [页面架构：4Tab 新方案 + 全局布局](#三页面架构总览) 4. [页面布局：7个页面纯文本演示 + 操作逻辑](#四各页面纯文本布局演示) 5. [导航流程图：页面间跳转关系](#五页面导航流程图) 6. [组件规范：6个 Liquid Glass 组件](#六liquid-glass-组件规范) 7. [改进对比：现有问题 vs iOS 26 改进](#七关键改进点对比现有设计) 8. [暗色模式：暗色参数适配](#八暗色模式适配) 9. [响应式：手机/平板/横屏适配](#九响应式适配) 10. [实施计划：4阶段改造路线](#十实施计划) --- ## 一、设计语言：Liquid Glass 核心特征 + Flutter 实现 iOS 26 的 **Liquid Glass（液态玻璃）** 是苹果自 iOS 7 扁平化以来最大的视觉变革， 灵感源自 Vision Pro 的空间交互界面。 ### 1.1 五大核心特征 | # | 特征 | 说明 | Flutter 实现方式 | |---|------|------|-----------------| | 1 | **半透明毛玻璃** | 界面元素具备玻璃质感，内容透过可见 | `BackdropFilter` + `ImageFilter.blur(sigmaX: 20, sigmaY: 20)` | | 2 | **动态光效/折射** | 元素随交互呈现光泽变化 | 渐变边框 + `Shimmer` 动画 | | 3 | **深度层次感** | 多层叠加创造空间感 | 多层 `Container` + `BoxShadow` | | 4 | **圆角同心设计** | 控件圆角匹配硬件圆角，嵌套时递减 | 统一 `BorderRadius` 体系（见设计令牌） | | 5 | **内容聚焦** | 透明控件悬浮于内容之上，内容为王 | `Stack` + 半透明 `Positioned` | ### 1.2 与现有代码的映射 ``` 现有代码 → iOS 26 改造方向 ───────────────────────────────────────────────────── TapLiquidGlassNavigation (已有) → 保留，升级为 GlassNavBar FloatingCupertinoTabBar (已有) → 废弃，统一用 GlassNavBar BottomBarStyle.edge/floating (已有) → 废弃 edge，统一 floating ThemeService.primaryColor (#2196F3) → 改为 iOS 蓝 #007AFF ThemeService.secondaryColor (#FF9800) → 改为 iOS 橙 #FF9500 ``` ### 1.3 设计原则 ``` 1. 内容为王 — 透明控件不遮挡内容，让菜谱图片和文字成为主角 2. 一致性 — 所有页面使用统一的毛玻璃参数、圆角、间距 3. 深度感 — 通过多层叠加和投影创造空间层次 4. 流畅性 — 所有状态切换使用 250ms-350ms 的弹性动画 5. 可达性 — 触摸目标不小于 44px，文字不小于 11px ``` --- ## 二、设计令牌 (Design Tokens) > 所有页面必须基于此令牌，禁止硬编码颜色、间距、圆角。 > 若令牌中无所需值，需先在此处添加再使用。 ### 2.1 颜色体系 ``` ┌─────────────────────────────────────────────────────┐ │ 主色系 │ │ 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: #1C1C1E (主文字) │ │ text2: #8E8E93 (副文字) │ │ text3: #C7C7CC (占位文字) │ │ │ │ 功能色 │ │ red: #FF3B30 (删除/退出) │ │ orange: #FF9500 (热门/推荐) │ │ green: #34C759 (成功/在线) │ └─────────────────────────────────────────────────────┘ ``` ### 2.2 圆角体系 ``` radius-sm: 8px → 标签/Chip/小按钮 radius-md: 12px → 卡片/输入框/列表项 radius-lg: 20px → 大卡片/弹窗/搜索栏 radius-xl: 28px → 底栏/全屏容器/分段选择器 radius-full: 999px → 圆形头像/胶囊按钮 圆角同心规则（嵌套时内层比外层小 4-8px）: 外层 radius-xl(28) → 内层 radius-lg(20) 外层 radius-lg(20) → 内层 radius-md(12) 外层 radius-md(12) → 内层 radius-sm(8) ``` ### 2.3 间距体系 (4的倍数) ``` space-1: 4px → 图标与文字间距 space-2: 8px → 紧凑元素间距 space-3: 12px → 列表项间距 space-4: 16px → 页面边距/卡片内边距 space-5: 20px → 区块间距 space-6: 24px → 大区块间距 space-7: 32px → 页面顶部间距 ``` ### 2.4 毛玻璃参数 ``` 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) ``` ### 2.5 字体体系 ``` font-xs: 11px → 标签/徽章 font-sm: 12px → 副文字/统计数字 font-md: 14px → 正文/列表项 font-lg: 16px → 标题/按钮 font-xl: 18px → 大标题 font-xxl: 22px → 页面主标题 ``` ### 2.6 阴影体系 ``` shadow-sm: 0 1px 3px rgba(0,0,0,0.04) → 轻微浮起 shadow-md: 0 4px 12px rgba(0,0,0,0.06) → 卡片标准 shadow-lg: 0 8px 24px rgba(0,0,0,0.08) → 弹窗/浮层 ``` ### 2.7 动画体系 ``` duration-fast: 150ms → 按钮点击/开关 duration-normal: 250ms → 页面切换/分段选择 duration-slow: 350ms → 弹窗/底栏展开 curve: Curves.easeInOutCubic ``` --- ## 三、页面架构总览 ### 3.1 Tab 结构（新方案 vs 现有） ``` 现有 4Tab: 新 4Tab: ───────────────── ───────────────── Tab0: 🏠 首页 Tab0: 🏠 首页 (信息流) Tab1: 🛒 购物车 (实为收藏) Tab1: ❤️ 收藏 Tab2: 🕐 足迹 Tab2: 🔍 发现 (新增聚合页) Tab3: 👤 个人中心 Tab3: 👤 我的 (简化设置) ``` **变更说明：** - Tab1：「购物车」更名为「收藏」，图标改为 ❤️，语义更准确 - Tab2：「足迹」替换为「发现」，聚合搜索/分类/功能入口 - Tab3：「个人中心」简化为「我的」，去掉子Tab，改为纯设置列表 - 足迹功能移入「我的」设置列表中作为子页面 ### 3.2 全局布局 ``` ┌─────────────────────────────────────────────┐ │ App Shell (全局) │ │ │ │ ┌───────────────────────────────────────┐ │ │ │ ⚠️ 离线横幅 (OfflineBanner) │ │ ← 仅离线时显示 │ ├───────────────────────────────────────┤ │ │ │ │ │ │ │ Page Content Area │ │ │ │ (IndexedStack 切换) │ │ │ │ │ │ │ │ Tab0: 首页 Tab1: 收藏 │ │ │ │ Tab2: 发现 Tab3: 我的 │ │ │ │ │ │ │ ├───────────────────────────────────────┤ │ │ │ 🫧 Liquid Glass 底部导航栏 🫧 │ │ │ │ 🏠首页 ❤️收藏 🔍发现 👤我的 │ │ │ └───────────────────────────────────────┘ │ └─────────────────────────────────────────────┘ ``` ### 3.3 导航栏规范 ``` 所有页面统一使用 CupertinoPageScaffold + CupertinoNavigationBar 导航栏样式: - 背景: 毛玻璃效果 (blur: 20, opacity: 0.72) - 中间标题: font-xl (18px) + text1 色 - 左侧: 返回箭头 (子页面) 或 无 (Tab页) - 右侧: 功能按钮 (图标 22px) 子页面导航栏: - 左侧: CupertinoIcons.back (自动带返回手势) - 右侧: 按需放置操作按钮 ``` --- ## 四、各页面纯文本布局演示 ### 4.1 Tab0：首页（Home） ``` ┌─────────────────────────────────────┐ │ 🍳 老妈厨房 🔔 👤 │ ← Liquid Glass 导航栏 ├─────────────────────────────────────┤ │ │ │ ┌─────────────────────────────┐ │ │ │ 🔍 搜索菜谱、食材... │ │ ← 毛玻璃搜索栏 │ └─────────────────────────────┘ │ │ │ │ ┌─────────────────────────────┐ │ │ │ 推荐 │ 最新 │ 热门 │ 个性 │ ← 分段选择器 │ └─────────────────────────────┘ │ │ │ │ ┌─────────────────────────────┐ │ │ │ ┌──────┐ │ │ │ │ │ 🖼️ │ 红烧排骨 │ │ ← 信息流卡片 │ │ │ │ 家常菜 · 👁 1.2k │ │ │ │ └──────┘ ❤️ 128 ⭐ 56 │ │ │ ├─────────────────────────────┤ │ │ │ ┌──────┐ │ │ │ │ │ 🖼️ │ 番茄炒蛋 │ │ │ │ │ │ 快手菜 · 👁 890 │ │ │ │ └──────┘ ❤️ 96 ⭐ 42 │ │ │ └─────────────────────────────┘ │ │ │ │ ↓ 下拉刷新 · ↑ 上拉加载更多 │ │ │ └─────────────────────────────────────┘ ``` **操作逻辑：** | 操作 | 行为 | 动画 | |------|------|------| | 下拉 | 刷新当前信息流 | 刷新指示器旋转 | | 上拉 | 加载更多（无限滚动） | 底部加载指示器 | | 点击卡片 | 进入菜谱详情 | 右滑入 | | 点击 ❤️ | 点赞 | 红心放大缩回 + 数字+1 | | 点击 ⭐ | 推荐 | 星星旋转 + 数字+1 | | 点击 🔔 | 通知列表 | 右滑入 | | 分段切换 | 切换推荐/最新/热门/个性化 | 滑块平滑移动 250ms | | 点击搜索栏 | 展开搜索页面 | 底部上滑 | --- ### 4.2 Tab1：收藏（Favorites） ``` ┌─────────────────────────────────────┐ │ ❤️ 我的收藏 🗑️ 清空 │ ← Liquid Glass 导航栏 ├─────────────────────────────────────┤ │ │ │ ┌─────────────────────────────┐ │ │ │ ┌──────┐ │ │ │ │ │ 🖼️ │ 红烧排骨 │ │ ← 收藏项 │ │ │ │ 家常菜 · 👁 1.2k │ │ │ │ └──────┘ ❤️ │ │ │ ├─────────────────────────────┤ │ │ │ ┌──────┐ │ │ │ │ │ 🖼️ │ 宫保鸡丁 │ │ │ │ │ │ 川菜 · 👁 2.3k │ │ │ │ └──────┘ ❤️ │ │ │ └─────────────────────────────┘ │ │ │ │ ─── 空状态 ─── │ │ ┌─────────────────────────────┐ │ │ │ │ │ │ │ ❤️ │ │ │ │ 收藏夹是空的 │ │ │ │ 去首页发现美味吧 → │ │ │ │ │ │ │ └─────────────────────────────┘ │ │ │ │ ┌─────────────────────────────┐ │ │ │ 共 12 个菜谱 [清空收藏] │ │ ← 底部操作栏 │ └─────────────────────────────┘ │ └─────────────────────────────────────┘ ``` **操作逻辑：** | 操作 | 行为 | 动画 | |------|------|------| | 左滑卡片 | 出现删除按钮 | 红色背景滑出 | | 点击 ❤️ | 取消收藏 | 弹出确认对话框 | | 点击「清空收藏」 | 弹出确认对话框 | 从底部弹出 | | 空状态点击「去首页」 | 切换到首页 Tab | Tab切换动画 | | 点击卡片 | 进入菜谱详情 | 右滑入 | | 下拉 | 刷新收藏列表 | 刷新指示器 | --- ### 4.3 Tab2：发现（Discover）— 新增页面 ``` ┌─────────────────────────────────────┐ │ 🔍 发现 │ ← Liquid Glass 导航栏 ├─────────────────────────────────────┤ │ │ │ ┌─────────────────────────────┐ │ │ │ 🔍 搜索菜谱、食材、标签... │ │ ← 毛玻璃搜索栏 │ └─────────────────────────────┘ │ │ │ │ 🏷️ 热门标签 │ ← 横向滚动区 │ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │ │ │家常│ │快手│ │川菜│ │粤菜│ → │ │ └────┘ └────┘ └────┘ └────┘ │ │ │ │ 🎲 今天吃什么 │ ← 入口卡片（毛玻璃） │ ┌─────────────────────────────┐ │ │ │ 🎰 不知道吃什么？ │ │ │ │ 让我来帮你选！ → │ │ │ └─────────────────────────────┘ │ │ │ │ 🔥 热门排行 │ ← 入口卡片（毛玻璃） │ ┌─────────────────────────────┐ │ │ │ 🥇 红烧排骨 👁 1.2k │ │ │ │ 🥈 宫保鸡丁 👁 890 │ │ │ │ 🥉 番茄炒蛋 👁 756 │ │ │ │ 查看完整排行 → │ │ │ └─────────────────────────────┘ │ │ │ │ 📂 分类浏览 │ ← 2列网格 │ ┌──────┐ ┌──────┐ │ │ │ 🍳 │ │ 🥘 │ │ │ │家常菜 │ │快手菜 │ │ │ ├──────┤ ├──────┤ │ │ │ 🌶️ │ │ 🍜 │ │ │ │ 川菜 │ │ 粤菜 │ │ │ └──────┘ └──────┘ │ │ │ └─────────────────────────────────────┘ ``` **操作逻辑：** | 操作 | 行为 | 动画 | |------|------|------| | 点击搜索栏 | 展开搜索页面 | 底部上滑 | | 输入搜索 | 实时搜索结果列表 | 列表淡入 | | 点击标签 | 筛选对应分类菜谱 | 标签高亮 + 列表刷新 | | 点击「今天吃什么」 | 跳转 WhatToEatPage | 右滑入 | | 点击「热门排行」 | 跳转 HotPage | 右滑入 | | 点击排行项 | 进入菜谱详情 | 右滑入 | | 点击分类卡片 | 进入分类菜谱列表 | 右滑入 | | 下拉 | 刷新页面数据 | 刷新指示器 | --- ### 4.4 Tab3：我的（Profile） ``` ┌─────────────────────────────────────┐ │ 👤 我的 │ ← Liquid Glass 导航栏 ├─────────────────────────────────────┤ │ │ │ ┌─────────────────────────────┐ │ │ │ ┌────┐ │ │ ← 用户卡片（毛玻璃） │ │ │ 👤 │ 美食爱好者 │ │ │ │ └────┘ user@example.com │ │ │ │ [编辑资料] [个性化] │ │ │ └─────────────────────────────┘ │ │ │ │ ┌─────────────────────────────┐ │ │ │ 📊 我的统计 │ │ ← 统计卡片 │ │ ┌────┐ ┌────┐ ┌────┐ │ │ │ │ │ 12 │ │ 56 │ │ 8 │ │ │ │ │ │收藏│ │浏览│ │点赞│ │ │ │ │ └────┘ └────┘ └────┘ │ │ │ └─────────────────────────────┘ │ │ │ │ ┌─────────────────────────────┐ │ ← iOS Settings 风格分组1 │ │ 🎲 今天吃什么 → │ │ │ │ ───────────────────────── │ │ │ │ 🔥 热门排行 → │ │ │ │ ───────────────────────── │ │ │ │ 👣 浏览足迹 → │ │ │ └─────────────────────────────┘ │ │ │ │ ┌─────────────────────────────┐ │ ← iOS Settings 风格分组2 │ │ ❤️ 口味偏好 → │ │ │ │ ───────────────────────── │ │ │ │ 🎨 个性化设置 → │ │ │ │ ───────────────────────── │ │ │ │ 🌓 主题设置 → │ │ │ └─────────────────────────────┘ │ │ │ │ ┌─────────────────────────────┐ │ ← iOS Settings 风格分组3 │ │ 🚪 退出登录 │ │ ← 红色文字居中 │ └─────────────────────────────┘ │ │ │ └─────────────────────────────────────┘ ``` **操作逻辑：** | 操作 | 行为 | 动画 | |------|------|------| | 点击用户卡片 | 登录/编辑资料 | 右滑入 | | 点击「个性化」 | 个性化设置页 | 右滑入 | | 点击统计数字 | 查看详情列表 | 右滑入 | | 点击功能项 | 跳转对应页面 | 右滑入 | | 退出登录 | 确认对话框（红色警告） | 从底部弹出 | --- ### 4.5 🎲 今天吃什么（WhatToEat） ``` ┌─────────────────────────────────────┐ │ ← 今天吃什么 🍽️ │ ← 返回导航 ├─────────────────────────────────────┤ │ │ │ ┌─────────────────────────────┐ │ │ │ 🎲 随机 │ 🧠 智能 │ │ ← 分段选择器 │ └─────────────────────────────┘ │ │ │ │ ┌─────────────────────────────┐ │ │ │ │ │ ← 结果卡片（毛玻璃） │ │ 🤔 │ │ │ │ 不知道吃什么？ │ │ │ │ │ │ │ └─────────────────────────────┘ │ │ │ │ ┌─────────────────────────────┐ │ │ │ 🎲 开始选择 │ │ ← 主按钮（主题色） │ └─────────────────────────────┘ │ │ │ │ 候选菜谱 (6) │ │ ┌─────────────────────────────┐ │ │ │ 🍳 红烧排骨 ✅ │ │ ← 选中高亮 │ ├─────────────────────────────┤ │ │ │ 🥘 宫保鸡丁 │ │ │ ├─────────────────────────────┤ │ │ │ 🍜 番茄炒蛋 │ │ │ └─────────────────────────────┘ │ └─────────────────────────────────────┘ ``` **操作逻辑：** | 操作 | 行为 | 动画 | |------|------|------| | 切换模式 | 随机 ↔ 智能 | 分段滑块移动 | | 点击「开始选择」 | 转盘动画 → 显示结果 | 快速轮播 → 减速 → 停止 | | 点击候选项 | 直接选中该项 | 项高亮 + 弹跳 | | 选中后点击 | 查看菜谱详情 | 右滑入 | | 再次点击按钮 | 重新选择 | 转盘重新旋转 | --- ### 4.6 🔥 热门排行（HotRanking） ``` ┌─────────────────────────────────────┐ │ ← 🔥 热门排行 │ ├─────────────────────────────────────┤ │ │ │ ┌─────────────────────────────┐ │ │ │ 今日 │ 本月 │ 累计 │ │ ← 分段选择器 │ └─────────────────────────────┘ │ │ │ │ ┌─────────────────────────────┐ │ │ │ 🥇 红烧排骨 👁 1.2k │ │ ← 前三名特殊样式 │ ├─────────────────────────────┤ │ (金色背景 + 加粗) │ │ 🥈 宫保鸡丁 👁 890 │ │ │ ├─────────────────────────────┤ │ │ │ 🥉 番茄炒蛋 👁 756 │ │ │ ├─────────────────────────────┤ │ │ │ 4 麻婆豆腐 👁 634 │ │ ← 普通样式 │ ├─────────────────────────────┤ │ │ │ 5 糖醋里脊 👁 521 │ │ │ └─────────────────────────────┘ │ │ │ │ ↓ 下拉刷新 │ └─────────────────────────────────────┘ ``` **操作逻辑：** | 操作 | 行为 | 动画 | |------|------|------| | 切换时间段 | 今日/本月/累计 | 分段滑块移动 | | 点击排行项 | 进入菜谱详情 | 右滑入 | | 下拉 | 刷新排行数据 | 刷新指示器 | --- ### 4.7 🫧 Liquid Glass 底部导航栏 ``` ┌─────────────────────────────────────┐ │ │ │ 🏠 ❤️ 🔍 👤 │ ← 图标 │ 首页 收藏 发现 我的 │ ← 文字 │ │ │ ╔═══════════════════════════════╗ │ ← 毛玻璃胶囊 │ ║ 半透明 + 模糊 + 圆角28px ║ │ │ ╚═══════════════════════════════╝ │ └─────────────────────────────────────┘ 选中项: 图标: 28px + primary色 + 轻微弹跳 文字: font-sm + primary色 + FontWeight.w600 指示器: 底部小圆点 4px + primary色 未选中项: 图标: 24px + text2色 文字: font-sm + text2色 + FontWeight.w400 胶囊参数: height: 64px borderRadius: 36px (radius-xl+8) padding: bottom 16px, left/right 28px blur: 20px opacity: 0.72 ``` --- ## 五、页面导航流程图 ``` ┌──────────┐ │ 启动页 │ └────┬─────┘ │ ┌────▼─────┐ │ 主Tab页 │ └────┬─────┘ │ ┌───────┬───────┼───────┬────────┐ │ │ │ │ │ ┌────▼──┐ ┌──▼───┐ ┌▼────┐ ┌▼─────┐ │ │Tab0 │ │Tab1 │ │Tab2 │ │Tab3 │ │ │首页 │ │收藏 │ │发现 │ │我的 │ │ │信息流 │ │列表 │ │聚合 │ │设置 │ │ └───┬───┘ └──┬───┘ └──┬──┘ └──┬───┘ │ │ │ │ │ │ │ │ ┌───▼───┐ │ │ │ │ │搜索页 │ │ │ │ │ └───────┘ │ │ │ │ │ │ │ │ ┌───▼────┐ │ │ │ │ │今天吃 │ │ │ │ │ │什么🎲 │ │ │ │ │ └────────┘ │ │ │ │ │ │ │ │ ┌───▼────┐ │ │ │ │ │热门排行│ │ │ │ │ │🔥 │ │ │ │ │ └────────┘ │ │ │ │ │ │ │ │ ┌───▼────┐ │ │ │ │ │分类列表│ │ │ │ │ └────────┘ │ │ │ │ │ │ ┌───▼────────▼────────────────▼──┐ │ │ 菜谱详情页 │ │ │ (从任何卡片/列表项进入) │ │ └────────────────────────────────┘ │ │ ┌──────────────▼──┐ │ 我的 子页面 │ │ ├ 口味偏好 ❤️ │ │ ├ 个性化 🎨 │ │ ├ 主题 🌓 │ │ └ 浏览足迹 👣 │ └─────────────────┘ ``` --- ## 六、Liquid Glass 组件规范 ### 6.1 毛玻璃容器 (GlassContainer) ``` ┌─────────────────────────────────────┐ │ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ │ │ ▓ 内容透过毛玻璃可见 ▓ │ │ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ │ └─────────────────────────────────────┘ 参数: blur: 20.0 模糊半径 opacity: 0.45 背景透明度 (0.45-0.72) borderRadius: 20 圆角 (radius-lg) border: 0.5px 半透明白色边框 shadow: shadow-md 标准投影 padding: space-4 (16px) Flutter 实现: ClipRRect( borderRadius: BorderRadius.circular(20), child: BackdropFilter( filter: ImageFilter.blur(sigmaX: 20, sigmaY: 20), child: Container( padding: EdgeInsets.all(16), decoration: BoxDecoration( color: Colors.white.withOpacity(0.45), borderRadius: BorderRadius.circular(20), border: Border.all( color: Colors.white.withOpacity(0.3), width: 0.5, ), boxShadow: [ BoxShadow( color: Colors.black.withOpacity(0.06), blurRadius: 12, offset: Offset(0, 4), ), ], ), child: child, ), ), ) 使用场景: - 发现页入口卡片 - 我的页用户卡片 - 今天吃什么结果卡片 ``` ### 6.2 分段选择器 (GlassSegmentedControl) ``` ┌────────┬────────┬────────┐ │ 选中 │ 未选 │ 未选 │ │ (白底) │ (透明) │ (透明) │ └────────┴────────┴────────┘ 参数: borderRadius: 12px (radius-md) height: 36px padding: 4px (容器内边距) 选中背景: 白色 + shadow-sm 选中文字: primary色 + FontWeight.w600 未选文字: text2色 + FontWeight.w400 动画: 250ms easeInOutCubic Flutter 实现: Container( padding: EdgeInsets.all(4), decoration: BoxDecoration( color: Colors.white.withOpacity(0.3), borderRadius: BorderRadius.circular(12), ), child: Row(children: segments.map((s) => AnimatedContainer( duration: Duration(milliseconds: 250), curve: Curves.easeInOutCubic, decoration: BoxDecoration( color: isSelected ? Colors.white : Colors.transparent, borderRadius: BorderRadius.circular(8), boxShadow: isSelected ? [shadow-sm] : [], ), child: Text(s.label, style: TextStyle( color: isSelected ? primary : text2, fontWeight: isSelected ? FontWeight.w600 : FontWeight.w400, )), )).toList()), ) 使用场景: - 首页信息流类型切换 (推荐/最新/热门/个性) - 今天吃什么模式切换 (随机/智能) - 热门排行时间段切换 (今日/本月/累计) ``` ### 6.3 搜索栏 (GlassSearchBar) ``` ┌─────────────────────────────────┐ │ 🔍 搜索菜谱... │ └─────────────────────────────────┘ 参数: height: 40px borderRadius: 12px (radius-md) padding: 12px horizontal 背景: glass (rgba(255,255,255,0.45)) 图标: CupertinoIcons.search, 18px, text3色 占位符: text3色, font-md 输入文字: text1色, font-md Flutter 实现: ClipRRect( borderRadius: BorderRadius.circular(12), child: BackdropFilter( filter: ImageFilter.blur(sigmaX: 20, sigmaY: 20), child: Container( height: 40, padding: EdgeInsets.symmetric(horizontal: 12), decoration: BoxDecoration( color: Colors.white.withOpacity(0.45), borderRadius: BorderRadius.circular(12), ), child: Row(children: [ Icon(CupertinoIcons.search, size: 18, color: text3), SizedBox(width: 8), Text('搜索菜谱...', style: TextStyle(color: text3, fontSize: 14)), ]), ), ), ) 使用场景: - 首页顶部搜索栏 - 发现页顶部搜索栏 ``` ### 6.4 信息流卡片 (GlassFeedCard) ``` ┌─────────────────────────────────┐ │ ┌─────────────────────────────┐ │ │ │ 🖼️ 图片区域 │ │ ← 16:9 比例 │ │ (顶部圆角16) │ │ 圆角 radius-lg │ └─────────────────────────────┘ │ │ │ │ 标题 🏷️标签 │ ← 标题 font-lg + text1 │ │ 标签 radius-sm + primaryLight底 │ 简介文字... │ ← font-sm + text2 + 2行截断 │ │ │ 👁 1.2k ❤️ 128 ⭐ 56 🔥 78 │ ← 互动栏 font-sm + text2 └─────────────────────────────────┘ 参数: borderRadius: 16px (radius-lg) 背景: card (#FFFFFF) shadow: shadow-md 图片区: 16:9 比例 + 顶部圆角 内边距: space-4 (16px) 标签: primaryLight底 + primary色文字 + radius-sm 互动栏: 图标16px + 数字 + 水平排列 使用场景: - 首页信息流列表 - 搜索结果列表 - 分类菜谱列表 ``` ### 6.5 设置列表项 (GlassSettingsTile) ``` ┌─────────────────────────────────┐ │ 🎨 个性化设置 → │ └─────────────────────────────────┘ 参数: height: 48px (最小) padding: 14px vertical + 16px horizontal 图标: 20px + primary色 标题: font-md + text1色 箭头: 16px + text3色 (CupertinoIcons.chevron_forward) 分隔线: 0.5px + text3色 10%透明度 背景: card (#FFFFFF) borderRadius: 分组容器 radius-lg (20px) 分组样式: ┌─────────────────────────────┐ │ 项1 → │ ← 无顶部分隔线 │ ───────────────────────── │ ← 分隔线 (缩进16px) │ 项2 → │ │ ───────────────────────── │ │ 项3 → │ ← 无底部分隔线 └─────────────────────────────┘ 分组间距: space-6 (24px) 使用场景: - 我的页功能列表 - 设置页选项列表 ``` ### 6.6 底部导航栏 (GlassNavBar) ``` ┌─────────────────────────────────────┐ │ │ │ 🏠 ❤️ 🔍 👤 │ │ 首页 收藏 发现 我的 │ │ │ │ ╔═══════════════════════════════╗ │ │ ║ 半透明 + 模糊 + 圆角36px ║ │ │ ╚═══════════════════════════════╝ │ └─────────────────────────────────────┘ 参数: height: 64px borderRadius: 36px padding: bottom 16px, left/right 28px blur: 20px opacity: 0.72 背景: primary色 + opacity shadow: 0 6px 12px rgba(0,0,0,0.08) 选中项: 图标: 28px + primary色 文字: font-sm (12px) + primary色 + w600 指示器: 底部圆点 4px + primary色 未选中项: 图标: 24px + text2色 65%透明度 文字: font-sm (12px) + text2色 + w400 Flutter 实现: (基于现有 TapLiquidGlassNavigation 升级) - 添加文字标签 - 添加选中指示器 - 更新图标为: home/heart/search/person - 更新颜色为 iOS 系统色 使用场景: - 全局底部导航 (MainTabView) ``` --- ## 七、关键改进点（对比现有设计） | # | 现有问题 | iOS 26 改进 | 涉及文件 | |---|---------|------------|---------| | 1 | 底栏 edge/floating 两种风格 | 统一为 Liquid Glass 胶囊底栏，废弃 edge | `main_tab_view.dart` | | 2 | Tab1 名为「购物车」实为收藏 | 改名为「收藏 ❤️」，图标改为 heart | `main_tab_view.dart`, `tap_liquid_glass_nav.dart` | | 3 | 缺少「发现」页 | 新增发现页聚合搜索/分类/功能入口 | 新建 `discover_page.dart` | | 4 | Tab2「足迹」独立占Tab | 足迹移入「我的」子页面，Tab2改为发现 | `main_tab_view.dart`, `profile_page.dart` | | 5 | 个人中心有子Tab切换 | 去掉子Tab，改为纯设置列表 | `profile_page.dart` | | 6 | 搜索栏位置不固定 | 首页/发现页顶部固定搜索栏 | `home_page.dart` | | 7 | 卡片样式不统一 | 统一 GlassFeedCard 组件 | 新建 `glass_feed_card.dart` | | 8 | 缺少分类浏览入口 | 发现页增加分类网格 | `discover_page.dart` | | 9 | 主色 #2196F3 不够 iOS | 改为 iOS 蓝 #007AFF | `theme_service.dart` | | 10 | 导航栏样式不统一 | 全部使用毛玻璃导航栏 | 所有页面 | --- ## 八、暗色模式适配 Liquid Glass 在暗色模式下效果更佳，参数调整如下： ### 8.1 暗色颜色映射 ``` 亮色 → 暗色 ────────────────────────────────────────── primary: #007AFF → #0A84FF (iOS 暗色蓝) secondary: #FF9500 → #FF9F0A (iOS 暗色橙) background: #F2F2F7 → #000000 (纯黑) card: #FFFFFF → #1C1C1E (深灰) cardAlpha: rgba(255,255,255,0.72) → rgba(28,28,30,0.72) text1: #1C1C1E → #FFFFFF text2: #8E8E93 → #8E8E93 (不变) text3: #C7C7CC → #48484A red: #FF3B30 → #FF453A green: #34C759 → #30D158 ``` ### 8.2 暗色毛玻璃参数 ``` 亮色 → 暗色 ────────────────────────────────────────── glass: rgba(255,255,255,0.45) → rgba(28,28,30,0.45) glassBorder: rgba(255,255,255,0.3) → rgba(255,255,255,0.15) glassShadow: rgba(0,0,0,0.06) → rgba(0,0,0,0.3) blur: 20px → 25px (暗色下模糊略强) ``` ### 8.3 暗色特殊处理 ``` - 分段选择器选中背景: #2C2C2E (暗色卡片色) - 搜索栏背景: rgba(28,28,30,0.45) - 底栏背景: primary色暗色 + 0.72透明度 - 前三名排行: 金色背景改为深金色 rgba(255,204,0,0.15) - 设置列表分组: #1C1C1E 背景 ``` --- ## 九、响应式适配 ### 9.1 断点定义 ``` 手机: 360px – 640px → 单列布局 折叠屏: 600px – 900px → 自动双列 平板: 768px – 1024px → 双列布局 桌面: 1280px+ → 多列布局 ``` ### 9.2 各页面响应式规则 ``` 首页信息流: 手机: 单列卡片全宽 平板: 双列卡片 桌面: 三列卡片 发现页: 手机: 分类网格 2列 平板: 分类网格 3列 桌面: 分类网格 4列 收藏页: 手机: 单列列表 平板: 双列网格 桌面: 三列网格 我的页: 手机: 全宽设置列表 平板: 居中 max-width: 600px 桌面: 居中 max-width: 600px ``` ### 9.3 底栏响应式 ``` 手机: 胶囊底栏 left/right 28px 平板: 胶囊底栏 left/right 48px 桌面: 可选侧边导航栏替代底栏 ``` --- ## 十、实施计划 ### 阶段一：基础设施（设计令牌 + 组件库） > 优先级: P0 | 预计涉及文件: 8个 | # | 任务 | 涉及文件 | 状态 | |---|------|---------|------| | 1 | 创建 `DesignTokens` 类 | 新建 `config/design_tokens.dart` | ✅ | | 2 | 创建 `GlassContainer` 组件 | 新建 `widgets/glass/glass_container.dart` | ✅ | | 3 | 创建 `GlassSegmentedControl` 组件 | 新建 `widgets/glass/glass_segmented_control.dart` | ✅ | | 4 | 创建 `GlassSearchBar` 组件 | 新建 `widgets/glass/glass_search_bar.dart` | ✅ | | 5 | 创建 `GlassFeedCard` 组件 | 新建 `widgets/glass/glass_feed_card.dart` | ✅ | | 6 | 创建 `GlassSettingsTile` 组件 | 新建 `widgets/glass/glass_settings_tile.dart` | ✅ | | 7 | 升级 `GlassNavBar` 组件 | 新建 `widgets/glass/glass_nav_bar.dart` | ✅ | | 8 | 更新 `ThemeService` 适配新令牌 | 修改 `services/ui/theme_service.dart` | ✅ | ### 阶段二：Tab 结构重构 > 优先级: P0 | 预计涉及文件: 4个 | # | 任务 | 涉及文件 | 状态 | |---|------|---------|------| | 1 | 修改 `MainTabView` 4Tab 新方案 | 修改 `widgets/navigation/main_tab_view.dart` | ✅ | | 2 | 废弃 edge 样式，统一 floating | 修改 `main_tab_view.dart` | ✅ | | 3 | 更新导航图标和标签 | 新建 `widgets/glass/glass_nav_bar.dart` | ✅ | | 4 | 更新路由和导航控制器 | 修改 `routes/app_routes.dart` | ✅ | ### 阶段三：页面改造 > 优先级: P1 | 预计涉及文件: 6个 | # | 任务 | 涉及文件 | 状态 | |---|------|---------|------| | 1 | 首页改造：搜索栏 + 分段选择器 + 信息流卡片 | 修改 `pages/home_page.dart` | ✅ | | 2 | 收藏页改造：统一卡片样式 | 新建 `pages/favorites/favorites_page.dart` | ✅ | | 3 | 新增发现页 | 新建 `pages/discover/discover_page.dart` | ✅ | | 4 | 我的页改造：GlassSegmentedControl | 修改 `pages/profile_page.dart` | ✅ | | 5 | 今天吃什么页升级 | 修改 `pages/what_to_eat/what_to_eat_page.dart` | ✅ | | 6 | 热门排行页升级 | 修改 `pages/hot/hot_page.dart` | ✅ | ### 阶段四：细节打磨 > 优先级: P2 | 预计涉及文件: 多个 | # | 任务 | 状态 | |---|------|------| | 1 | 暗色模式全面适配 | ✅ | | 2 | 动画效果优化（点赞/推荐/切换） | ✅ | | 3 | 响应式布局测试（手机/平板/横屏） | ✅ | | 4 | 性能优化（毛玻璃渲染优化） | ⬜ | | 5 | 无障碍适配（语义标签/对比度） | ⬜ | --- ## 附录：文件结构规划 ``` lib/src/ ├── config/ │ └── design_tokens.dart ← 设计令牌 (新增) ├── widgets/ │ ├── glass/ ← Liquid Glass 组件 (新增目录) │ │ ├── glass_container.dart │ │ ├── glass_segmented_control.dart │ │ ├── glass_search_bar.dart │ │ ├── glass_feed_card.dart │ │ ├── glass_settings_tile.dart │ │ └── glass_nav_bar.dart │ ├── base/ │ │ └── tap_liquid_glass_nav.dart ← 升级为 glass_nav_bar │ ├── states/ │ │ ├── offline_banner.dart │ │ ├── empty_state.dart │ │ └── error_state.dart │ └── navigation/ │ └── main_tab_view.dart ← 重构 4Tab ├── pages/ │ ├── home_page.dart ← Tab0 首页 (改造) │ ├── favorites/ ← Tab1 收藏 (重命名 cart→favorites) │ │ └── favorites_page.dart │ ├── discover/ ← Tab2 发现 (新增) │ │ └── discover_page.dart │ ├── profile_page.dart ← Tab3 我的 (改造) │ ├── what_to_eat/ │ │ └── what_to_eat_page.dart ← 升级 │ ├── hot/ │ │ └── hot_page.dart ← 升级 │ └── settings/ │ ├── preference_page.dart │ ├── personalization_page.dart │ └── theme_demo_page.dart └── services/ └── ui/ └── theme_service.dart ← 适配新令牌 ``` --- ## 变更记录 | 日期 | 版本 | 变更内容 | |------|------|---------| | 2026-04-09 | 1.1 | 重写完整文档：增加目录、设计原则、动画规范、暗色模式详细参数、响应式规则、实施计划状态追踪 | | 2026-04-09 | 1.0 | 初始版本：基础设计方案 |