网站建设化学图片公司在线起名免费网

网站建设化学图片,公司在线起名免费网,实际网站开发怎样分工,房地产网站建设内容在 Flutter 开发中#xff0c;按钮是交互的核心载体#xff08;提交、取消、操作、跳转#xff09;。原生ElevatedButton/OutlinedButton/TextButton存在样式配置繁琐、状态管理分散#xff08;加载、禁用、点击态#xff09;、交互反馈单一等问题。本文封装的CommonButto…在 Flutter 开发中按钮是交互的核心载体提交、取消、操作、跳转。原生ElevatedButton/OutlinedButton/TextButton存在样式配置繁琐、状态管理分散加载、禁用、点击态、交互反馈单一等问题。本文封装的CommonButtonWidget 通用按钮组件整合 “多样式纯色 / 渐变 / 边框 / 文字 多状态加载 / 禁用 / 点击态 交互优化防抖 / 长按 / 水波纹 全样式自定义” 四大核心能力一行代码调用覆盖 95% 按钮使用场景。一、核心优势核心能力解决痛点核心价值 多样式自由切换不同样式按钮需重复封装支持纯色 / 渐变 / 边框 / 文字 4 种基础样式参数一键切换无需重复写布局 多状态智能适配加载 / 禁用 / 点击态需手动判断内置加载中、禁用、点击态、长按态样式状态联动自动适配⚡ 交互体验优化快速点击重复触发、反馈不友好内置防抖、长按回调、水波纹反馈符合移动端交互规范️ 样式全自定义原生按钮样式定制繁琐圆角、高度、内边距、文本样式、加载动画均可配置支持图标 文本组合 适配性强深色模式 / 全面屏适配复杂自动适配深色模式支持自定义水波纹颜色点击区域符合人机规范 极简调用原生按钮参数多、配置复杂一行代码调用默认配置覆盖 80% 场景自定义配置灵活扩展二、核心配置速览配置分类核心参数类型默认值核心作用必选配置textString-必传按钮文本onTapVoidCallback-必传点击回调样式配置buttonTypeButtonTypeButtonType.solid按钮类型纯色 / 渐变 / 边框 / 文字bgColorColorColors.blue纯色按钮背景色gradientGradient?null渐变按钮渐变优先级高于 bgColorborderColorColorColors.blue边框 / 文字按钮边框 / 文本色radiusdouble8.0按钮圆角heightdouble48.0按钮高度建议≥44pxtextStyleTextStyle16 号白色粗体文本样式状态配置isLoadingboolfalse是否加载中自动禁用点击isDisabledboolfalse是否禁用loadingTextString加载中...加载中文本loadingSizedouble20.0加载图标大小交互配置debounceDurationDuration300ms防抖时长onLongPressVoidCallback?null长按回调splashColorColor?null水波纹颜色expandbooltrue是否宽度占满扩展配置prefixIcon/suffixIconWidget?null前缀 / 后缀图标iconSizedouble24.0图标大小adaptDarkModebooltrue深色模式适配三、完整代码可直接复制使用dartimport package:flutter/material.dart; import package:flutter_easyloading/flutter_easyloading.dart; /// 按钮类型枚举 enum ButtonType { solid, // 纯色按钮 gradient, // 渐变按钮 outline, // 边框按钮 text // 文字按钮 } /// 通用按钮组件 class CommonButtonWidget extends StatefulWidget { // 必选参数 final String text; // 按钮文本 final VoidCallback onTap; // 点击回调 // 样式配置 final ButtonType buttonType; // 按钮类型默认纯色 final Color bgColor; // 背景色纯色按钮 final Gradient? gradient; // 渐变渐变按钮优先级高于bgColor final Color borderColor; // 边框色边框/文字按钮 final double borderWidth; // 边框宽度默认1px final double radius; // 圆角默认8px final double height; // 按钮高度默认48px final EdgeInsetsGeometry padding; // 内边距默认水平16px final TextStyle textStyle; // 文本样式 final Color disabledColor; // 禁用背景色 final Color disabledTextColor; // 禁用文本色 // 状态配置 final bool isLoading; // 是否加载中默认false final bool isDisabled; // 是否禁用默认false final String loadingText; // 加载中文本默认加载中... final double loadingSize; // 加载图标大小默认20px final Color loadingColor; // 加载图标颜色 // 交互配置 final Duration debounceDuration; // 防抖时长默认300ms final VoidCallback? onLongPress; // 长按回调 final Color? splashColor; // 水波纹颜色 final bool enableFeedback; // 是否开启点击反馈默认true final bool expand; // 是否宽度占满默认true // 扩展配置 final Widget? prefixIcon; // 前缀图标 final Widget? suffixIcon; // 后缀图标 final double iconSize; // 图标大小默认24px final double iconTextSpacing; // 图标与文本间距默认8px final bool adaptDarkMode; // 适配深色模式默认true const CommonButtonWidget({ super.key, required this.text, required this.onTap, // 样式配置 this.buttonType ButtonType.solid, this.bgColor Colors.blue, this.gradient, this.borderColor Colors.blue, this.borderWidth 1.0, this.radius 8.0, this.height 48.0, this.padding const EdgeInsets.symmetric(horizontal: 16), this.textStyle const TextStyle(fontSize: 16, color: Colors.white, fontWeight: FontWeight.w500), this.disabledColor const Color(0xFFE0E0E0), this.disabledTextColor const Color(0xFF999999), // 状态配置 this.isLoading false, this.isDisabled false, this.loadingText 加载中..., this.loadingSize 20.0, this.loadingColor Colors.white, // 交互配置 this.debounceDuration const Duration(milliseconds: 300), this.onLongPress, this.splashColor, this.enableFeedback true, this.expand true, // 扩展配置 this.prefixIcon, this.suffixIcon, this.iconSize 24.0, this.iconTextSpacing 8.0, this.adaptDarkMode true, }); override StateCommonButtonWidget createState() _CommonButtonWidgetState(); } class _CommonButtonWidgetState extends StateCommonButtonWidget { bool _isClicking false; // 防抖标记 /// 深色模式颜色适配 Color _adaptDarkMode(Color lightColor, Color darkColor) { if (!widget.adaptDarkMode) return lightColor; return MediaQuery.platformBrightnessOf(context) Brightness.dark ? darkColor : lightColor; } /// 防抖点击处理带异常捕获 Futurevoid _handleTap() async { // 防抖/加载/禁用状态拦截 if (_isClicking || widget.isLoading || widget.isDisabled) return; _isClicking true; try { widget.onTap(); // 执行点击回调 } catch (e) { // 全局异常捕获避免按钮点击崩溃 EasyLoading.showError(操作失败${e.toString()}); debugPrint(按钮点击异常$e); } finally { // 防抖延迟后重置标记 await Future.delayed(widget.debounceDuration); if (mounted) { setState(() _isClicking false); } } } /// 构建按钮背景/边框装饰 Decoration? _buildDecoration() { final isDisabled widget.isDisabled || widget.isLoading; // 基础颜色适配深色模式禁用状态 Color bgColor _adaptDarkMode(widget.bgColor, Colors.blueAccent); Color borderColor _adaptDarkMode(widget.borderColor, Colors.blueAccent); // 禁用状态颜色覆盖 if (isDisabled) { bgColor _adaptDarkMode(widget.disabledColor, const Color(0xFF444444)); borderColor _adaptDarkMode(widget.disabledColor, const Color(0xFF555555)); } switch (widget.buttonType) { case ButtonType.solid: return BoxDecoration( color: bgColor, borderRadius: BorderRadius.circular(widget.radius), ); case ButtonType.gradient: return BoxDecoration( gradient: widget.gradient ?? LinearGradient( colors: [bgColor, bgColor.withOpacity(0.8)], begin: Alignment.centerLeft, end: Alignment.centerRight, ), borderRadius: BorderRadius.circular(widget.radius), ); case ButtonType.outline: return BoxDecoration( border: Border.all( color: borderColor, width: isDisabled ? widget.borderWidth * 0.5 : widget.borderWidth, ), borderRadius: BorderRadius.circular(widget.radius), color: Colors.transparent, ); case ButtonType.text: return null; // 文字按钮无装饰 } } /// 构建按钮文本样式适配状态深色模式 TextStyle _buildTextStyle() { final isDisabled widget.isDisabled || widget.isLoading; Color textColor widget.textStyle.color ?? Colors.white; // 边框/文字按钮默认文本色适配 if (widget.buttonType ButtonType.outline || widget.buttonType ButtonType.text) { textColor _adaptDarkMode(widget.borderColor, Colors.blueAccent); } // 禁用状态文本色覆盖 if (isDisabled) { textColor _adaptDarkMode(widget.disabledTextColor, const Color(0xFF777777)); } // 最终深色模式适配 textColor _adaptDarkMode(textColor, widget.textStyle.color ?? Colors.white70); return widget.textStyle.copyWith( color: textColor, fontSize: widget.textStyle.fontSize ?? 16, fontWeight: widget.textStyle.fontWeight ?? FontWeight.w500, decoration: isDisabled ? TextDecoration.none : widget.textStyle.decoration, ); } /// 构建按钮内容图标文本加载动画组合 Widget _buildButtonContent() { final isLoading widget.isLoading; final displayText isLoading ? widget.loadingText : widget.text; final loadingColor _adaptDarkMode(widget.loadingColor, Colors.white70); ListWidget contentWidgets []; // 加载中图标优先级最高 if (isLoading) { contentWidgets.add( SizedBox( width: widget.loadingSize, height: widget.loadingSize, child: CircularProgressIndicator( strokeWidth: 2, color: loadingColor, valueColor: AlwaysStoppedAnimationColor(loadingColor), ), ), ); if (displayText.isNotEmpty) { contentWidgets.add(SizedBox(width: widget.iconTextSpacing)); } } else { // 前缀图标非加载状态显示 if (widget.prefixIcon ! null) { contentWidgets.add( SizedBox( width: widget.iconSize, height: widget.iconSize, child: widget.prefixIcon, ), ); contentWidgets.add(SizedBox(width: widget.iconTextSpacing)); } } // 按钮文本支持空文本 if (displayText.isNotEmpty) { contentWidgets.add( Expanded( child: Text( displayText, style: _buildTextStyle(), maxLines: 1, overflow: TextOverflow.ellipsis, textAlign: TextAlign.center, ), ), ); } // 后缀图标非加载状态显示 if (!isLoading widget.suffixIcon ! null) { contentWidgets.add(SizedBox(width: widget.iconTextSpacing)); contentWidgets.add( SizedBox( width: widget.iconSize, height: widget.iconSize, child: widget.suffixIcon, ), ); } return Row( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, mainAxisSize: MainAxisSize.min, children: contentWidgets, ); } override Widget build(BuildContext context) { final isDisabled widget.isDisabled || widget.isLoading; // 水波纹颜色适配默认使用背景色半透明 final splashColor widget.splashColor ?? _adaptDarkMode( widget.bgColor.withOpacity(0.2), Colors.blueAccent.withOpacity(0.3), ); // 基础按钮容器统一布局 Widget buttonContainer Container( width: widget.expand ? double.infinity : null, height: widget.height, padding: widget.padding, decoration: _buildDecoration(), alignment: Alignment.center, // 点击区域扩大最小44x44符合iOS人机规范 constraints: BoxConstraints( minWidth: 44, minHeight: 44, maxHeight: widget.height, ), child: _buildButtonContent(), ); // 交互层封装区分水波纹/纯点击 Widget button; if (widget.buttonType ! ButtonType.text !isDisabled) { // 带水波纹的点击InkWell button InkWell( onTap: _handleTap, onLongPress: isDisabled ? null : widget.onLongPress, splashColor: splashColor, highlightColor: Colors.transparent, // 去除高亮色仅保留水波纹 borderRadius: BorderRadius.circular(widget.radius), enableFeedback: widget.enableFeedback, child: buttonContainer, ); } else { // 纯点击GestureDetector button GestureDetector( onTap: _handleTap, onLongPress: isDisabled ? null : widget.onLongPress, behavior: HitTestBehavior.opaque, enableFeedback: widget.enableFeedback !isDisabled, child: buttonContainer, ); } // 禁用状态透明度处理 if (isDisabled) { button Opacity( opacity: 0.6, child: button, ); } return button; } } // pubspec.yaml依赖如需使用EasyLoading /* dependencies: flutter: sdk: flutter flutter_easyloading: ^3.0.5 */四、四大高频场景示例场景 1提交按钮纯色 加载态适用场景表单提交、数据保存需显示加载状态并禁用重复点击dartclass SubmitButtonDemo extends StatefulWidget { override StateSubmitButtonDemo createState() _SubmitButtonDemoState(); } class _SubmitButtonDemoState extends StateSubmitButtonDemo { bool _isSubmitting false; // 模拟表单提交逻辑 Futurevoid _submitForm() async { setState(() _isSubmitting true); try { // 模拟接口请求2秒 await Future.delayed(const Duration(seconds: 2)); EasyLoading.showSuccess(提交成功); } catch (e) { EasyLoading.showError(提交失败$e); } finally { if (mounted) { setState(() _isSubmitting false); } } } override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text(提交按钮示例)), body: Padding( padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 48), child: CommonButtonWidget( text: 提交表单, onTap: _submitForm, buttonType: ButtonType.solid, bgColor: Colors.green, // 成功色 radius: 24, // 大圆角 height: 52, // 加高按钮 isLoading: _isSubmitting, // 加载状态联动 loadingText: 提交中..., // 加载文本 loadingColor: Colors.white, // 加载图标颜色 disabledColor: Colors.grey[300]!, // 禁用背景色 debounceDuration: const Duration(milliseconds: 500), // 加长防抖 ), ), ); } }场景 2渐变按钮图标 文本适用场景支付、主要操作按钮需视觉突出并带图标增强识别dartclass GradientButtonDemo extends StatelessWidget { override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text(渐变按钮示例)), body: Padding( padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 48), child: CommonButtonWidget( text: 立即支付, onTap: () EasyLoading.showToast(支付功能已触发), buttonType: ButtonType.gradient, // 橙红渐变 gradient: const LinearGradient( colors: [Colors.orange, Colors.redAccent], begin: Alignment.centerLeft, end: Alignment.centerRight, ), radius: 8, height: 48, prefixIcon: const Icon(Icons.payment, color: Colors.white), // 支付图标 iconSize: 20, // 小图标 iconTextSpacing: 10, // 加大图标间距 textStyle: const TextStyle( fontSize: 16, fontWeight: FontWeight.bold, ), splashColor: Colors.white.withOpacity(0.2), // 白色水波纹 ), ), ); } }场景 3边框按钮取消 / 确认组合适用场景弹窗操作、列表操作需区分主次按钮dartclass OutlineButtonDemo extends StatelessWidget { override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text(边框按钮示例)), body: Padding( padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 24), child: Row( children: [ // 取消按钮边框样式 Expanded( child: CommonButtonWidget( text: 取消, onTap: () Navigator.pop(context), buttonType: ButtonType.outline, borderColor: Colors.grey[500]!, borderWidth: 1.0, radius: 4, height: 44, textStyle: const TextStyle(color: Colors.grey[700]), ), ), const SizedBox(width: 16), // 确认按钮纯色样式 Expanded( child: CommonButtonWidget( text: 确认, onTap: () EasyLoading.showToast(确认操作已触发), buttonType: ButtonType.solid, bgColor: Colors.blue, radius: 4, height: 44, ), ), ], ), ), ); } }场景 4文字按钮辅助操作适用场景找回密码、查看更多、辅助说明需轻量样式dartclass TextButtonDemo extends StatelessWidget { override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text(文字按钮示例)), body: Padding( padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 48), child: Column( crossAxisAlignment: CrossAxisAlignment.center, children: [ const Text(忘记密码, style: TextStyle(fontSize: 16)), const SizedBox(height: 8), CommonButtonWidget( text: 点击找回密码, onTap: () EasyLoading.showToast(跳转到找回密码页面), buttonType: ButtonType.text, borderColor: Colors.blue, // 文本色继承borderColor radius: 0, // 无圆角 height: 36, // 矮按钮 textStyle: const TextStyle( color: Colors.blue, fontSize: 14, decoration: TextDecoration.underline, // 下划线 ), suffixIcon: const Icon( // 右侧箭头 Icons.arrow_forward_ios, color: Colors.blue, size: 16, ), iconSize: 16, expand: false, // 宽度自适应 ), ], ), ), ); } }五、核心封装技巧1. 多样式统一封装通过ButtonType枚举切换 4 种按钮样式核心逻辑复用纯色按钮BoxDecoration设置背景色渐变按钮优先使用gradient无渐变则降级为纯色边框按钮透明背景 边框文字按钮无装饰仅文本样式避免为每种按钮单独封装组件减少重复代码。2. 防抖逻辑内置通过_isClicking标记实现防抖避免快速重复点击防抖时长可配置默认 300ms适配不同场景finally块确保标记重置避免按钮永久禁用异常捕获包裹onTap回调避免点击逻辑崩溃导致按钮卡死3. 状态联动适配isLoading/isDisabled自动禁用点击无需外部判断禁用状态自动调整颜色、透明度、交互反馈加载状态自动显示加载动画隐藏图标替换文本状态变更时 UI 自动刷新无需手动调用setState4. 内容灵活组合支持前缀 / 后缀图标、加载动画与文本的自由组合加载状态优先级最高自动隐藏图标文本支持单行省略适配长文本场景图标大小、间距可配置满足不同布局需求5. 交互体验优化水波纹优化仅非文字按钮显示自定义颜色去除高亮色点击反馈enableFeedback控制震动反馈禁用状态自动关闭点击区域扩大最小 44x44符合 iOS 人机交互规范长按回调支持长按操作禁用状态自动失效六、避坑指南1. 防抖时长适配建议值200-500ms过短无法防抖过长影响响应表单提交 / 支付等关键操作500ms普通操作 / 页面跳转200-300ms禁用防抖设置debounceDuration: Duration.zero2. 加载状态交互isLoading为 true 时自动禁用点击无需额外设置isDisabled加载文本建议简短如 “加载中...”避免文本溢出加载图标大小建议 16-24px过大会导致布局变形3. 深色模式兼容自定义颜色需通过_adaptDarkMode方法适配避免深色模式下颜色冲突水波纹颜色默认适配深色模式无需单独配置禁用状态颜色需同时适配浅色 / 深色模式4. 样式优先级渐变按钮中gradient优先级高于bgColor设置渐变后bgColor仅作为降级文本颜色优先级禁用状态 按钮类型默认 自定义textStyle边框宽度在禁用状态下自动减半增强视觉区分5. 点击区域规范按钮高度建议≥44px符合移动端交互规范expand: false时按钮宽度自适应需确保最小点击区域constraints确保最小 44x44 点击区域适配小按钮场景6. 水波纹注意事项文字按钮默认关闭水波纹如需开启需自定义InkWell水波纹颜色需与背景色对比明显增强反馈InkWell需有背景色父容器否则水波纹可能不显示七、扩展能力按需定制1. 添加点击动画dart// 在_buildButtonContent外层添加缩放动画 Widget _buildButtonContent() { return AnimatedScale( scale: _isClicking ? 0.98 : 1.0, duration: const Duration(milliseconds: 100), child: Row(/* 原有内容 */), ); }2. 支持自定义加载组件dart// 添加配置参数 final Widget? customLoadingWidget; // 在_buildButtonContent中替换加载图标 if (isLoading) { contentWidgets.add( widget.customLoadingWidget ?? SizedBox(/* 原有加载图标 */) ); }3. 支持圆角为圆形dart// 使用BorderRadius.circular(widget.radius double.infinity ? widget.height/2 : widget.radius) // 调用时设置radius: double.infinity即可实现圆形按钮 CommonButtonWidget( text: 圆形按钮, onTap: () {}, radius: double.infinity, height: 48, expand: false, )八、总结CommonButtonWidget 组件解决了原生按钮样式定制繁琐、状态管理复杂、交互体验差的问题通过统一封装实现了多样式、多状态、高自定义的按钮组件。组件具备以下特性 4 种基础样式一键切换 加载 / 禁用 / 点击态自动适配⚡ 内置防抖、长按、水波纹优化️ 全样式自定义满足品牌需求 适配深色模式、全面屏、人机规范一行代码即可调用覆盖表单提交、支付、弹窗操作、辅助说明等 95% 按钮场景大幅提升开发效率和用户体验。欢迎大家加入[开源鸿蒙跨平台开发者社区](https://openharmonycrossplatform.csdn.net)一起共建开源鸿蒙跨平台生态。