Flutter GetX系列教程---Dialog

最新推荐文章于 2024-04-01 11:32:01 发布

weixin_41779718

最新推荐文章于 2024-04-01 11:32:01 发布

阅读量571

点赞数

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

本文链接：https://blog.csdn.net/weixin_41779718/article/details/128476871

版权

Flutter 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

安装

将 GetX 添加到你的 pubspec.yaml 文件中

dependencies:
   get: ^4.6.5

在需要用到的文件中导入，它将被使用。

import 'package:get/get.dart';

Dialog介绍

Dialog 底层其实是对AlertDialog进行了封装，一般用于二次确认的弹出框，比如当点击某个按钮提交资料时，需要用户二次确认，以防止误操作。

调用Dialog

import 'package:flutter/material.dart';
import 'package:get/get.dart';
void main() =>runApp(
  const GetMaterialApp(
    home: Home(),
  )
);

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Scaffold(
        appBar: AppBar(
          title: Text("Dialog介绍"),
        ),
        body: Container(
          child: ListView(
            children: [
              ElevatedButton(onPressed: ()=>{
                Get.defaultDialog(
                  title: "是否确定？",
                  // titleStyle: TextStyle( // 设置标题样式
                  //   fontSize: 20,color: Colors.blue
                  // ),
                  middleText: "内容是否确认",// 设置内容
                  // middleTextStyle: const TextStyle(
                  //   color: Colors.purpleAccent
                  // ),
                  titlePadding: EdgeInsets.all(20),
                  // backgroundColor: Colors.pink,// 设置背景颜色
                  radius: 10, // 设置圆角
                  // content: Row(
                  //   children: [
                  //     CircularProgressIndicator(),
                  //     Text("自定义内容")
                  //   ],
                  // ),
                  // contentPadding: EdgeInsets.all(30),
                  // onConfirm: (){
                  //   print("onconfirm"); //确认按钮回调
                  // },
                  // onCancel: (){
                  //   print("onCancel");
                  // },
                  // actions: [
                  //   ElevatedButton(onPressed: (){
                  //     Get.back();
                  //   }, child: Text("自定义1")),
                  //   ElevatedButton(onPressed: (){
                  //     Get.back();
                  //   }, child: Text("自定义2")),
                  // ]
                  barrierDismissible: true, // 是否可通过点击背景关闭Dialog
                  onWillPop: () async{
                    print("要退出页面");
                    return true;
                  }
                )
              }, child: Text("Dialog"))
            ],
          ),
        ),
      ),
    );
  }
}

请添加图片描述

Dialog属性和说明

字段	属性	描述
title	String	弹出的标题，默认（Alert)
titlePadding	EdgeInsetsGeometry	标题的内边距，默认（EdgeInsets.all(8)）
titleStyle	TextStyle	标题的样式
middleText	String	中间内容区域显示的文字
middleTextStyle	TextStyle	中间内容区域显示的文字样式
content	Widget	弹出的内容，该值设置后middleText将无效
contentPadding	EdgeInsetsGeometry	内容的内边距，默认（EdgeInsets.all(8)）
onConfirm	VoidCallback	确认按钮回调
onCancel	VoidCallback	取消按钮回调
onCustom	VoidCallback	自定义按钮回调
cancelTextColor	Color	取消按钮文字的颜色
confirmTextColor	Color	确认按钮文字的颜色
textConfirm	String	确认按钮的文字
textCancel	String	取消按钮的文字
textCustom	String	自定义按钮的文字
confirm	Widget	确认按钮的组件
cancel	Widget	取消按钮的组件
custom	Widget	自定义按钮的组件
backgroundColor	Color	弹出框的背景颜色
barrierDismissible	bool	是否可以通过点击背景关闭弹窗
buttonColor	Color	按钮的文字颜色，根据按钮类型来设定不同的位置
radius	double	弹出框的圆角大小，默认20
actions	List	增加额外的子组件
onWillPop	WillPopCallback	拦截关闭之前做一些操作
navigatorKey	GlobalKey	用于打开对话框的key