flutter 自定义中间弹窗

最新推荐文章于 2025-10-22 21:07:33 发布
原创 最新推荐文章于 2025-10-22 21:07:33 发布 · 522 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#flutter #android #ios

本文介绍了如何在Flutter中使用`GeneralDialog`函数创建具有自定义样式和回调的可dismissible对话框，包括标题、内容、按钮和主题色设置。 
// An highlighted block


import 'package:flutter/material.dart';


class ShowGeneralDialogFunction {
  static void showGeneralDialogFunction(
      BuildContext context, {
      //取消回调
        Function? callBack,
        //确认回调
        Function? cancelBack,
        double? width,
        double? height,
        Widget? title,
        Widget? content,
        String? contentTitle,
        String? cancelText,
        String? disableText,
        Color? cancelTextColor,
        Color? disableTextColor,
        bool barrierDismissible = true,
        //按钮数量，可以设置为一个按钮
        int textButton = 2,
      }) {
    showDialog(
        context: context,
        barrierDismissible: barrierDismissible,
        builder: (buildContext) {
          return Material(
            type: MaterialType.transparency,
            child: Scaffold(
              backgroundColor: Colors.transparent,
              body: Center(
                child: Container(
                  width: width ?? 600.rpx,
                  clipBehavior: Clip.antiAlias,
                  decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(24.rpx)),
                  // height: 300.rpx,

                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      title ?? Container(),
                      content ??
                          Container(
                            margin: EdgeInsets.only(
                                top: 40.rpx,
                                bottom: 40.rpx,
                                right: 24.rpx,
                                left: 24.rpx),
                            child: Text(
                              contentTitle ??
                               "contentTitle",
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                  height: 1.5,
                                  fontSize: 28.rpx,
                                  color: const Color(0xff2E3346),
                                  fontWeight: FontWeight.w400),
                            ),
                          ),
                      textButton == 2
                          ? Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          GestureDetector(
                            behavior: HitTestBehavior.opaque,
                            onTap: () {
                              if (cancelBack != null) cancelBack();
                              Navigator.pop(buildContext);
                            },
                            child: Container(
                              alignment: Alignment.center,
                              width: width == null ? 300.rpx : width / 2,
                              height: height ?? 100.rpx,
                              decoration: const BoxDecoration(
                                border: Border(
                                    top: BorderSide(
                                      width: 0.5, //宽度
                                      color: Color(0xffEEEEEE), //边框颜色
                                    )),
                              ),
                              child: Text(
                                cancelText ??
                                  "cancelText",
                                style: TextStyle(
                                    color: cancelTextColor ??
                                        const Color(0xffC8CCD7),
                                    fontSize: 36.rpx,
                                    fontWeight: FontWeight.w500),
                              ),
                            ),
                          ),
                          GestureDetector(
                            behavior: HitTestBehavior.opaque,
                            onTap: () {
                              if (callBack != null) callBack();
                              Navigator.pop(buildContext);
                            },
                            child: Container(
                              alignment: Alignment.center,
                              width: width == null ? 300.rpx : width / 2,
                              height: height ?? 100.rpx,
                              decoration: const BoxDecoration(
                                border: Border(
                                    left: BorderSide(
                                      width: 0.5, //宽度
                                      color: Color(0xffEEEEEE), //边框颜色
                                    ),
                                    top: BorderSide(
                                      width: 0.5, //宽度
                                      color: Color(0xffEEEEEE), //边框颜色
                                    )),
                              ),
                              child: Text(
                                disableText ??
                                    "disableText",
                                style: TextStyle(
                                    fontSize: 36.rpx,
                                    letterSpacing: -2.rpx,
                                    color: disableTextColor ??
                                        const Color(0xff1A71FF),
                                    fontWeight: FontWeight.w500),
                              ),
                            ),
                          )
                        ],
                      )
                          : Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          GestureDetector(
                            behavior: HitTestBehavior.opaque,
                            onTap: () {
                              if (callBack != null) callBack();
                              Navigator.pop(buildContext);
                            },
                            child: Container(
                              alignment: Alignment.center,
                              width: width ?? 600.rpx,
                              height: height ?? 100.rpx,
                              decoration: const BoxDecoration(
                                border: Border(
                                    top: BorderSide(
                                      width: 0.5, //宽度
                                      color: Color(0xffEEEEEE), //边框颜色
                                    )),
                              ),
                              child: Text(
                                disableText ??
                                 "disableText",
                                style: TextStyle(
                                    fontSize: 36.rpx,
                                    letterSpacing: -2.rpx,
                                    color: disableTextColor ??
                                        const Color(0xffE72B00),
                                    fontWeight: FontWeight.w500),
                              ),
                            ),
                          )
                        ],
                      )
                    ],
                  ),
                ),
              ),
            ),
          );
        });
  }
}
万 志 鹏
关注
Flutter自定义弹框
xiangzhihong8的专栏
08-28 1922
导致这种情况发生的原因是因为，Text widget 隶属于Material 风格下的组件，如果根节点不是Material 相关组件，则会使用默认带黄色下划线的格式。如果根节点是Material 容器组件，则会采用其Material风格的样式（即不带有下换线）。 解决方案主要有三种： 1，采用根节点为脚手架Scaffold组件： Scaffold(body: content,); 2， 采用根节点为Material 组件。 Material(child: content); 3， 逐个修改Text 组件
Flutter之Overlay(弹窗)
AdrianAndroid的专栏
02-14 7117
资料 Flutter之使用overlay显示悬浮控件 类似于Toast的弹窗 class Toast { // 自定义Toast static void show({ required BuildContext context, required String message, }) { // 创建一个OverlayEntry对象 OverlayEntry overlayEntry = new OverlayEntry(builder: (context) {
Flutter---弹窗
最新发布
m0_50891221的博客
10-22 163
【代码】Flutter---弹窗。
Flutter--自定义弹窗（含底部抽屉）Dialog
weixin_41735943的博客
03-03 4337
主要是基于系统的dialog机制做一些使用限制和自定义UI的优化 核心代码： class CustomDialog { static void show(BuildContext context, Widget Function(BuildContext ctx, void Function() dismiss)builder, {bool cancellable = false}) { showDialog( context: context, ..
flutter 底部弹窗和中间弹窗
weixin_44911775的博客
12-11 1190
【代码】flutter 底部弹窗和中间弹窗。
flutter 自定义弹框
weixin_43294560的博客
04-18 4015
自定义弹框 在Material组件中定义内容,这样能实现弹框出现屏幕透明的效果 1、定义组件类来继承Dialog,添加build方法，return 自定义内容 2、通过 showDialog方法调用弹出框 showDialog( context: context, builder: (context){ return 类组件...
flutter 自定义弹窗组件
python4_1的博客
08-31 694
flutter 自定义 弹窗
flutter 自定义中间，底部dialog
qq_36865892的博客
09-18 1376
Dialog 官方提供的dialog，这里就不介绍了，这里主要介绍我在工作中自定义的一些dialog; 中间弹窗 效果图： dialog代码： class SearchDeleteDialog extends StatelessWidget { @override Widget build(BuildContext context) { return IntrinsicHei...
Flutter 实现你所谓的弹窗 (对话框)
我很好
08-09 4791
以安卓的样式覆盖在内容区域上的对话框,包含显示和关闭动画 , 对话框后面透明颜色 和对话框自身颜色,以及对话框的一些属性 (例如: 点击可以关闭对话框)
Flutter 自定义Widget 圆角矩形加三角指示器
lhj_android的博客
08-16 1662
一般app设计中都会有气泡提示，这个时候就需要用到切图了，在flutter中不管你信不信 反正对于.9的这块还是很不友好的，使用起来特别麻烦。要是安卓中这或许会很简单。 但即使支持.9 如果气泡样式很多，对于app的包大小占用其实还是有那么一丢丢的影响的。 基于此，我才用了是用代码的方式实现了圆角矩形带三角指示器 现看看效果吧 上面就是ui给出的效果，其中底部的三角形距离左边的位置还是动态可变，背景颜色还是渐变的。 基于此才用了CustomPaint方式实现一套圆角矩形加指示器的控件，下面是代码实现 Ex
Flutter弹框，自定义弹框， toast弹框
高光的博客
03-06 1236
AlertDialog 确定取消通用 弹框，长按 _alertDioalog () async { var result= await showDialog( context: context, builder: (context)=>AlertDialog( title: Text('提示信息'), content: ...
Flutter之自定义Dialog实现版本更新弹窗功能的实现
08-18
主要介绍了Flutter之自定义Dialog实现版本更新弹窗功能的实现,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
Flutter高阶技术：如何实现自定义弹出菜单框
06-03
Flutter高阶技术：如何实现自定义弹出菜单框
Flutter 自定义弹框 与 定时器
weixin_38397436的博客
05-16 464
实现 import 'package:flutter/material.dart'; class CustomDialog extends Dialog { @override Widget build(BuildContext context) { // TODO: implement build return Material( //设置背景半透明 type: MaterialType.transparency, child: Center(
flutter自定义html,Flutter自定义弹框
weixin_39850787的博客
06-16 286
在Flutter应用开发中，经常会遇到自定义弹框的开发需求，如下图所示。对于这种样式，我们可以选择自定义Dialog，具体的样式可以根据自己的需要进行修改。 例如，下面是我的实现，由于文本是一个列表，所以我需要新建一个实体类，如下所示。class IntroduceModel {int code;List data;IntroduceModel({this.code, this.data});In...
flutter 自定义弹窗
优快云博客
08-08 1533
fultter 使用Dialog 自定义弹窗 调用弹窗 showDialog( context: context, barrierDismissible: false, builder: (BuildContext context) { return ProductListDialog( productList: productList,
flutter自定义弹窗
坚果的博客
04-29 853
今天接到这样一个需求，需要自定义弹窗，所以就有了如下的代码： 通过分析，一切皆widget 所以可以这样实现： import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:flutter_screenutil/flutter_screenutil.dart'; showDialog( barrierDismissible: t.
Flutter 学习之旅 之 flutter 不使用插件，实现简单自定义弹窗PopupDialog功能
仙魁XAN
03-12 1499
目录Flutter 学习之旅 之 flutter 不使用插件，实现简单自定义弹窗PopupDialog功能一、简单介绍二、PopupDialog三、简单案例实现四、关键代码Flutter 是一款开源的 UI 软件开发工具包，由 Google 开发和维护。它允许开发者使用一套代码同时构建跨平台的应用程序，包括移动设备（iOS 和 Android）、Web 和桌面平台（Windows、macOS 和 Linux）。
flutter自定义显示弹框dialog工具类使用
Over_dose的博客
05-07 2709
我们平时在做一个项目时，肯定会有许多需要显示弹窗的地方。弹窗的样式由UI给出，不用地方有不同的弹窗。想着可以把一些常用的弹窗封装成一个工具类，使用时只需替换不同元素（一般就是文本内容）即可。 话不多说，先上示例效果图： 底部单按钮普通提示弹出框： 底部两按钮普通提示弹出框： 底部弹出列表单项选择弹出框： ...
flutter 实现底部弹窗，时间选择器。选择日期的格式是，月日时分。需要采用滚动的样式
08-14
<think>我们使用Flutter的showModalBottomSheet来展示底部弹窗，并在其中使用CupertinoDatePicker（苹果风格的时间选择器）或自定义的滚动选择器。由于要求是月日时分，我们可以使用CupertinoDatePicker并设置模式为dateAndTime，然后自定义显示的格式？但是注意：CupertinoDatePicker默认显示的是年月日时分，而我们只需要月日时分。 不过，我们可以通过自定义选择器来实现。这里我们可以使用第三方库，比如`flutter_cupertino_date_picker`（但注意这个库可能不再维护）或者使用`flutter_picker`，或者自己用ListView构建。 但是，为了更符合要求，我们可以使用CupertinoDatePicker，然后通过设置最小和最大日期来限制年份，但是这样用户还是能看到年份，只是不能选择其他年份。这并不符合只显示月日时分的要求。 因此，我们可以考虑使用`flutter_picker`库，它允许我们自定义选择器的每一列。 但是，题目要求采用滚动的样式，我们可以自己构建一个滚动选择器，使用多个`ListView`（每个代表月、日、时、分）并排。 由于时间关系，这里我们使用`flutter_cupertino_date_picker`库已经不太合适（因为需要自定义格式），而使用`flutter_picker`可以轻松实现。但是，为了减少依赖，我们也可以自己实现。 考虑到实现复杂度，这里我们使用Flutter自带的CupertinoDatePicker，并设置模式为`dateAndTime`，然后通过设置最小和最大日期为同一年，这样年份就固定了，用户只能选择同一年内的日期，但是这样还是显示年份。所以，我们可以通过自定义一个Widget来覆盖年份显示，但这样比较麻烦。 另一种方案：使用`showModalBottomSheet`，里面放置一个自定义的Widget，由四个水平排列的ListView组成，分别代表月、日、时、分。 由于这是一个较为复杂的选择器，我们可能需要自己构建。但为了简化，我们使用一个折中方案：使用CupertinoDatePicker，但只使用时间选择器（time）和日期选择器（date）分开两次选择？但是题目要求是同时选择月日时分。 根据要求，我们决定自己构建一个自定义的滚动选择器。 步骤： 1. 创建StatefulWidget，用于展示底部弹窗。 2. 使用showModalBottomSheet展示这个Widget。 3. 在Widget中，我们使用Row包裹四个ListView，分别用于选择月、日、时、分。 4. 每个ListView都包含一个固定范围的数据（月：1-12，日：根据月份动态变化，时：0-23，分：0-59）。 5. 监听每个ListView的滚动，更新选中的值。 6. 添加确认和取消按钮。 但是，自己实现一个完整的滚动选择器比较复杂，尤其是需要平滑滚动和固定选择位置。因此，我们可以使用`ListWheelScrollView`，它提供了类似iOS的滚轮效果。 由于`ListWheelScrollView`需要固定高度，我们可以设置每个滚轮的高度。 具体实现： 我们将创建一个自定义的弹窗Widget，它包含四个`ListWheelScrollView`，分别对应月、日、时、分。并且，我们将使用`FixedExtentScrollController`来控制每个滚轮的位置。 注意：日的范围需要根据月份和闰年情况调整（因为年份没有选择，我们默认使用当前年份？或者不涉及年份？题目要求是月日时分，所以年份可以忽略，但日需要根据月份来定，比如2月有28或29天，我们这里可以默认按闰年算，或者按28天？为了简单，我们可以固定为31天，然后在选择月份后动态改变日的天数。但是，如果用户选择2月，那么日应该只到28或29？这里我们可以固定为31天，然后当选择月份为2月时，日只有28天（不考虑闰年），或者29天？为了简单，我们不考虑闰年，2月固定为29天（这样闰年和非闰年都支持，因为用户选择2月29日时，非闰年可以忽略？但这样不严谨）。由于题目没有要求年份，所以我们可以忽略闰年，每个月都按最大天数来显示，但这样用户可能会选择不存在的日期（如2月30日）。所以，我们需要根据月份动态调整日的天数。 因此，我们需要在月份变化时，更新日的列表。 步骤： 1. 定义状态类，包含当前选择的月份、日、小时、分钟。 2. 根据月份计算当月的最大天数（注意：2月按29天处理，因为无法确定年份，我们按闰年处理，避免2月29日无法选择）。 3. 构建四个ListWheelScrollView，分别用于选择月、日、时、分。 4. 每个ListWheelScrollView的项数分别为：月（12）、日（根据月份变化）、时（24）、分（60）。 5. 当月份变化时，更新日的列表，并调整日选择器的位置（如果当前选择的日大于新的月份的最大天数，则设置为最大天数）。 6. 添加确认和取消按钮。 由于代码较长，我们只写一个简化的版本，不考虑闰年，2月固定29天（这样闰年可以选29，非闰年用户选了29我们也不管，因为题目没有要求年份）。 月份天数数组： List<int> daysInMonth = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; 注意：我们使用`ListWheelScrollView`，它需要设置`itemExtent`（每个条目的高度）和`diameterRatio`（直径比，控制外观）。 另外，为了美观，我们可以在中间画一条指示线。 由于时间限制，我们这里只写一个基本可用的版本。 以下是代码示例：</think>在 Flutter 中实现底部弹窗式时间选择器（月日时分格式）并采用滚动样式，可通过 `showModalBottomSheet` 结合 `CupertinoDatePicker` 或自定义 `ListWheelScrollView` 实现。以下是完整代码示例： ```dart import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; void main() => runApp(const MyApp()); class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: const Text('时间选择器示例')), body: Center( child: ElevatedButton( onPressed: () => _showCustomPicker(context), child: const Text('打开时间选择器'), ), ), ), ); } void _showCustomPicker(BuildContext context) { DateTime now = DateTime.now(); // 初始化选中时间（当前时间） DateTime selectedDate = DateTime(now.year, now.month, now.day, now.hour, now.minute); // 月份列表（1-12） final months = List.generate(12, (index) => index + 1); // 日期列表（动态生成，根据月份变化） List<int> days = _generateDays(selectedDate.month); // 小时列表（0-23） final hours = List.generate(24, (index) => index); // 分钟列表（0-59） final minutes = List.generate(60, (index) => index); showModalBottomSheet( context: context, builder: (BuildContext context) { return StatefulBuilder( builder: (context, setState) { return Container( padding: const EdgeInsets.all(16), height: 300, child: Column( children: [ // 标题和确认按钮 Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ TextButton( onPressed: () => Navigator.pop(context), child: const Text('取消'), ), const Text('选择时间', style: TextStyle(fontSize: 18)), TextButton( onPressed: () { print('选中时间: ${_formatDate(selectedDate)}'); Navigator.pop(context, selectedDate); }, child: const Text('确认'), ), ], ), // 滚动选择器区域 Expanded( child: Row( children: [ // 月份选择 _buildWheelPicker( items: months, selectedIndex: selectedDate.month - 1, onChanged: (index) { setState(() { selectedDate = DateTime( selectedDate.year, months[index], selectedDate.day, selectedDate.hour, selectedDate.minute, ); days = _generateDays(selectedDate.month); }); }, ), // 日期选择 _buildWheelPicker( items: days, selectedIndex: selectedDate.day - 1, onChanged: (index) { setState(() { selectedDate = DateTime( selectedDate.year, selectedDate.month, days[index], selectedDate.hour, selectedDate.minute, ); }); }, ), // 小时选择 _buildWheelPicker( items: hours, selectedIndex: selectedDate.hour, onChanged: (index) { setState(() => selectedDate = DateTime( selectedDate.year, selectedDate.month, selectedDate.day, hours[index], selectedDate.minute, )); }, ), // 分钟选择 _buildWheelPicker( items: minutes, selectedIndex: selectedDate.minute, onChanged: (index) { setState(() => selectedDate = DateTime( selectedDate.year, selectedDate.month, selectedDate.day, selectedDate.hour, minutes[index], )); }, ), ], ), ), ], ), ); }, ); }, ); } // 构建单个滚轮选择器 Widget _buildWheelPicker({ required List<int> items, required int selectedIndex, required Function(int) onChanged, }) { return Expanded( child: ListWheelScrollView( itemExtent: 50, diameterRatio: 1.5, physics: const FixedExtentScrollPhysics(), onSelectedItemChanged: onChanged, childDelegate: ListWheelChildBuilderDelegate( childCount: items.length, builder: (context, index) { final isSelected = index == selectedIndex; return Center( child: Text( items[index].toString().padLeft(2, '0'), style: TextStyle( fontSize: isSelected ? 24 : 18, color: isSelected ? Colors.blue : Colors.grey, fontWeight: isSelected ? FontWeight.bold : FontWeight.normal, ), ), ); }, ), ), ); } // 生成当月天数列表（自动处理闰年） List<int> _generateDays(int month) { final daysInMonth = DateUtils.getDaysInMonth(DateTime.now().year, month); return List.generate(daysInMonth, (index) => index + 1); } // 格式化日期为 "月日时分" 格式 String _formatDate(DateTime date) { return '${date.month}月${date.day}日 ${date.hour.toString().padLeft(2, '0')}:${date.minute.toString().padLeft(2, '0')}'; } } ``` ### 关键实现说明： 1. **底部弹窗**：使用 `showModalBottomSheet` 创建底部弹出层 2. **滚动选择器**：通过 `ListWheelScrollView` 实现四列独立滚轮（月/日/时/分） 3. **动态日期生成**：`_generateDays()` 方法根据月份动态计算当月天数（自动处理闰年） 4. **交互反馈**： - 选中项放大加粗显示 - 月份变化时自动更新日期范围 - 双位数字补零显示（如 05 分） 5. **数据格式**：最终输出格式为 "月日时分"（示例：`5月15日 14:30`） ### 效果特点： - 四列独立滚轮横向排列 - 选中项高亮显示 - 平滑滚动物理效果 - 动态日期范围处理 - 顶部操作栏（取消/确认）
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值