毛玻璃风格主题——Baka 的视觉设计亮点

什么是毛玻璃风格

毛玻璃（Glassmorphism）是近几年流行的一种 UI 设计风格，核心特征：

背景模糊（半透明，透过能看到后面的画面）
渐变或纯色背景层
边框高光（增加玻璃质感）
柔和的圆角
层次分明的景深效果

macOS Big Sur、Windows 11、iOS 14+ 的系统 UI 都大量使用了这种风格。

Baka 的毛玻璃实现

Baka 使用 Flutter 的以下组件实现毛玻璃效果：

组件	作用
`BackdropFilter`	创建背景模糊区域
`ImageFilter.blur`	指定模糊程度（sigmaX / sigmaY）
`ClipRRect`	给模糊区域加圆角裁剪
`Container`	叠加热色（半透明颜色层）

实现原理（简化示意）：

Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(16),
    border: Border.all(color: Colors.white24),
  ),
  child: ClipRRect(
    borderRadius: BorderRadius.circular(16),
    child: BackdropFilter(
      filter: ImageFilter.blur(sigmaX: 15, sigmaY: 15),
      child: Container(
        color: Colors.white.withOpacity(0.1),
      ),
    ),
  ),
)

主界面的层次

Baka 主界面的层次设计：

┌───────────────────────────────────┐
│  状态栏（半透明，跟随视频背景）     │
├───────────────────────────────────┤
│  顶部导航栏（毛玻璃 + 渐变）        │
│  Logo · 搜索框 · 头像              │
├───────────────────────────────────┤
│                                   │
│        内容区域                    │
│    番剧封面网格 / 列表              │
│                                   │
├───────────────────────────────────┤
│  底部导航栏（毛玻璃）               │
│  首页 · 搜索 · 收藏 · 设置          │
└───────────────────────────────────┘

主题配色

Baka 的默认配色方案：

元素	深色模式	浅色模式
背景	`#0D0D12`	`#F5F5F7`
主色	`#8B5CF6`（紫色）	`#6D28D9`（深紫）
毛玻璃层	`#1A1A24` 半透明	`#FFFFFF` 半透明
文字主色	`#FFFFFF`	`#1D1D1F`
文字次色	`#A1A1AA`	`#6B6B70`
强调色	`#EC4899`（粉色）	`#BE185D`（深粉）

性能影响

毛玻璃效果需要实时对每帧进行高斯模糊处理，这会增加 GPU 负载：

桌面端：影响微乎其微，现代桌面 GPU 轻松应对
旗舰手机：基本无感，滑动流畅
中端手机：可能有轻微掉帧（复杂页面）
低端手机：建议关闭（部分版本提供"关闭毛玻璃"选项）

自定义主题

部分版本的 Baka 支持：

主色调自定义：从预设色板中选择或自定义
毛玻璃强度：调节模糊程度（强 / 中 / 弱）
圆角风格：圆形 / 圆角 / 直角
边框效果：高光边框开 / 关

如果你对视觉效果有自己的偏好，可以在设置 → 外观中调整。

视觉一致性

Baka 在各平台上保持了高度一致的视觉体验：

Flutter 的跨平台渲染引擎保证了像素级一致
字体渲染在各平台自动适配（系统默认字体）
动画曲线统一（物理感的缓动曲线）
毛玻璃模糊程度统一

这种一致性是 Baka 相比原生开发的播放器的一个优势。