base_ui_flutter 一个为"生产力"而生的 Flutter 桌面 UI 组件库

一个为"生产力"而生的 Flutter 桌面 UI 组件库

base_ui_flutter —— Headless · Token 驱动的桌面级 Flutter UI 基础设施

不是"又一套好看的组件"，而是让 HIS、ERP、工业上位机这类高密度、长生命周期的桌面业务软件，交付得更快、更密、更耐用。

📦 开源仓库：https://github.com/SpringHgui/base-ui-flutter

---

内置多种主题

为什么我们需要它？

先看一个熟悉的场景：你的团队在用 Flutter 开发医疗 HIS 或企业 ERP 客户端。业务逻辑并不难，难的是——

• 信息密度上不去：现代 UI 风格过度追求留白和动效，一个页面装不下多少业务信息，医生/操作员要不停滚动、切换页面；
• 样式与逻辑深度耦合：复杂的表格虚拟滚动等底层逻辑，通常和一套写死的视觉绑在一起，换皮肤等于重写组件；
• 换肤成本高：想要 WinForm 风格的紧凑界面？还想要 Fluent 风格的现代界面？传统方案是两套代码。

base_ui_flutter 就是为了解决这些问题而生的。

---

一句话定位

Flutter 桌面端的"Radix"：无头（Headless）组件内核 + Design Token 驱动的完整桌面 UI 基础设施。

它把传统桌面软件（WinForm）的高密度交互逻辑，与现代前端"无头组件 + Design Token"的最佳实践，在 Flutter 桌面端重新塑造了一遍。组件内核不携带任何视觉代码，默认长成 WinForm 的样子，只是因为它内置了一套 WinForm 风格的 Token 预设——换一套 Token，整个应用就换个皮肤。

---

三大架构支柱

支柱	含义	带来的价值
Headless（无头）	组件内核只提供交互逻辑与状态管理，零硬编码样式（无颜色、无字体、无间距）	逻辑可复用、可测试；视觉完全交给你掌控
Token（设计令牌）	所有视觉决策由一套 DesktopTokens 统一拥有	一套参数换肤整个应用，主题维护成本趋近于零

架构契约："零样式"是组件层的承诺，"默认像 WinForm"是内置 Token 预设的效果——二者并不冲突。

---

核心特性

🎨 零样式内核，完全掌控（Zero Styles, Fully Yours）

组件核心不硬编码任何颜色、字体、间距。默认观感——紧凑、高密度的 WinForm 风格——完全由 Token 提供。

// 一键切换为 Fluent 风格主题
final fluent = DesktopTokens.winForm.copyWith(
  cornerRadius: 4.0,
  primaryColor: const Color(0xFF0078D7),
  fontFamily: 'Microsoft YaHei UI',
  controlHeight: 32.0,
);

TokenScope(
  tokens: fluent,
  child: MyApp(),
);

从 WinForm 到 Fluent、Material、企业品牌风格，只改一组值，不碰任何 Widget 代码。

📐 响应式 Token（Media-Query-Aware）

Token 与窗口尺寸深度绑定：ResponsiveTokenScope 可根据窗口大小自动切换紧凑/现代风格。一套参数，在大屏上给你 WinForm 级高密度，在小窗口下自动收敛布局。

🧩 零依赖核心

核心库运行时零第三方依赖——只有 Flutter SDK 本身。引入成本与版本冲突趋近于零，这是基础设施类库应有的姿态。

---

组件全景：80+ 公开 API，双体系覆盖

base_ui_flutter 当前版本 v0.1.0（详见 CHANGELOG），提供 80+ 公开组件 API：

① WinForms 经典控件体系（30+ 个，一一复刻）

分类	控件
常用控件	Button、Input、Label、CheckBox、RadioButton、ComboBox、LinkLabel、MaskedTextBox、NumericUpDown、DomainUpDown
列表与数据	ListBox、CheckedListBox、WinListView、TreeView、DataGridView、PropertyGrid
菜单与工具栏	MenuStrip、ContextMenuStrip、ToolStrip、StatusStrip
对话框	ColorDialog、DateTimePicker、MonthCalendar、ThemeDesigner
数据	BindingNavigator
滚动	ScrollBar、TrackBar
其它	ProgressBar、RichTextBox、ScrollableControl、WinToolTip、ErrorProvider

完整的 WinForms 映射与实现状态见 components.md。

② 现代化补充组件体系

在同一套 Token 之下，还提供面向现代桌面体验的组件：Toggle / ToggleSwitch、Tag、Field、TextArea、ButtonGroup、InputGroup、InputOtp、Typography、Kbd、Separator、Surface、Item、Marker……

容器：GroupBox、TabControl、SplitContainer、Accordion、Collapsible、Sheet、SidePanel、Sidebar、Carousel

浮层：Popover、HoverCard、DropDownButton、MessageBox、Command、Toast、Empty

数据增强：Chart、Pagination

杂项：Alert、Avatar、Breadcrumb、Bubble、Message、MessageScroller、Questionnaire、Skeleton、Spinner……

经典与现代共存于同一 Token 体系，WinForm 老将和现代新秀和谐共处、混排无压力。

---

3 分钟快速上手

dependencies:
  base_ui_flutter: ^0.1.0   # 需要 Flutter ≥ 3.35 / Dart ≥ 3.9

import 'package:base_ui_flutter/base_ui_flutter.dart';

void main() {
  runApp(
    TokenScope(
      tokens: DesktopTokens.winForm,   // 默认 WinForm 风格，开箱即用
      child: MyApp(),
    ),
  );
}

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    const Label('Name:'),
    const Input(hint: 'Type your name'),
    const CheckBox(label: 'Remember me'),
    const Button(text: 'OK'),
  ],
);

每个控件自动从最近的 TokenScope 读取视觉属性——调用处零样式配置。

---

📦 GitHub：https://github.com/SpringHgui/base-ui-flutter

---

The Radix of Flutter Desktop —— Headless UI Infrastructure for Desktop-Class Flutter.