47 KiB
47 KiB
妈妈厨房 iOS 26 UI 设计方案
版本: 1.1 | 日期: 2026-04-09 | 设计语言: Liquid Glass (iOS 26)
本文档是项目 UI 改造的完整规范，任何开发者（含 AI Coder）必须按此方案执行。 修改 UI 前必须先阅读本文档，确保风格统一。
目录
- 设计语言：Liquid Glass 核心特征
- 设计令牌：颜色/圆角/间距/毛玻璃/字体
- 页面架构：4Tab 新方案 + 全局布局
- 页面布局：7个页面纯文本演示 + 操作逻辑
- 导航流程图：页面间跳转关系
- 组件规范：6个 Liquid Glass 组件
- 改进对比：现有问题 vs iOS 26 改进
- 暗色模式：暗色参数适配
- 响应式：手机/平板/横屏适配
- 实施计划：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 | 初始版本：基础设计方案 |