Flutter开发之——showGeneralDialog

最新推荐文章于 2025-01-19 23:01:34 发布

PGzxc

最新推荐文章于 2025-01-19 23:01:34 发布

阅读量3.8k

点赞数

分类专栏： Flutter 文章标签： flutter generalDialog

本文链接：https://blog.csdn.net/Calvin_zhou/article/details/115768013

版权

Flutter 专栏收录该内容

122 篇文章

订阅专栏

本文详细介绍了Flutter中的showGeneralDialog方法，用于创建自定义提示框。通过pageBuilder参数实现用户自定义视图，barrierDismissible控制是否能点击背景关闭，barrierColor设置遮罩颜色，transitionDuration指定动画时长，transitionBuilder则用于定义动画效果。示例代码展示了如何构建一个带有淡入淡出动画的绿色提示框。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一概述

showGeneralDialog：用于自定义提示框
当执行点击事件时，执行showGeneralDialog，pageBuilder返回用户自定义试图

二 showGeneralDialog

2.1 源代码

Future<T?> showGeneralDialog<T extends Object?>({
  required BuildContext context,
  required RoutePageBuilder pageBuilder,
  bool barrierDismissible = false,
  String? barrierLabel,
  Color barrierColor = const Color(0x80000000),
  Duration transitionDuration = const Duration(milliseconds: 200),
  RouteTransitionsBuilder? transitionBuilder,
  bool useRootNavigator = true,
  RouteSettings? routeSettings,
})

2.2 常用属性说明

属性	说明	取值
pageBuilder	自定义参数页面	RoutePageBuilder
barrierDismissible	是否可以点击背景关闭	bool
barrierColor	背景颜色	Color
transitionDuration	动画时长	Duration
transitionBuilder	构建进出动画	RouteTransitionsBuilder

三示例

代码

RaisedButton(
              child: Text("showGeneralDialog"),
              onPressed: () {
                  showGeneralDialog(
                      context: context,
                      barrierColor: Colors.black.withOpacity(.5),
                      barrierDismissible: true,
                      barrierLabel: '',
                      transitionDuration: Duration(milliseconds: 200),
                      transitionBuilder: (BuildContext context,
                          Animation<double> animation,
                          Animation<double> secondaryAnimation,
                          Widget child) {
                        return ScaleTransition(scale: animation, child: child);
                      },
                      pageBuilder: (BuildContext context,
                          Animation<double> animation,
                          Animation<double> secondaryAnimation) {
                        return Center(
                          child: Container(
                            height: 300,
                            width: 250,
                            color: Colors.lightGreenAccent,
                          ),
                        );
                      });
                })