菜单

数据库视图系统

相关源文件

目的与范围

数据库视图系统提供用户界面组件和渲染逻辑,用于在 AppFlowy 中以各种视觉格式呈现数据库数据。该系统处理数据库内容的表示层,包括看板视图(Kanban 风格)、日历视图和网格视图。它管理数据库界面的视觉样式、用户交互和平台特定适配。

有关底层数据库管理和协作功能的信息,请参阅数据库和协作系统。有关特定 UI 渲染组件的详细信息,请参阅数据库 UI 组件和渲染

数据库视图架构

数据库视图系统作为用户界面和后端数据库管理系统之间的表示层运行。它为相同的底层数据结构提供了多种可视化模式。

来源:frontend/appflowy_flutter/lib/workspace/application/settings/appearance/mobile_appearance.dart1-285 frontend/appflowy_flutter/lib/workspace/application/settings/appearance/desktop_appearance.dart1-160

视图类型和组件

看板视图系统

看板视图实现了一种看板风格的界面,用于将数据库记录作为卡片组织在列中进行管理。移动端实现包括用于组管理的交互式组件。

MobileBoardTrailing 组件提供了向看板视图添加新组的功能,带有文本输入界面和操作按钮。

来源:frontend/appflowy_flutter/lib/mobile/presentation/database/board/widgets/mobile_board_trailing.dart1-142

日历视图系统

日历视图将数据库记录呈现为按日期组织的事件,并具有针对事件管理的移动端特定屏幕实现。

日历视图集成了CalendarBloc 用于状态管理,以及RowCache 用于数据检索,为日历事件提供创建、查看和导航功能。

来源:frontend/appflowy_flutter/lib/mobile/presentation/database/mobile_calendar_events_screen.dart1-109

主题与外观系统

平台特定外观

该系统为移动和桌面平台实现了独立的外观配置,每个配置都扩展了一个基础外观类。

平台主要功能
移动端移动外观触控优化尺寸,简化配色方案
桌面桌面外观多主题支持,详细颜色配置

配色方案配置

移动外观系统为数据库视图组件定义了特定的颜色常量

  • 主色:Color(0xFF00BCF0) 用于主要操作和突出显示
  • 背景色:支持亮/暗模式及特定值
  • 文本颜色:分层文本样式,包括_onBackgroundColor_onSurfaceColor_onSecondaryColor

来源:frontend/appflowy_flutter/lib/workspace/application/settings/appearance/mobile_appearance.dart10-15 frontend/appflowy_flutter/lib/workspace/application/settings/appearance/desktop_appearance.dart22-48

移动数据库视图实现

移动端特定功能

移动数据库视图包含触控优化交互和响应式设计考量

移动看板尾部组件使用screenSize.width * 0.7 进行响应式宽度计算,以实现最佳移动视图效果。

来源:frontend/appflowy_flutter/lib/mobile/presentation/database/board/widgets/mobile_board_trailing.dart35

与后端系统集成

数据流架构

数据库视图通过 BLoC 模式实现和事件驱动架构与后端系统集成

该系统使用特定的事件类型,例如BoardEvent.createGroup 用于看板操作,以及CalendarEvent.createEvent 用于日历交互,从而保持 UI 和业务逻辑之间的分离。

来源:frontend/appflowy_flutter/lib/mobile/presentation/database/board/widgets/mobile_board_trailing.dart73-77 frontend/appflowy_flutter/lib/mobile/presentation/database/mobile_calendar_events_screen.dart56

通知与反馈系统

数据库视图通过showSnapBar 实用工具,利用集中式通知系统向用户提供反馈,该工具在不同的数据库视图交互中提供一致的样式。

通知系统根据平台检测调整字体大小,并使用来自Theme.of(context).colorScheme.surfaceContainerHighest 的主题感知背景颜色。

来源:frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/snap_bar.dart6-27