当前位置：首页 > news >正文

Bruno按钮组件完全指南：从基础按钮到复杂按钮面板

news 2026/3/27 4:55:19

Bruno按钮组件完全指南：从基础按钮到复杂按钮面板

【免费下载链接】brunoAn enterprise-class package of Flutter components for mobile applications. ( Bruno 是基于一整套设计体系的 Flutter 组件库。)项目地址: https://gitcode.com/gh_mirrors/bru/bruno

Bruno是基于一整套设计体系的Flutter组件库，为企业级移动应用提供开箱即用的高质量UI组件。在移动应用开发中，按钮作为最基础且最频繁使用的交互元素，Bruno提供了从简单按钮到复杂按钮面板的完整解决方案。本文将详细介绍Bruno按钮组件体系，帮助你快速掌握各类按钮的使用方法和最佳实践。🚀

Bruno按钮组件体系概览

Bruno的按钮组件库分为三大类别：基础按钮、图标按钮和按钮面板。每个类别针对不同的使用场景，提供丰富的定制选项和一致的视觉体验。

基础按钮组件

基础按钮是应用中最常见的交互元素，Bruno提供了多种样式和尺寸的基础按钮：

大主按钮（BrnBigMainButton）- 适用于页面底部的核心操作

小主按钮（BrnSmallMainButton）- 适用于紧凑布局的次要核心操作

大边框按钮（BrnBigOutlineButton）- 适用于取消或次要功能操作

这些基础按钮组件位于lib/src/components/button/目录，包括brn_big_main_button.dart、brn_small_main_button.dart和brn_big_outline_button.dart等文件。

图标按钮组件

图标按钮将图标与文字结合，提供更直观的操作指引：

图标按钮（BrnIconButton）- 支持文字和图片的任意组合

垂直图标按钮（BrnVerticalIconButton）- 专为底部导航设计的垂直布局按钮

图标按钮组件支持四种文字位置：上、下、左、右，可以通过direction参数灵活控制。相关源码位于lib/src/components/button/brn_icon_button.dart和brn_vertical_icon_button.dart。

按钮面板组件

按钮面板用于组合多个按钮，提供复杂的交互布局：

按钮面板（BrnButtonPanel）- 主次按钮组合的横向交互面板

底部按钮面板（BrnBottomButtonPanel）- 页面底部的多功能按钮组合

多底部按钮（BrnMultipleBottomButton）- 支持多个主按钮的底部布局

这些高级按钮组件位于lib/src/components/button/collection/目录，包括brn_button_panel.dart、brn_bottom_button_panel.dart和brn_multiple_bottom_button.dart。

基础按钮使用指南

大主按钮的最佳实践

大主按钮通常用于表单提交、确认操作等核心功能。它的宽度默认为屏幕宽度，非常适合页面底部的操作区域：

BrnBigMainButton( title: '提交订单', onTap: () { // 处理提交逻辑 BrnToast.show('订单提交成功', context); }, isEnable: true, // 控制按钮是否可用 )

小主按钮的灵活应用

小主按钮适用于卡片内部、对话框按钮等紧凑空间：

BrnSmallMainButton( title: '保存', onTap: () { // 保存操作 }, width: 120, // 自定义宽度 )

边框按钮的使用场景

边框按钮常用于取消、返回等次要操作，与主按钮形成视觉对比：

BrnBigOutlineButton( title: '取消', onTap: () { Navigator.pop(context); }, )

图标按钮的创意应用

灵活的文字位置

图标按钮支持四种文字位置，适应不同的布局需求：

// 文字在图标下方（默认） BrnIconButton( name: '收藏', iconWidget: Icon(Icons.star), direction: Direction.bottom, onTap: () { // 收藏操作 }, ) // 文字在图标右侧 BrnIconButton( name: '分享', iconWidget: Icon(Icons.share), direction: Direction.right, onTap: () { // 分享操作 }, )

自定义图标和样式

图标按钮支持完全自定义图标和文字样式：

BrnIconButton( name: '自定义按钮', iconWidget: Image.asset('assets/icons/custom.png'), iconWidth: 32, iconHeight: 32, style: TextStyle( fontSize: 14, color: Colors.grey[700], fontWeight: FontWeight.bold, ), widgetWidth: 100, widgetHeight: 100, onTap: () { // 自定义操作 }, )

按钮面板的高级用法

标准按钮面板配置

按钮面板自动处理按钮的布局和溢出逻辑，当次按钮超过2个时会自动折叠：

BrnButtonPanel( mainButtonName: '确定', mainButtonOnTap: () { // 主按钮点击处理 }, secondaryButtonNameList: ['取消', '保存草稿'], secondaryButtonOnTap: (index) { // 次按钮点击处理，index为按钮索引 if (index == 0) { // 取消操作 } else if (index == 1) { // 保存草稿操作 } }, )

带状态控制的按钮面板

通过BrnButtonPanelConfig可以精确控制每个按钮的状态：

BrnButtonPanel( mainButtonName: '提交审核', mainButtonOnTap: () { // 提交审核逻辑 }, isMainBtnEnable: canSubmit, // 动态控制主按钮状态 secondaryButtonList: [ BrnButtonPanelConfig(name: '保存', isEnable: true), BrnButtonPanelConfig(name: '重置', isEnable: true), BrnButtonPanelConfig(name: '预览', isEnable: hasContent), ], secondaryButtonOnTap: (index) { // 处理次按钮点击 }, )

底部按钮面板的多种组合

底部按钮面板支持主按钮、次按钮和图标按钮的灵活组合：

BrnBottomButtonPanel( mainButtonName: '发布', mainButtonOnTap: () { // 发布操作 }, secondaryButtonName: '存草稿', secondaryButtonOnTap: () { // 存草稿操作 }, iconButtonList: [ BrnVerticalIconButton( name: '更多', iconWidget: Icon(Icons.more_horiz), onTap: () { // 显示更多选项 }, ), BrnVerticalIconButton( name: '设置', iconWidget: Icon(Icons.settings), onTap: () { // 打开设置 }, ), ], )

按钮状态管理与主题定制

动态状态控制

所有Bruno按钮组件都支持动态启用/禁用状态：

// 根据条件动态控制按钮状态 BrnBigMainButton( title: '下一步', isEnable: formIsValid, // 表单验证通过时启用 onTap: () { // 下一步操作 }, )

主题定制

Bruno提供了完整的主题定制能力，可以统一修改所有按钮的样式：

// 在应用初始化时配置主题 BrnInitializer.setInitializer( defaultConfig: BrnAllThemeConfig( buttonConfig: BrnButtonConfig( bigMainButtonRadius: 8.0, bigMainButtonHeight: 48.0, bigMainButtonTextStyle: TextStyle( fontSize: 16.0, fontWeight: FontWeight.w600, ), // 更多按钮样式配置... ), ), );

最佳实践与性能优化

按钮性能优化

避免在build方法中创建回调函数：使用useMemoized或类成员变量
合理使用const构造函数：对于静态按钮使用const优化性能
按钮防重复点击：使用BrnMultiClickUtil防止快速重复点击

// 使用防重复点击 BrnBigMainButton( title: '支付', onTap: () { BrnMultiClickUtil.debounce(() { // 支付逻辑 processPayment(); }); }, )

无障碍支持

Bruno按钮组件内置了完整的无障碍支持：

BrnIconButton( name: '搜索', iconWidget: Icon(Icons.search), onTap: () { // 搜索操作 }, // 自动生成语义标签 )

常见问题解答

Q: 如何自定义按钮颜色？

A: 可以通过主题配置全局修改，或使用bgColor参数单独设置：

BrnBigMainButton( title: '自定义按钮', bgColor: Colors.purple, // 自定义背景色 onTap: () {}, )

Q: 按钮面板的弹出方向如何设置？

A: 使用popDirection参数控制弹出方向：

BrnButtonPanel( mainButtonName: '操作', mainButtonOnTap: () {}, secondaryButtonNameList: ['选项1', '选项2', '选项3'], popDirection: BrnPopupDirection.top, // 向上弹出 )

Q: 如何实现按钮的加载状态？

A: Bruno提供了BrnLoading组件与按钮配合使用：

bool _isLoading = false; BrnBigMainButton( title: _isLoading ? '处理中...' : '提交', isEnable: !_isLoading, onTap: () async { setState(() => _isLoading = true); await processData(); setState(() => _isLoading = false); }, )