flutter 提示框，有确认取消的按钮的弹出框【组件】

最新推荐文章于 2024-07-07 03:59:39 发布

flutter大佬

最新推荐文章于 2024-07-07 03:59:39 发布

阅读量476

点赞数 1

分类专栏： flutter 文章标签： flutter 前端

本文链接：https://blog.csdn.net/m0_62359005/article/details/134316603

版权

flutter 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

组件：

class CustomAlertDialog extends StatelessWidget {
  final String? title;
  final String? content;
  final VoidCallback? onCancel;
  final VoidCallback? onConfirm;
  final textarea;

  const CustomAlertDialog({
    this.title,
    this.content,
    this.onCancel,
    this.onConfirm,
    this.textarea,
  });

  @override
  Widget build(BuildContext context) {
    return Dialog(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(4.0),
      ),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          if (title != null)
            Padding(
              padding: EdgeInsets.all(8.0),
              child: Text(title!, style: CustomTextStyle.text18),
            ),
          if (content != null)
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 16.0),
              child: Text(content!,
                  textAlign: TextAlign.center, style: CustomTextStyle.text14_1),
            ),
          textarea,
          SizedBox(height: 24.0),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              if (onCancel != null)
                Container(
                  width: 120,
                  height: 44,
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(4),
                      color: Color(0xFFF7F7F7)),
                  child: TextButton(
                    onPressed: onCancel,
                    child: Text('取消', style: CustomTextStyle.text16_5),
                  ),
                ),
              if (onConfirm != null)
                Container(
                  width: 120,
                  height: 44,
                  alignment: Alignment.center,
                  decoration:  BoxDecorationLoginStyle.primary0Box
                      ,
                  child: TextButton(
                    onPressed: onConfirm,
                    child: Text('确定', style: CustomTextStyle.text16_6),
                  ),
                ),
            ],
          ),
          SizedBox(height: 16.0),
        ],
      ),
    );
  }
}

父组件用法：

父组件用法
showDialog(
  context: context,
  builder: (context) {
    return CustomAlertDialog(
      title: '提示',
      content: '确定要删除吗？',
      onCancel: () {
        // 取消按钮点击事件
        Navigator.pop(context);
      },
      onConfirm: () {
        // 确定按钮点击事件
        // 执行删除操作
        Navigator.pop(context);
      },
    );
  },
);