在 Devin 中试用 DeepWiki 处理私有仓库
DeepWiki

AppFlowy-IO/AppFlowy

菜单

用户界面系统

相关源文件

目的与范围

用户界面系统包含 AppFlowy 基于 Flutter 的前端层，提供跨平台的用户界面组件、导航模式和视觉设计系统。该系统负责桌面和移动平台的展示层，包括主侧边栏导航、视图管理、主题设置和响应式布局。

有关后端数据管理和业务逻辑，请参阅 后端架构和核心服务。有关文档编辑功能，请参阅 文档编辑器系统。有关数据库界面组件，请参阅 数据库视图系统。

整体 UI 架构

UI 系统采用分层架构，明确区分平台特定适配和共享组件

来源： frontend/appflowy_flutter/lib/workspace/presentation/home/desktop_home_screen.dart44-331 frontend/appflowy_flutter/lib/mobile/presentation/base/mobile_view_page.dart35-461 frontend/appflowy_flutter/lib/startup/tasks/generate_router.dart46-128

导航系统围绕 HomeSideBar 组件构建，提供分层视图管理和工作区导航。

关键组件

组件目的位置
HomeSideBar主导航容器frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/sidebar.dart58-293
ViewItem表示单个页面/视图frontend/appflowy_flutter/lib/workspace/presentation/home/menu/view/view_item.dart50-215
SidebarSpace基于空间的导航模式frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/space/sidebar_space.dart24-89
SpaceBloc空间状态管理frontend/appflowy_flutter/lib/workspace/application/sidebar/space/space_bloc.dart65-386

来源： frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/sidebar.dart51-221 frontend/appflowy_flutter/lib/workspace/presentation/home/menu/view/view_item.dart146-215 frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/space/sidebar_space.dart92-173

跨平台界面设计

AppFlowy 提供自适应 UI 模式，可根据平台差异进行响应，同时保持功能一致性

平台特定适配

功能桌面实现移动端实现
导航带有可调整大小面板的 HomeSideBar带有标签页的 MobileBottomNavigationBar
应用栏静态标题栏带有滚动适配的 MobileViewPageImmersiveAppBar
模态 UI对话框叠加底部抽屉式展示
布局带调整器的多面板带导航的单面板

来源： frontend/appflowy_flutter/lib/workspace/presentation/home/desktop_home_screen.dart176-210 frontend/appflowy_flutter/lib/mobile/presentation/base/mobile_view_page.dart155-191 frontend/appflowy_flutter/lib/startup/tasks/generate_router.dart132-216

路由和导航

路由系统使用 GoRouter 进行声明式导航，并支持平台特定的路由配置

关键导航模式

  • 桌面端：基于标签页的导航，使用 TabsBloc 管理多个打开的视图
  • 移动端：底部导航栏，使用 StatefulNavigationShell 保留状态
  • 跨平台：ActionNavigationBloc 用于从后端事件进行程序化导航

来源： frontend/appflowy_flutter/lib/startup/tasks/generate_router.dart46-128 frontend/appflowy_flutter/lib/workspace/application/tabs/tabs_bloc.dart frontend/appflowy_flutter/lib/startup/tasks/generate_router.dart132-216

主题与外观系统

主题系统提供跨平台一致的视觉样式，支持亮/暗模式和用户自定义

主题配置

组件目的关键属性
AppearanceSettingsCubit主题状态管理themeMode, brightness, fontFamily
BaseAppearance主题基础默认字体、大小、间距常量
平台主题自适应样式平台特定的配色方案和排版

来源： frontend/appflowy_flutter/lib/workspace/application/settings/appearance/base_appearance.dart1-130 frontend/appflowy_flutter/lib/workspace/presentation/widgets/view_title_bar.dart600-607

组件架构

UI 系统采用可组合组件架构，明确关注点分离

组件层次结构

  • 原子组件：基本构建块 (FlowyButton, FlowyText)
  • 布局组件：间距和结构 (HSpace, FlowyContainer)
  • 交互组件：用户交互处理 (AppFlowyPopover, FlowyHover)
  • 复杂小部件：领域特定组件 (ViewItem, ConfirmPopup)

来源： frontend/appflowy_flutter/lib/workspace/presentation/home/menu/view/view_item.dart433-631 frontend/appflowy_flutter/lib/workspace/presentation/widgets/view_title_bar.dart342-518 frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/space/shared_widget.dart274-476 frontend/appflowy_flutter/lib/workspace/presentation/widgets/dialogs.dart21-318