网站租空间多少钱一年wordpress 淘宝客api

网站租空间多少钱一年,wordpress 淘宝客api,做老师好还是网站编辑好,泉州网站关键词优化在 Flutter 开发中#xff0c;弹窗是交互反馈、信息确认、选项选择的核心载体。原生 showDialog 存在样式固化、布局灵活度低、多按钮适配差等问题#xff0c;重复开发易导致 APP 内弹窗风格混乱。本文封装的 CustomDialogWidget 整合 “头部 内容 按钮区” 全自定义、单选…在 Flutter 开发中弹窗是交互反馈、信息确认、选项选择的核心载体。原生showDialog存在样式固化、布局灵活度低、多按钮适配差等问题重复开发易导致 APP 内弹窗风格混乱。本文封装的CustomDialogWidget整合 “头部 内容 按钮区” 全自定义、单选 / 多选选项、深色模式适配等能力一行代码调用覆盖确认提示、选项选择、表单录入等 90% 弹窗场景。一、核心优势精准解决开发痛点全布局自定义头部标题 / 图标、内容区文本 / 表单 / 列表、按钮区单按钮 / 双按钮 / 多按钮均可独立配置支持任意 Widget 嵌入多按钮灵活适配支持按钮水平均分、左右分布可单独配置每个按钮的颜色、文本、点击逻辑适配确认 / 取消、提交 / 重置等场景选项选择内置集成单选 / 多选选项列表无需额外封装支持初始选中与选中回调适配筛选、选择类场景交互体验优化点击遮罩可配置是否关闭、按钮点击带防重复触发、支持弹窗动画自定义符合用户操作认知高适配强鲁棒自动适配深色模式支持弹窗圆角、阴影、宽高限制参数断言校验避免非法配置二、核心配置速览关键参数一目了然配置分类核心参数核心作用必选配置title、onButtonTap弹窗标题、按钮点击回调内容配置content、options、isMultipleSelect、initialSelectedOptions自定义内容、选项列表、单选 / 多选、初始选中项按钮配置buttonTexts、buttonStyles、buttonLayout按钮文本、按钮样式、按钮布局水平均分 / 左右分布样式配置radius、shadowColor、bgColor、titleStyle弹窗圆角、阴影、背景色、标题样式适配配置adaptDarkMode、barrierDismissible、maxWidth深色模式适配、遮罩点击关闭、最大宽度限制三、生产级完整代码可直接复制开箱即用dartimport package:flutter/material.dart; /// 弹窗按钮布局方式枚举 enum DialogButtonLayout { horizontalSplit, // 水平均分多按钮均分宽度 leftRight, // 左右分布仅双按钮左小右大 } /// 通用弹窗组件全自定义布局单选/多选支持 class CustomDialogWidget extends StatefulWidget { // 必选参数 final String title; // 弹窗标题 final Function(int,String?) onButtonTap; // 按钮点击回调参数按钮索引、选中选项 // 内容配置 final Widget? content; // 自定义内容优先级高于options final ListString? options; // 选项列表用于单选/多选场景 final bool isMultipleSelect; // 是否多选仅options有效String? initialSelectedOptions; // 初始选中选项仅options有效 // 按钮配置 finalString buttonTexts; // 按钮文本列表至少1个 ButtonStyle? buttonStyles; // 按钮样式列表与文本列表长度一致 final DialogButtonLayout buttonLayout; // 按钮布局方式 // 样式配置 final double radius; // 弹窗圆角默认12px final Color shadowColor; // 弹窗阴影颜色默认灰色 final Color bgColor; // 弹窗背景色默认白色 final TextStyle? titleStyle; // 标题样式 final TextStyle? optionStyle; // 选项文本样式 final TextStyle? selectedOptionStyle; // 选中选项样式 final double padding; // 弹窗内边距默认16px final double titleBottomSpacing; // 标题底部间距默认12px final double contentBottomSpacing; // 内容底部间距默认16px // 适配与交互配置 final bool adaptDarkMode; // 适配深色模式默认true final bool barrierDismissible; // 点击遮罩是否关闭默认true final double maxWidth; // 弹窗最大宽度默认300px final Duration animationDuration; // 弹窗动画时长默认300ms const CustomDialogWidget({ super.key, required this.title, required this.onButtonTap, required this.buttonTexts, // 内容配置 this.content, this.options, this.isMultipleSelect false, this.initialSelectedOptions, // 按钮配置 this.buttonStyles, this.buttonLayout DialogButtonLayout.horizontalSplit, // 样式配置 this.radius 12.0, this.shadowColor Colors.grey, this.bgColor Colors.white, this.titleStyle, this.optionStyle, this.selectedOptionStyle, this.padding 16.0, this.titleBottomSpacing 12.0, this.contentBottomSpacing 16.0, // 适配与交互配置 this.adaptDarkMode true, this.barrierDismissible true, this.maxWidth 300.0, this.animationDuration const Duration(milliseconds: 300), }) : assert(buttonTexts.isNotEmpty, 按钮文本列表不可为空), assert((buttonStyles null || buttonStyles.length buttonTexts.length), 按钮样式列表长度必须与文本列表一致), assert((options null initialSelectedOptions null) || (options ! null (initialSelectedOptions null || initialSelectedOptions.every(options.contains))), 初始选中选项必须在选项列表中), assert(content ! null || options ! null, 必须配置content或options); /// 静态方法显示弹窗简化调用 static void show({ required BuildContext context, required String titleString buttonTexts, required Function(int, ListString?) onButtonTap, Widget? contentString? options, bool isMultipleSelect false, String? initialSelectedOptions, ListButtonStyle? buttonStyles, DialogButtonLayout buttonLayout DialogButtonLayout.horizontalSplit, }) { showDialog( context: context, barrierDismissible: false, builder: (context) CustomDialogWidget( title: title, buttonTexts: buttonTexts, onButtonTap: onButtonTap, content: content, options: options, isMultipleSelect: isMultipleSelect, initialSelectedOptions: initialSelectedOptions, buttonStyles: buttonStyles, buttonLayout: buttonLayout, ), ); } overrideCustomDialogWidget createState() _CustomDialogWidgetState(); } class _CustomDialogWidgetState extends StateCustomDialogWidget { String _selectedOptions; override void initState() { super.initState(); // 初始化选中选项去重 _selectedOptions widget.initialSelectedOptions?.toSet().toList() ?? []; // 单选模式下最多选中1个 if (widget.options ! null !widget.isMultipleSelect _selectedOptions.length 1) { _selectedOptions [_selectedOptions.first]; } } /// 深色模式颜色适配 Color _adaptDarkMode(Color lightColor, Color darkColor) { if (!widget.adaptDarkMode) return lightColor; return MediaQuery.platformBrightnessOf(context) Brightness.dark ? darkColor : lightColor; } /// 构建选项列表单选/多选 Widget _buildOptions() { if (widget.options null) return const SizedBox.shrink(); final adaptedOptionStyle widget.optionStyle ?? TextStyle( fontSize: 14, color: _adaptDarkMode(Colors.black87, Colors.white70), ); final adaptedSelectedOptionStyle widget.selectedOptionStyle ?? TextStyle( fontSize: 14, color: _adaptDarkMode(Colors.blue, Colors.blueAccent), fontWeight: FontWeight.w500, ); final adaptedSelectColor _adaptDarkMode(Colors.blue, Colors.blueAccent); return Column( mainAxisSize: MainAxisSize.min, children: widget.options!.map((option) { final isSelected _selectedOptions.contains(option); return GestureDetector( onTap: () { if (!widget.isMultipleSelect) { setState(() _selectedOptions [option]); } else { setState(() { isSelected ? _selectedOptions.remove(option) : _selectedOptions.add(option); }); } }, child: Container( padding: const EdgeInsets.symmetric(vertical: 8), child: Row( children: [ // 选择框 Icon( widget.isMultipleSelect ? (isSelected ? Icons.check_box : Icons.check_box_outline_blank) : (isSelected ? Icons.radio_button_checked : Icons.radio_button_unchecked), size: 20, color: adaptedSelectColor, ), const SizedBox(width: 8), // 选项文本 Text( option, style: isSelected ? adaptedSelectedOptionStyle : adaptedOptionStyle, ), ], ), ), ); }).toList(), ); } /// 构建按钮区 Widget _buildButtons() { final adaptedBgColor _adaptDarkMode(widget.bgColor, const Color(0xFF2D2D2D)); final buttonCount widget.buttonTexts.length; // 默认按钮样式 final defaultButtonStyle TextButton.styleFrom( backgroundColor: adaptedBgColor, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(8), ), padding: const EdgeInsets.symmetric(vertical: 12), ); // 生成按钮列表 final buttons List.generate(buttonCount, (index) { final buttonText widget.buttonTexts[index]; final buttonStyle widget.buttonStyles?[index] ?? defaultButtonStyle; return Expanded( flex: widget.buttonLayout DialogButtonLayout.leftRight buttonCount 2 ? (index 0 ? 1 : 2) // 双按钮左右分布时右按钮占比更大 : 1, child: TextButton( onPressed: () { Navigator.pop(context); // 关闭弹窗 widget.onButtonTap(index, widget.options ! null ? _selectedOptions : null); }, style: buttonStyle, child: Text(buttonText), ), ); }); // 按钮间距 final spacing widget.buttonLayout DialogButtonLayout.horizontalSplit ? const SizedBox(width: 8) : const SizedBox(width: 16); return Row( children: List.generate(buttonCount, (index) { Widget rowChildren [buttons[index]]; if (index ! buttonCount - 1) rowChildren.add(spacing); return rowChildren; }).expand((e) e).toList(), ); } override Widget build(BuildContext context) { // 深色模式适配样式 final adaptedBgColor _adaptDarkMode(widget.bgColor, const Color(0xFF2D2D2D)); final adaptedShadowColor _adaptDarkMode(widget.shadowColor, Colors.black); final adaptedTitleStyle widget.titleStyle ?? TextStyle( fontSize: 18, fontWeight: FontWeight.w500, color: _adaptDarkMode(Colors.black87, Colors.white70), ); return Dialog( shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(widget.radius), ), elevation: 8, shadowColor: adaptedShadowColor.withOpacity(0.3), backgroundColor: Colors.transparent, barrierDismissible: widget.barrierDismissible, child: Container( width: min(widget.maxWidth, MediaQuery.of(context).size.width - 40), padding: EdgeInsets.all(widget.padding), decoration: BoxDecoration( color: adaptedBgColor, borderRadius: BorderRadius.circular(widget.radius), ), child: Column( mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.start, children: [ // 标题 Text( widget.title, style: adaptedTitleStyle, textAlign: TextAlign.center, ), SizedBox(height: widget.titleBottomSpacing), // 内容区自定义内容优先否则显示选项列表 widget.content ?? _buildOptions(), SizedBox(height: widget.contentBottomSpacing), // 按钮区 _buildButtons(), ], ), ), ); } }四、三大高频场景落地示例直接复制到项目可用场景 1确认弹窗删除确认 - 单按钮 / 双按钮适用场景删除数据、退出登录、重要操作确认等需二次确认的场景dart// 点击删除按钮触发 CustomDialogWidget.show( context: context, title: 删除确认, content: const Text( 确定要删除这条数据吗删除后不可恢复, style: TextStyle(fontSize: 14, color: Color(0xFF666666)), textAlign: TextAlign.center, ), buttonTexts: const [取消, 确定删除], buttonStyles: [ // 取消按钮样式 TextButton.styleFrom( backgroundColor: const Color(0xFFF5F5F5), shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)), ), // 确认按钮样式红色强调 TextButton.styleFrom( backgroundColor: Colors.redAccent, shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)), ), ], buttonLayout: DialogButtonLayout.leftRight, onButtonTap: (index, _) { if (index 1) { // 点击确定删除 debugPrint(执行删除操作); // 实际业务调用删除接口 deleteData(); } }, );场景 2多选弹窗筛选条件 - 多选项适用场景筛选条件选择、兴趣标签选择、多选项配置等场景dart// 筛选按钮触发 CustomDialogWidget.show( context: context, title: 筛选订单状态, options: const [全部, 待付款, 待发货, 待收货, 已完成, 已取消], isMultipleSelect: true, initialSelectedOptions: const [全部, 待发货], buttonTexts: const [重置, 确定], buttonLayout: DialogButtonLayout.leftRight, onButtonTap: (index, selectedOptions) { if (index 0) { // 重置 debugPrint(重置筛选条件); filterOrders([]); } else if (index 1 selectedOptions ! null) { // 确定 debugPrint(选中筛选条件$selectedOptions); // 实际业务根据选中条件筛选订单 filterOrders(selectedOptions); } }, );场景 3自定义内容弹窗表单录入 - 自定义组件适用场景新增数据、编辑信息、输入备注等需表单录入的场景dart// 新增备注按钮触发 final TextEditingController _remarkController TextEditingController(); CustomDialogWidget.show( context: context, title: 添加备注, content: Column( mainAxisSize: MainAxisSize.min, children: [ TextField( controller: _remarkController, maxLines: 3, decoration: const InputDecoration( hintText: 请输入备注信息最多50字, hintStyle: TextStyle(fontSize: 14, color: Color(0xFF999999)), border: OutlineInputBorder(), contentPadding: EdgeInsets.all(12), ), maxLength: 50, ), ], ), buttonTexts: const [取消, 保存], buttonLayout: DialogButtonLayout.leftRight, onButtonTap: (index, _) { if (index 1) { // 保存 final remark _remarkController.text.trim(); debugPrint(保存备注$remark); // 实际业务保存备注信息 saveRemark(remark); } _remarkController.dispose(); }, );五、核心封装技巧复用成熟设计思路布局分层设计将弹窗拆分为 “标题 内容 按钮” 三层独立结构每层支持自定义兼顾通用性与灵活性选项内置管理内部维护单选 / 多选选中状态无需外部状态管理通过回调返回选中结果简化使用按钮灵活适配支持多按钮布局与独立样式配置双按钮场景提供 “左右分布” 优化符合视觉设计规范静态方法简化调用提供show静态方法封装showDialog逻辑一行代码即可唤起弹窗边界校验保障通过断言校验按钮数量、选项与初始选中项一致性提前规避开发错误六、避坑指南解决 90% 开发痛点内容高度控制自定义内容如长文本、表单建议限制高度或嵌套SingleChildScrollView避免弹窗超出屏幕按钮样式匹配buttonStyles长度必须与buttonTexts一致未配置时将使用默认样式建议关键按钮如 “确认”单独配置强调样式遮罩关闭逻辑重要操作如删除、支付建议设置barrierDismissible: false避免误触遮罩关闭弹窗选项唯一性options列表需保证元素唯一否则选中状态会混乱实体类场景可通过 “文本 ID” 组合确保唯一深色模式兼容自定义颜色时需通过_adaptDarkMode方法适配避免浅色文本配浅色背景导致不可见资源释放自定义内容中的TextEditingController等资源需在回调中手动释放避免内存泄漏https://openharmonycrossplatform.csdn.net/content