Bruno：链家开源的企业级 Flutter 组件库

本文介绍 Bruno，一套由链家（LianjiaTech）开源的企业级 Flutter 组件库，提供高质量的移动端 UI 组件和主题定制能力。

Bruno 简介

Bruno 是链家技术团队开源的企业级 Flutter 组件库，提炼自企业级移动端产品的交互和视觉风格，提供开箱即用的高质量 Flutter 组件。该项目在 GitHub 上拥有 3.4k stars 和 516 forks，采用 MIT 许可证。

核心定位：An enterprise-class package of Flutter components for mobile applications.

核心特性

• 企业级设计：提炼自企业级移动端产品的交互和视觉风格
• 开箱即用：高质量的 Flutter 组件，直接可用
• 主题定制：提供满足业务差异的主题定制能力
• 设计工具赋能：开发全链路支持

基本信息

• GitHub 仓库：https://github.com/LianjiaTech/bruno
• 官方网站：https://bruno.ke.com/
• 组件文档：https://bruno.ke.com/page/widgets
• 主题定制：https://bruno.ke.com/page/guide/theme
• 星标数：3.4k stars
• Fork 数：516 forks
• 许可证：MIT

技术栈

版本适配

安装方法

在 pubspec.yaml 中添加依赖：

dependencies:
  bruno: ^3.4.2

然后执行：

flutter pub get

导入包：

import 'package:bruno/bruno.dart';

组件分类

Bruno 提供丰富的组件类别：

基础组件

• 按钮 (BrnButton) - 多种样式的按钮组件
• 文本 (BrnText) - 富文本、标题等文本组件
• 图标 (BrnIcon) - 图标组件

表单组件

• 输入框 (BrnTextInput) - 文本输入组件
• 选择器 (BrnPicker) - 日期、时间、选项选择器
• 单选/多选 (BrnRadio/BrnCheckbox) - 选择组件
• 开关 (BrnSwitch) - 开关组件

导航组件

• 导航栏 (BrnAppBar) - 应用导航栏
• 标签栏 (BrnTabBar) - 底部/顶部标签栏
• 步骤条 (BrnStep) - 步骤进度组件

反馈组件

• 对话框 (BrnDialog) - 弹窗对话框
• Toast (BrnToast) - 轻提示
• 加载 (BrnLoading) - 加载指示器
• 骨架屏 (BrnSkeleton) - 加载占位

展示组件

• 卡片 (BrnCard) - 卡片容器
• 列表 (BrnList) - 列表组件
• 折叠面板 (BrnExpansionPanel) - 可折叠内容
• 标签 (BrnTag) - 标签组件

业务组件

• 空状态 (BrnEmpty) - 空数据展示
• 错误页 (BrnError) - 错误状态页
• 搜索栏 (BrnSearchBar) - 搜索组件

使用示例

主题配置

void main() {
  // 初始化 Bruno 主题
  BrnInitializer.register(
    allThemeConfig: BrnDefaultConfigUtils.defaultAllConfig,
  );

  runApp(MyApp());
}

按钮组件

BrnSmallMainButton(
  title: '确定',
  onTap: () {
    print('按钮点击');
  },
)

BrnBigMainButton(
  title: '提交',
  onTap: () {
    print('提交表单');
  },
)

对话框

BrnDialogManager.showConfirmDialog(
  context,
  title: "确认删除",
  message: "确定要删除这条记录吗？",
  onConfirm: () {
    print('确认删除');
  },
  onCancel: () {
    print('取消');
  },
);

Toast 提示

BrnToast.show("操作成功", context);

BrnToast.showError("操作失败", context);

选择器

BrnPicker.show(
  context,
  pickerTitleConfig: BrnPickerTitleConfig(
    title: '选择城市',
  ),
  items: ['北京', '上海', '广州', '深圳'],
  onConfirm: (index, item) {
    print('选择了: $item');
  },
);

列表组件

BrnNormalListTile(
  title: '标题文本',
  describe: '描述文本',
  onTap: () {
    print('列表项点击');
  },
)

主题定制

Bruno 支持深度主题定制：

// 自定义主题配置
BrnAllThemeConfig customConfig = BrnAllThemeConfig(
  commonConfig: BrnCommonConfig(
    brandPrimary: Color(0xFF3072F6),
    colorTextBase: Color(0xFF222222),
    fontSizeBase: 16,
  ),
  buttonConfig: BrnButtonConfig(
    bigButtonHeight: 48,
    bigButtonFontSize: 16,
  ),
);

// 注册主题
BrnInitializer.register(allThemeConfig: customConfig);

依赖的开源库

Bruno 参考和依赖了多个优秀的开源库：

• flutter_gifimage - GIF 图片支持
• photo_view - 图片预览
• flutter_intro - 引导页
• flutter_badges - 徽章组件
• lpinyin - 拼音处理
• azlistview - 字母索引列表

适用场景

企业级应用

• 房产类应用（源自链家业务）
• 电商类应用
• O2O 服务应用

中后台移动端

• 管理后台移动端
• 数据展示应用
• 业务工具应用

快速原型开发

• MVP 产品快速搭建
• 原型验证
• 演示应用

设计原则

Bruno 遵循以下设计原则：

1. 一致性：保持视觉和交互的一致性
2. 简洁性：界面简洁，信息层级清晰
3. 可用性：注重用户体验，操作直观
4. 扩展性：支持主题定制，适应不同业务

项目信息

• 组织：LianjiaTech（链家技术团队）
• 官网：https://bruno.ke.com/
• GitHub：https://github.com/LianjiaTech/bruno
• 维护状态：活跃维护中

总结

Bruno 是一套成熟的企业级 Flutter 组件库，其核心优势包括：

• 企业级品质：源自链家真实业务场景验证
• 组件丰富：覆盖移动端常用组件场景
• 主题定制：灵活的主题系统，适应不同品牌
• 中文友好：国内团队维护，文档完善
• 持续更新：与 Flutter 版本同步更新

对于需要构建企业级 Flutter 应用的开发者来说，Bruno 是一个值得信赖的选择。